SenchaTouch-デバイスプロファイル

今日のテクノロジーの世界では、モバイル、タブレット、デスクトップ、ラップトップなど、画面サイズの異なる複数のデバイスがあります。したがって、すべてのデバイスから優れたルックアンドフィールでアクセスできるアプリケーションを開発する必要があります。ただし、デバイスごとに異なるコードを開発するには、非常に時間とコストがかかります。

Sencha Touchは、デバイスプロファイル機能を提供することにより、この点で私たちを助けます。アクティブなプロファイルに基づいて、さまざまな依存関係が実行され、適用されます。

アプリケーションコードの記述中にデバイスプロファイルを宣言できます。-として複数のデバイスを持つことができます

Ext.application({
   name: 'MyApp',
   profiles: ['Phone', 'Tablet']
});

完了すると、プロファイルは次のようにロードされます-

MyApp.profiles.Phone.js
MyApp.profiles.Tablet.js

簡単な電話プロファイルを書く

Ext.define('Mail.profile.Phone', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Phone',
      views: ['phoneView']
   },

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

簡単なタブレットプロファイルの作成

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

   config: {
      name: 'Tablet',
      views: ['tableView']
   },

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

プロファイルでわかるように、特定のデバイスがアクティブであるかどうかを判別するisActive関数があります。デバイスがアクティブな場合、対応する依存関係が読み込まれ、インスタンス化されます。

上記の例で述べたように、電話デバイスを使用している場合、電話プロファイルのisActive関数はtrueを返し、電話デバイスに関連する依存関係が読み込まれます。ここでphoneViewがロードされます。デバイスがタブレットの場合、電話プロファイルのisActive関数はfalseを返し、タブレットプロファイルのisActive関数はtrueを返し、依存関係のtabletViewが読み込まれます。

起動プロセス

ここでもう1つ注意すべき点は、アプリケーションにプロファイルがある場合、アプリケーションコードのロードとインスタンス化は次の順序になります。

コントローラが最初にインスタンス化され、各コントローラのinit関数がロードされます。
プロファイルの起動関数が呼び出されます。
アプリケーションの起動関数が呼び出されます。

プロファイルとアプリケーションの起動関数はどちらもオプションであるため、どちらも定義しないと呼び出されません。

次のコードを見て、さまざまな起動関数と初期化関数をどこでどのように定義できるかを確認してください。

コントローラの初期化関数

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',
   
   init : function (){
      Ext.Msg.alert('Controller's init method');
   },
   
   config: {
      refs: {
         tab: '#divId
     }
   }
});

プロファイルの起動機能

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

   config: {
      name: 'Tablet', views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
   launch : function() {
      Ext.Msg.alert('profile's launch function');
   }
});

アプリケーションの起動機能

Ext.application({
   name: 'Sencha', launch: function() {
      Ext.Msg.alert(Application's launch function);
   }
});