Titanium mobileの基礎15〜TableViewの作成

Xcodeでさんざん苦しめられて結局まだ解決していないTableViewに、Titaniumで向き合うときがきた。

初期状態でリストを表示する。
セルをタッチするとナビゲーションバーつきの詳細ページへ移動する。

ポイント

・リストの項目はひとつずつ設定する
・ナビゲーションバーの「戻る」ボタンにあたる部分の文字列は自動的に設定される
・どのセルがクリックされたかはイベント変数eの中のrowDataが持っている値を使う
・詳細画面のviewは別ファイルに分ける

手順

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

ソース

タブグループアプリのソースを改造する。

app.js

// タブグループの作成
var tabGroup = Ti.UI.createTabGroup();

// ウィンドウの作成
var win1 = Ti.UI.createWindow({
	title: 'win1',
	backgroundColor: 'blue'
});

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

// タブの作成
var tab1 = Ti.UI.createTab({
	icon: 'KS_nav_ui.png',
	title: 'Tab1',
	window: win1
});

// テーブルに表示するリストの作成
var data = [
	// １行目の情報
	{
		title:'Album 1',	//アルバム管理アプリを想定
		hasChild:true,		//次の階層におりるかどうか
		dest:'album_1.js'	// 遷移先の画面
	},
	
	// ２行目の情報
	{
		title:'Album 2',	//アルバム管理アプリを想定
		hasChild:true,		//次の階層におりるかどうか
		dest:'album_2.js'	// 遷移先の画面
	}
];

// TableViewの生成
var table = Ti.UI.createTableView({
	// 生成時にデータを設定
	data: data
});

// セルがクリックされたときのイベント設定
table.addEventListener('click', function(e) {
	// セルがクリックされると、eにrowData(行データ)が入ってくるのでそれを使う
	if (e.rowData.hasChild) {
		// 「次の階層に降りる」プロパティがtrueであれば
		var w = Ti.UI.createWindow({
			url: e.rowData.dest,//遷移先のURLデータを取り出して設定
			title: e.rowData.title,//遷移先のタイトルを取り出して設定
			backgroundColor: 'white'
		});
		tab1.open(w);
	}
});

var view = Ti.UI.createView();
view.add(table);
win1.add(view);

var tab2 = Ti.UI.createTab({
	icon: 'KS_nav_ui.png',
	title: 'Tab2',
	window: win2
});

tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
tabGroup.open();

// タブ１にバッジをつける（iOSのみ・Android不可）
if (Ti.Platform.osname == 'iphone') {
	tabGroup.tabs[0].setBadge(2);
};

// 選択中のタブ番号取得
Ti.API.info(tabGroup.tabs[0].title);

album_1.js

var view_album_1 = Ti.UI.createView();
var label_album_1 = Ti.UI.createLabel({
	color: '#999',
	text: 'album 1',
	height: 32,
	width: 150,
	top: 120
});
view_album_1.add(label_album_1);

// カレントウィンドウに設定
Ti.UI.currentWindow.add(view_album_1);

album_2.js

var view_album_2 = Ti.UI.createView();
var label_album_2 = Ti.UI.createLabel({
	color: '#999',
	text: 'album 2',
	height: 32,
	width: 150,
	top: 120
});
view_album_2.add(label_album_2);

// カレントウィンドウに設定
Ti.UI.currentWindow.add(view_album_2);