Titanium MobileでTableViewの行クリックすると詳細画面へアニメーションしながら画面遷移させてみる。

// 最初に開かれる画面（TableView）
var win1 = Titanium.UI.createWindow({  
    title:'bookmark',
    backgroundColor:'#fff'
});

var rows = [
	{title:'apple',  hasChild:true, url:'http://www.apple.co.jp'},
	{title:'amazon', hasChild:true, url:'http://www.amazon.co.jp'},
	{title:'google', hasChild:true, url:'http://www.google.co.jp'}
];

var tblView = Titanium.UI.createTableView({
	data:rows
});

win1.add(tblView);




// ナビゲーショングループと、それを含むTopLevelのWindow
var rootWin = Titanium.UI.createWindow();
var navGrp  = Titanium.UI.iPhone.createNavigationGroup({
	// ナビゲーショングループの１枚目の画面を指定
	window:win1
});
// ナビゲーショングループをTopLevelのWindowに追加し、開く
rootWin.add(navGrp);
rootWin.open();



// 行クリック時の処理
tblView.addEventListener('click', function(e){
        var childWin = Titanium.UI.createWindow({
        	title:'webwindow',
        	backgroundColor:'#333'
        });
        
        var webv = Titanium.UI.createWebView({
        	url:e.rowData.url
        });
	
	childWin.add(webv);

	//クリックで子画面を開く
	navGrp.open(childWin, {animated:true});
});

　このように書くと、行をクリックしたとき、画面が横スライドして子画面が出てくる。
　子画面の元に戻るナビゲーションボタンとかも、特に設定しなくても表示されている。
　簡単！（Titanium.UI.iPhone.createNavigationGroup の iPhone の部分を記述し忘れて、小一時間悩んだのは秘密だ）