先週、「Sencha Touch パーフェクトガイド」が出版されました。売れ行きはなかなか好調のようです。ご購入頂いた皆様、本当にありがとうございます。そして「はじめに」の正誤表を読んで、大事なことを思い出しました。今週から週1回のペースで Sencha Touch の記事を投稿します。。
実は「Sencha Touch パーフェクトガイド」には、書いていない内容があります。それは、所謂「バッドノウハウ」です。バッドノウハウはバージョンが変わると必要なくなったりする代物ですが、実際の開発現場では役に立つ情報です。今週から「Practical Sencha Touch」シリーズと題しまして、Sencha Touch アプリを開発する現場で役に立つノウハウを公開します。また、開発に便利な周辺ツールも併せてご紹介したいと思います。
Problem:
Sencha Touch のドキュメントに含まれているサンプルなどを参考にアプリを作ったが、どうにも画面の初期表示が遅い。
Solution:
コンポーネントの生成を「できる限り」遅延させましょう。例えば、以下のような構造の画面を作っていたとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
Ext.Viewport.add({ xtype: 'main', layout: 'card', items: [ { xtype: 'container', itemId: 'firstPage', items: [ { xtype: 'toolbar', items: [ { text: 'go second' }, { xtype: 'title', title: 'first' } ] } ] }, { xtype: 'container', itemId: 'secondPage', items: [ { xtype: 'toolbar', items: [ { text: 'go third' }, { xtype: 'title', title: 'second' } ] } ] }, { xtype: 'container', itemId: 'thirdPage', items: [ { xtype: 'toolbar', items: [ { text: 'go first' }, { xtype: 'title', title: 'third' } ] } ] } ] }); |
最初に必要なのは itemId「firstPage」のコンポーネントだけなので、それ以外のコンポーネントは items に含めないようにします。items への追加を必要な時まで後回しにすることで、画面の初期表示を大きく改善できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
Ext.Viewport.add({ xtype: 'main', layout: 'card', items: [ { xtype: 'container', itemId: 'firstPage', items: [ { xtype: 'toolbar', items: [ { text: 'go second' }, { xtype: 'title', title: 'first' } ] } ] } // 最初に必要ないコンポーネントは含めない // { // xtype: 'container', // itemId: 'secondPage', // items: [ // { // xtype: 'toolbar', // items: [ // { text: 'go third' }, // { xtype: 'title', title: 'second' } // ] // } // ] // }, // { // xtype: 'container', // itemId: 'thirdPage', // items: [ // { // xtype: 'toolbar', // items: [ // { text: 'go first' }, // { xtype: 'title', title: 'third' } // ] // } // ] // } ] }); |
Discussion:
コンポーネントの生成をいかに後回しにするかは Sencha Touch のみならず、Ext JS でも定石のようです。サンプル程度の小さなアプリでは、最初にまとめてコンポーネントを作っても影響は少ないです。ただ、画面数の多いアプリを作る場合は、いかにコンポーネントを遅延生成するかに配慮した方がよいでしょう。
遅延生成させるためには Controller クラスの refs で指定できる autoCreate オプションが便利です。autoCreate オプションは、利用時に存在しない場合、コンポーネントを自動生成してくれるオプションです。以下のコードでは autoCreate オプション付きの refs を定義し（*1）、利用時にコンポーネントが存在しない場合に自動生成して（*2）画面に追加（*3）しています。わざわざコンポーネントを生成するコードを書かなくてもよいので、すっきりします。ぜひ一度試してみて下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
Ext.define('ArielArea.controller.Sample', { extend: 'Ext.app.Controller', config: { refs: { secondPage: { // *1 selector: 'main secondpage', autoCreate: true, xtype: 'secondpage' }, main: 'main' }, control: { 'main #firstPage button': { tap: 'goToSecond' } } }, goToSecond: function() { var me = this, main = me.getMain(), secondPage = me.getSecondPage(); // *2 // 以下のようなコードは不要 // if (Ext.isEmpty(secondPage)) { // secondPage = Ext.widget('secondpage'); // } main.setActiveItem(secondPage); // *3 } }); |
最近のコメント