Titanium mobileの基礎05〜ボタンを押して画面を切り替える

Titanium

ボタンを押すと別画面に切り替える。
またボタンを押すと元の画面に戻る。

↓　　　　　↑

手順

http://dotinstall.com/lessons/basic_titanium/1912

ポイント

・新しい画面を開くときは、新しく開くwindowをopen()
・元の画面に戻るときは、すでに開いているwindowをclose()
　-> open済みの元の画面を再度openするわけではないことに注意。

ソース

app.js

// ２つのwindowを作る
var win1 = Ti.UI.createWindow({
	backgroundColor: 'blue'
});

var win2 = Ti.UI.createWindow({
	backgroundColor: 'yellow'
});

// ２つのviewを作る
var view1 = Ti.UI.createView();
var view2 = Ti.UI.createView();

// ウィンドウ１ -> ウィンドウ２へ行くための処理
var button1 = Ti.UI.createButton({
	title: 'Open Win2',
	top: 180,
	width: 200,
	height: 70
});

button1.addEventListener('click', function(e){
	win2.open();// ウィンドウ２を開く
});

// ウィンドウ２ -> ウィンドウ１へ行くための処理
var button2 = Ti.UI.createButton({
	title: 'Open Win1',
	top: 180,
	width: 200,
	height: 70
});

button2.addEventListener('click', function(e){
	//処理的にはウィンドウ２を閉じてウィンドウ１を表示させている
	win2.close();
});

// viewにパーツ追加
view1.add(button1);
view2.add(button2);

// windowにview追加
win1.add(view1);
win2.add(view2);

win1.open();

留意点

iPhoneシミュレータが起動直後に終了してしまうようになってしまったため、Android2.2のエミュレータで動作確認をした。
　＃つい先日アップデートした最新のiPhoneシミュレータ6.0にTitaniumがまだ未対応のため？　それともXcodeを先日4.5にアップデートしたことによるもの？　不明。

http://blog.shokuan-taro.net/?p=10
によれば新規プロジェクトを作成しなおせばよいということだったが、それでも改善しなかった。
今回は諦めてAndroidエミュレータで動作確認した。

所感

XcodeだったらStoryboardで１行もコードを書くことなく作れるレベルの動作。
簡単な処理だと逆にTitaniumのほうが煩雑に見えてしまうのは仕方ない範囲。少し手間がかかるけどコード自体は簡単だから、実際にやってみると見た目ほどの難しさは感じない。

XcodeのStoryboardでは手が及ばずObjective-Cと向き合わざるを得ないような場面で、Titaniumの真価がはじめて実感できるのかもしれない。

ただ、Titaniumの場合は画面遷移の全体像がとらえにくくなるのがネック。
＃画面遷移が視覚的に一目瞭然なStoryboardとは大きく異なる部分。

ウィンドウごとにファイルを分けたり、事前に手書きで画面遷移図を書いておくなどの物理的な対策が必要。