Sencha Touch-履歴サポート

Sencha Touchには、完全な履歴サポートとディープリンク機能が備わっています。

最も単純な戻るボタン機能を備えており、ユーザーが画面やアプリケーションを更新しなくても画面間を移動できるようにします。

また、ユーザーが任意のURLに移動するのに役立つルート機能も提供します。ブラウザウィンドウで提供されるURLに基づいて、特定の関数を呼び出して特定のタスクを実行します。

戻るボタンの機能については、次の例をご覧ください。

この例は、リスト内のリストにすぎないネストされたリストを示しているため、リスト項目のいずれかをクリックすると、別のリストが開き、画面の上部に戻るボタンが表示されます。

完全なコードベースについては、ビューコンポーネントセクションのlink：/sencha_touch/view_nested_list [__ Nested List]を確認できます。

ルーティング

ルートの最も簡単な例

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',

   config: {
      routes: {
         login: 'showLogin',
         'user/:id': 'userId'
      }
   },

   showLogin: function() {
      Ext.Msg.alert('This is the login page');
   },
   userId: function(id) {
      Ext.Msg.alert('This is the login page specific to the used Id provided');
   }
});

上記の例で、ブラウザのURLがhttps://myApp.com/#loginの場合、showLogin関数が呼び出されます。

URLにパラメーターを指定し、特定のパラメーターに基づいて関数を呼び出すことができます。たとえば、URLがhttps://myApp.com/#user/3の場合、別の関数userIdが呼び出され、特定のIDを関数内で使用できます。

事前ルーティング

いつか、コンマ、空白スペース、特殊文字などを含む事前パラメーターがあります。このため、上記のルート作成方法を使用すると、機能しません。この問題を解決するために、Sencha touchには条件付きルーティングが用意されており、パラメーターが受け入れるデータのタイプの条件を指定できます。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login/:id: {
            action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }
         }
      },

      showLogin: function() {
         Ext.Msg.alert('This is the login page with specific id which matches criteria');
      }
   }
});

そのため、上記の例のように、URLパラメーターとして許可されるデータのタイプを明確に示す条件で正規表現を指定しました。

異なるデバイスプロファイル間で同じURLを共有する

Sencha touchはデバイスプロファイルを提供するため、同じアプリケーションコードを複数のデバイスで使用できるため、同じURLに対して異なるプロファイルが異なる機能を持つ可能性があります。

この問題を解決するために、Sencha touchを使用すると、メインコントローラーにルーティングを記述し、呼び出された関数をプロファイル固有のプロファイルとともにすべてのプロファイルに書き込むことができます。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin'
      }
   },
});
//For phone profile
Ext.define('MyApp.controller.phone.Main, {
   extend: 'MyApp.controller.Main, showLogin: function() {
      Ext.Msg.alert('This is the login page for mobile phone profile');
   }
});
//For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
   extend: 'MyApp.controller.Main,showLogin: function() {
      Ext.Msg.alert('This is the login page for tablet profile');
   }
});

例が示すように、showLogin機能を持つメインコントローラーが1つあり、2つの異なるプロファイル（電話/タブレット）があります。両方のプロファイルには、プロファイル固有の異なるコードを持つshowLogin関数があります。

このようにして、特定の機能を持つ複数のプロファイルデバイス間で同じURLを共有できます。

Sencha-touch-history-and-support

Sencha Touch-履歴サポート

ルーティング

事前ルーティング

異なるデバイスプロファイル間で同じURLを共有する

目次