チュートリアル:モバイル向けの画面を作成してみる
前回までで、メモを残せるアプリケーションがおおよそ完成しました。
しかし、それはあくまでPCブラウザ向けです。
今回からは、モバイル向けの画面を作ってみます。(ちなみに、チュートリアルはモバイル向けまで完成したら終わりにするつもりです)
予備知識
これまではclassicディレクトリを使っていましたが、モバイル向けの場合はmodernディレクトリを使います。
また、ドキュメント(http://docs.sencha.com/extjs/6.2.1/index.html)ですが、右上にある「M」のみを有効にしておけば、modernで使えるクラスを検索できます。
classicとmodernでは、ExtJS SDKで使うソースが全く別物です。しかし、クラス名は同じだったりするので、ドキュメントを調べる場合などは注意が必要です。
modernで使えるクラスは、昔のSencha Touch2がベースになっています。そのため、classicとコードの記述方法が異なる部分が多々あります。
シンプルな画面を作成する
まずはApplication.jsをmodern/srcに作成します。
/** * アプリケーションクラス。 * * @class Memo.Application * @extend Ext.app.Application */ Ext.define('Memo.Application', { extend: 'Ext.app.Application', name: 'Memo' });
次にmodern/src/view/main/Main.jsを変更します。Main.jsはアプリケーション作成時に自動的に作成されたファイルですね。
/** * ビューポートクラス。 * * @class Memo.view.main.Main * @extend Ext.Panel */ Ext.define('Memo.view.main.Main', { extend: 'Ext.Panel', xtype: 'app_main', title: 'タイトル', html: 'テキスト' });
ビルドとサーバ起動
開発時のビルドには、↓のようにsencha app watchのあとに「modern」と付与する必要があります。
sencha app watch modern
途中で「[INF] Processing Build Descriptor : modern」と表示されると、modernのビルドになっていることを示しています。
画面を表示してみる
あとは画面を表示してみます。ブラウザのUser Agentに気を付けてください。
これで準備完了です。