Contents アプリケーションへのプロファイルの追加 プロファイルクラスの追加 デバイス特定ビューの追加 クラスの追加 結論

Architect および Sencha Touch でのデバイスプロファイルの使用

市場で幅広いデバイスが利用できるようになり、ユーザーが複数のデバイスで異なるアプリを作成できることが、ますます重要になってきています。このような理由から Sencha Touch でデバイスプロファイルを導入しました。今回、 Sencha Architect でも利用できるようになりました。

デバイスプロファイルに慣れていない場合、先に進む前にここで詳しい内容を読むことをお勧めします。

アプリケーションへのプロファイルの追加

プロファイルサポートをアプリに追加する場合、アプリケーションにプロファイルに関する情報を伝え、それぞれに Ext.app.Profile サブクラスを作成する必要があります。4 つのシンプルな手順でアプリケーションにプロファイルを追加してみましょう。

  1. インスペクタでアプリケーションのノードを選択します

    image

  2. 次に、プロファイルをカスタム設定として追加します。コンフィグパネルのフィルタボックスに profile:[] と入力して [Add（追加）] をクリックするだけです。

    image

  3. [Edit array（配列の編集）] ボタンをクリックしてプロファイルを編集します。

    image

  4. この時点では、エディタを使用して文字列を配列に追加できます。この例では、「tablet」を追加してみましょう。

    [
   "Tablet"
]

    image

注意:_エディタの最上部の上矢印を押すとクラスレベルビューが表示されます。_

image

そうです。アプリケーションでプロファイルを有効にしました。次の手順はプロファイルクラス Tablet.js の追加です。

プロファイルクラスの追加

新しいプロファイルクラスを追加するには、作成する各プロファイルの JS リソースをツールボックスから追加するだけです。

それでは、Tablet を作成してみましょう。作成後に、url コンフィグを profile/Tablet.js として設定します。それでは、javascript の空ファイルが用意できたので、デバイスに対してこのクラスを区別してみましょう。

本ガイドでは、以下のコードを Tablet.js に追加するように尋ねます。

Ext.define('MyApp.profile.Tablet', {
    extend: 'Ext.app.Profile',

    config: {
        controllers: ['Groups'],
        views: ['GroupAdmin'],
        models: ['MyApp.model.Group']
    },

    isActive: function() {
        return Ext.os.is.Tablet;
    }
});

注意:_このコードは Sencha Touch デバイスプロファイルガイドからのものです。コードはアプリケーションに必要とする機能とレイアウトによって大きく異なります。

デバイス特定ビューの追加

次に、特化したビューを追加してみましょう。特化したビューに慣れていない場合、デバイスプロファイルガイドの「特殊なビュー」を確認してみてください。デバイスプロファイル - 特化したビュー

Ext.define('Mail.view.tablet.Main', {
    extend: 'Mail.view.Main',

    config: {
        title: 'Tablet-specific version'
    }
});

Ext.define('Mail.view.Main', {
    extend: 'Ext.Panel',

    config: {
        title: 'Generic version',
        html: 'This is the main screen'
    }
});

次に、Main.view.Main を継承するのでクラスを使用する必要があります。

注意:_Mail.view.Main をツールボックスからドラッグして追加できます。_

クラスの追加

image

この手順で行う必要があるのはビューツリーノードで “Class” をドロップしてビューになるようにすることだけです。継承コンフィグを見つけて .view. 、この例では ‘Mail.view.Main’ となるようにします。最後に、userClassName を ‘tablet.Main’ に設定すると、プロファイル特定のビューになります。

各プロファイルのタイトルを変更するだけの場合は、フィルターフィールドに‘Tablet specific version’ というタイトルを追加するだけです。

ただし、デバイスごとにより細かく堅牢な操作性を実現したいと考える場合もあります。この場合、上記でプロファイルクラスに対して行ったのと同じ方法で JS Resource を使用することを考えます。

結論

いくつかのヒントと想像力を活かせば、Sencha Architect を使用してアプリケーション向けにデバイスプロファイルで優れた操作性を実現できます。

ご質問やコミュニティサポートに関しては、以下のフォーラム投稿をご利用ください。Sencha Architect でのデバイスプロファイルの使用方法

Last updated