TiのWindowを利用すると画面遷移が行え親から子を作るようなイメージになります。
イメージをまとめるため簡素なものを作成してみました。
ちょこっとメモをかねて作成
| index | index2 | index3 | |
|---|---|---|---|
| xml | <Alloy> <Window class="container"> <Label text="index2を開く" onClick="openIndex2"> </Window> </Alloy> | <Alloy> <Window class="container"> <Label text="index2を閉じる" onClick="closeIndex2" /> <Label text="index3を開く" onClick="openIndex3" /> </Window> </Alloy> | <Alloy> <Window class="container"> <Label id="param1" top="30" /> <Label text="argsをチェックする" top="30" onClick="argsCheck" /> <Label text="index3を閉じる" onClick="closeIndex3" /> <Label text="index2と3を閉じる" onClick="closeIndex2and3" /> </Window></Alloy> |
| tss | ".container" : { backgroundColor:'#0ff', top: 30, layout: 'vertical', } | ".container" : { backgroundColor:'#f00', top: 30, layout: 'vertical', } | ".container" : { backgroundColor:'#ff0', top: 30, layout: 'vertical', } |
| js | function openIndex2() { var index2 = Alloy.createController('index2').getView(); index2.open(); } $.index.open(); | var args = arguments[0] || {}; function closeIndex2() { $.index2.close(); } function openIndex3() { var index3 = Alloy.createController('index3',{window : $.index2, text : "index2の中身を入れることができる."}).getView(); index3.open(); } | var args = arguments[0] || {}; function argsCheck() { alert("このメソッドでもargsを参照できる：" + args.text) } function closeIndex3() { $.index3.close(); } function closeIndex2and3() { $.index3.close(); args.window.close(); } // 引数を受け取る. $.param1.text = args.text; |
少し書き方を横着しましたgitとかに上げれればよいのですが現在勉強中。
こちらのソースを実行すると画像のようになるのですが、indexはそのままindex2をopenしているだけです。
Alloyから生成するためには「Alloy.createController」こちらを利用します。
さらに注意点としてopenするときはviewである必要があるので「getView()」メソッドが必要です。
index2のところで、自分をcloseする際には「$.index2.close();」と非常にシンプルになります。
ここはおまじないでよい気がしてきました。
openIndex3の点が面白いと思えるところです。
Alloy.createControllerをする際に引数を渡すことができます。
この引数がindex3のargsに格納され利用できるのですが。
index3内の「$.param1.text = args.text;」これは理解が行いやすいのですが。
あえてalertとcloseIndex2and3をつけた部分です。
clickイベントを実行した際にもargsが生成した際に利用したインスタンスが利用可能な点です。
これにより、alertで前のwindowであるindex2のデータを見ることができます。
closeIndex2and3についても、自信と、index2を同時にcloseすることができるのです。
基本的な点かもしれないですが意外と知らないなと思いフムフムなっとく
現状ものを作るよりも、知る方が多いので苦労します。
