前回課題とした、Titanium mobile でクリックしたら次のウィンドウに遷移させる方法です。
遷移先のウィンドウ用にdetail.jsを作成しました(app.jsと同じ階層に)。中身はこんな感じ
// create table view data object var data = [ {title:'Tab Groups'}, ]; // create table view var tableview = Titanium.UI.createTableView({ data:data }); // add table view to the window Titanium.UI.currentWindow.add(tableview); var win = Titanium.UI.createWindow({ height:30, width:250, bottom:110, borderRadius:10 }); var view = Titanium.UI.createView({ backgroundColor:'#000', opacity:0.7, height:30, width:250, borderRadius:10 }); win.add(view);
でapp.jsをこの形
// this sets the background color of the master UIView (when there are no windows/tab groups on it) Titanium.UI.setBackgroundColor('#000'); // create tab group var tabGroup = Titanium.UI.createTabGroup(); // // create base UI tab and root window // var win1 = Titanium.UI.createWindow({ title:'Tab 1', backgroundColor:'#fff' }); var tab1 = Titanium.UI.createTab({ icon:'KS_nav_views.png', title:'Tab 1', window:win1 }); // create slider view data object var tableview = Titanium.UI.createTableView({ data : [ {title:'Detail', test:'detail.js'}, ] }); tableview.addEventListener('click', function(e) { if (e.rowData.test) { var win = Titanium.UI.createWindow({ url:e.rowData.test, title:e.rowData.title }); // Titanium.UI.currentTab.open(win,{animated:true}); tab1.open(win,{animated:true}); } }); win1.add(tableview); //Titanium.UI.currentWindow.add(tableview); // // add tabs // tabGroup.addTab(tab1); // open tab group tabGroup.open();
クリックして開く処理
まず、ポイントはここ。app.jsのこの部分
var tableview = Titanium.UI.createTableView({ data : [ {title:'Detail', test:'detail.js'}, ] });
data.testプロパティにdetail.jsを指定します。
tableview.addEventListener('click', function(e) { if (e.rowData.test) { var win = Titanium.UI.createWindow({ url:e.rowData.test, title:e.rowData.title }); // これだとエラーでた // Titanium.UI.currentTab.open(win,{animated:true}); tab1.open(win,{animated:true}); } });
クリック時の処理をaddEventListenerで設定します。
Kitchen think にあったサンプルを見ながら実装したのですが、currentTabでエラーが出てしまったので、tab1を直接指定してます。tabの設定しだいでは動くかと思います。
//Titanium.UI.currentWindow.add(tableview); win1.add(tableview);
最後にwindowオブジェクトににaddして完了。ここもcurrentWindowだとエラーが出ててしまったので、win1を直接指定しました。
これで前回のxml読み込み処理と組み合わせて、タイトル一覧→クリック→本文、というフローができそうなので次の課題としてみます。
Pingback: Titanium CLIでiOSアプリを開発(2)~参考URLと作業風景~ | ペンギンの道しるべ