Hello World
Hello Worldアプリの作り方を解説します。
このHello Worldアプリは２つの画面から構成されています。
一つ目のMainPage画面にはボタンとユーザがボタンをタップした回数が表示されます。
ユーザはそのボタンをタップするとHelloWorldPageに移動します。
HelloWorldPageではHello Worldの文字をタップすると前の画面に戻ります。
hello.navyjs.org
File/Directory
アプリに必要なファイル/ディレクトリ構成はこのようになっています。
HelloWorld/contents/ ├── code // JavaScriptを保存するディレクトリ │ ├── hello_world.js │ ├── main_page.js │ └── main_scene.js ├── config // アプリの各種設定を保存するディレクトリ │ ├── app.json // アプリの画面サイズや起動画面を設定 │ ├── page.json // アプリのページとレイアウトのマッピング設定 │ └── scene.json // アプリのシーンとレイアウトのマッピング設定 ├── image // 画像を保存するディレクトリ │ ├── button │ │ └── middle │ │ ├── active.png │ │ ├── disabled.png │ │ └── normal.png │ └── icon.png ├── index.html // アプリのエントリポイント ├── layout // レイアウトファイルを保存するディレクトリ │ ├── hello_world.json │ ├── main_page.json │ └── main_scene.json ├── manifest.json // アセット(code/config/image/layout)の定義ファイル └─── navy // NavyJS本体のコードを保存するディレクトリ ├── navy.js └── navy.min.js
Layout
レイアウトの作成方法を動画で解説します。
Code
コードの内容について解説します。
NavyJSではまずNavy.Pageを継承したクラス(コンストラクタ関数)を作成します。そしてライフサイクルメソッドをオーバーライドして各画面で行う処理を記述します。 主にユーザからの入力イベントのハンドリングや、他のモデルの呼び出し、表示内容の更新などを行います。
ユーザがボタンをタップした回数を画面上に表示する処理を実装してみます。
Navy.Class('MainPage', Navy.Page, {
_count: 0,
onCreate: function($super, ev) {
$super(ev);
var buttonView = this.findViewById('TapButton');
buttonView.on('Tap', function(){
this._count++;
var countView = this.findViewById('Count');
countView.setText(this._count);
}.bind(this));
}
});
code/main_page.js
1行目のNavy.Classはクラスを定義する関数です。第1引数にクラス名、第2引数に親クラス、第3引数にプロトタイプオブジェクトを指定します。 プロトタイプオブジェクにはプロパティ、メソッドを定義します。ここでは_countプロパティとonCreateメソッドが定義されています。
4行目、5行目の$super変数は親クラスのメソッドを参照します。 onCreateメソッドはNavy.Page#onCreateをオーバーライドしているので$superを使って親クラスのメソッドを呼び出す必要があります。 onCreateメソッドはMainPageがインスタンス化されレイアウトの準備が完了したとき(まだ端末上には表示されていない)に呼び出されます。 通常、インスタンスの初期化処理はこのonCreateメソッドで行うことになります。
7行目のfindViewByIdメソッドは指定されたIDのViewを返します。IDはレイアウト作成時に設定したものを指定します。
8行目〜12行目はbuttonViewがタップされた時の処理を記述しています。ここは通常のDOMイベントと同じようにイベント名、コールバック関数を指定します。