Sencha Touch-デバイスプロファイル

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

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つのポイントは、アプリケーションにプロファイルがある場合、アプリケーションコードのロードとインスタンス化は次の順序になります-

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

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

次のコードを見て、さまざまな起動および初期化関数を定義できる場所と方法を確認してください。

コントローラーの初期化機能

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);
   }
});

Sencha-touch-device-profile