KitchenSinkのbase_ui.js（Titaniumの勉強メモ）

入門になったら、勉強がなかなか進まなくて、KitchenSinkのサンプルソースを追って勉強しようかと思っています。興味のある方は一緒に勉強しましょう。コミュニケーションの場になればなあと思います。

■ソースのURL：
https://github.com/appcelerator/KitchenSink/blob/master/Resources/main_windows/base_ui.js

/Resources/main_windows/base_ui.js

// create table view data object
var data = [
	{title:'Tab Groups', hasChild:true, test:'../examples/tab_groups.js'},
	{title:'Window Properties', hasChild:true, test:'../examples/window_properties.js'},
	{title:'Window Layout', hasChild:true, test:'../examples/window_layout.js'},
	{title:'Window (Standalone)', hasChild:true, test:'../examples/window_standalone.js'},
	{title:'Views', hasChild:true, test:'../examples/views.js'},
	{title:'Custom Events', hasChild:true, test:'../examples/custom_events.js'},
	{title:'Window Events', hasChild:true, test:'../examples/window_events.js'},
	{title:'Vertical Layout', hasChild:true, test:'../examples/vertical_layout.js'},
	{title:'Horizontal Layout', hasChild:true, test:'../examples/horizontal_layout.js'}
];

// add iphone specific tests
if (Titanium.Platform.name == 'iPhone OS')
{
	data.push({title:'Tabs', hasChild:true, test:'../examples/tabs.js'});
	data.push({title:'Window NavBar', hasChild:true, test:'../examples/window_navbar.js'});
	data.push({title:'Window Toolbar', hasChild:true, test:'../examples/window_toolbar.js'});
	data.push({title:'Window Constructor', hasChild:true, test:'../examples/window_constructor.js'});
	data.push({title:'Animation', hasChild:true, test:'../examples/animation.js'});
	data.push({title:'Nav Group', hasChild:true, test:'../examples/navgroup.js'});

	Ti.include("../examples/version.js");

	if (isIPhone3_2_Plus())
	{
		data.push({title:'Modal Windows', hasChild:true, test:'../examples/modal_windows.js'});
		data.push({title:'Custom Fonts', hasChild:true, test:'../examples/custom_fonts.js'});
	}
}

// add android specific tests
if (Titanium.Platform.osname == 'android')
{
	data.push({title:'Preferences', hasChild:true, test:'../examples/preferences.js'});
    data.push({title:'Hide Soft Keyboard (Android)', hasChild:true, test:'../examples/android_hide_softkeyboard.js'});
    data.push({title: 'Window Soft Input (Android)', hasChild:true, test:'../examples/android_window_soft_input_mode.js'});
    data.push({title: 'Menu (Android)', hasChild:true, test:'../examples/android_menus.js'});
}

// create table view
var tableview = Titanium.UI.createTableView({
	data:data
});

// create table view event listener
tableview.addEventListener('click', function(e)
{
	if (e.rowData.test)
	{
		var win = null;
		if (Ti.Platform.name == "android") {
			win = Titanium.UI.createWindow({
				url:e.rowData.test,
				title:e.rowData.title
			});
		} else {
			win = Titanium.UI.createWindow({
				url:e.rowData.test,
				title:e.rowData.title,
				backgroundColor:'#fff',
				barColor:'#111'

			});
		}


		if (e.index == 3)
		{
			if (Ti.Platform.name == "iPhone OS") {
				win.hideTabBar();
			}
		}
		if (Ti.Platform.name==='android' && e.rowData.test.indexOf('window_properties.js') >= 0) {
			// As explained in apidoc for Window, if opacity is ever to be changed for an Android
			// activity during its lifetime, it needs to use a translucent background.  We trigger
			// using a translucent theme by the presence of the opacity property, so we need to
			// set it here.  Setting it to 1 means it's totally opaque, but gives us the property to
			// make it more transparent later with the "toggle opacity" test.
			win.backgroundColor = "#191919"
			win.opacity = 1;
		}
		Titanium.UI.currentTab.open(win,{animated:true});
	}
});

// add table view to the window
Titanium.UI.currentWindow.add(tableview);

Titanium.UI.currentWindow.addEventListener('focus', function()
{
	Ti.API.info('FOCUS RECEIVED IN base_ui');
	Ti.API.info(Ti.dumpCoverage());
});
//
//  ADD EVENT LISTENERS FOR CUSTOM EVENTS
//
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
});

var label = Titanium.UI.createLabel({
	color:'#fff',
	font:{fontSize:13},
	textAlign:'center',
	width:'auto',
	height:'auto'
});
win.add(view);
win.add(label);

Titanium.App.addEventListener('event_one', function(e)
{
	label.text = 'base_ui.js: event one, array length = ' + e.data.length;
	win.open();
	setTimeout(function()
	{
		win.close({opacity:0,duration:500});
	},1000);
});

Titanium.App.addEventListener('event_two', function(e)
{
	label.text = 'base_ui.js: event two, name = ' + e.name;
	win.open();
	setTimeout(function()
	{
		win.close({opacity:0,duration:500});
	},1000);

});

■ソースのURL：https://github.com/appcelerator/KitchenSink/blob/master/Resources/examples/version.js

/Resources/examples/version.js

//
// returns true if iphone/ipad and version is 3.2+
//
function isIPhone3_2_Plus()
{
	// add iphone specific tests
	if (Titanium.Platform.name == 'iPhone OS')
	{
		var version = Titanium.Platform.version.split(".");
		var major = parseInt(version[0],10);
		var minor = parseInt(version[1],10);
		
		// can only test this support on a 3.2+ device
		if (major > 3 || (major == 3 && minor > 1))
		{
			return true;
		}
	}
	return false;
}

function isiOS4Plus()
{
	// add iphone specific tests
	if (Titanium.Platform.name == 'iPhone OS')
	{
		var version = Titanium.Platform.version.split(".");
		var major = parseInt(version[0],10);
		
		// can only test this support on a 3.2+ device
		if (major >= 4)
		{
			return true;
		}
	}
	return false;
}

---

サンプルから勉強になった内容：

下記の内容を上記のソースから探すことが出来れば、上記のソースがもう理解できた証だと思います。後はどのように組み合わせて自分のソースの中に入れれば良いかを考えればよいと思います。

• tableViewのdataオブジェクトの定義の仕方。[{title:,hasChild:}]
• ⇛titleはTableViewRowに表示され、hasChild=trueの場合該当するTableViewRowに「＞」が表示される。
• Titanium.Platform.nameにより処理を切り替える方法。　　
• ⇛iPhoneの場合、戻り値は「iPhone OS」である。
• ⇛Androidの場合、戻り値は「android」である。
• Tabs,Window NavBar,Window Toolbar,Window Constructor,Animation,Nav Groupに示したのは「iPhone OS」特有のUIです。
• Modal Windows,Custom Fontsに示したのは「iPhone OS」のversion3.2以上の場合特有のUIです。
• Preferences,Hide SOft Keyboard (Android),Window Soft Input (Android),Menu (Android)に示したのは「android」に特有のUIです。
• Titanium.Platform.version.split(".");により「iPhone OS」のバージョンが3.2以上あるいは4以上の判定の仕方。
• TableViewの作成の仕方。
• TableViewに対してclickイベントを追加する方法。
• 「e.rowData.属性名」により、TableViewRowの値の取得の方法
• 「e.index == n」により現在クリックされたTableViewRowのindexを判断する。
• 「win.hideTabBar()」によりTabBarを非表示にする方法。
• win.backGroundColor="#191919"及びwin.opacity=1によりwinの属性値を変更する方法。
• Titanium.UI.currentTab.open(win,{animated:true});によりcurrentTabで新たなwindowを開く方法(画面遷移する方法)。
• currentWindowにUIを追加する方法
• currentWindowへ「focus」イベントを追加する方法。
• 「Titanium.API.info()」によりコンソールへ情報を出力する方法。

---

不明点：

分かる方はぜひコメントをお願いします。

• Titanium.dumpCoverage()で何をしていますか？