Youtube App

// 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
});

var table = Ti.UI.createTableView({
  top:40
});
win1.add(table);

var searchBar = Titanium.UI.createSearchBar({
	width:320,
	height:40,
	top:0,
	hintText:'search'
});
win1.add(searchBar);


searchBar.addEventListener('return', function(e){          //return是指手機的返回事件
	searchBar.blur();                                  //searchBar會被隱藏起來
	
	var url = 'http://gdata.youtube.com/feeds/api/videos?q=' + e.value + '&alt=json&max-results=20';     
	//上面一行 : 使用youtube API 進行搜尋
	
	var xhr = Ti.Network.createHTTPClient({
		timeout : 10000
	});
	
	xhr.onload = function(e) {
		var result = JSON.parse(this.responseText);
	
		var data = [];
		
		for(var i in result.feed.entry){
			var row = Ti.UI.createTableViewRow({                          //這裡是在onload底下建TableViewRow
				height:100,
				youtube_url:result.feed.entry[i].link[0].href,
				youtube_title:result.feed.entry[i].title.$t
			});
			
			var thumb = Ti.UI.createImageView({
				image:result.feed.entry[i].media$group.media$thumbnail[1].url,
				width:120,
				height:90,
				top:5,
				left:5
			});
			row.add(thumb);
			
			var title = Ti.UI.createLabel({
				text:result.feed.entry[i].title.$t,
				width:180,
				height:40,
				left:130
			});
			row.add(title);
			
			data.push(row);	
		}
		table.setData(data);
	}
	
	xhr.onerror = function(e) {
		Ti.API.info('Error: ' + e.message);
	}
	xhr.open('GET', url);
	xhr.send();
});

table.addEventListener('click', function(e){
	var newWin = Ti.UI.createWindow({
		title:e.rowData.youtube_title
	});
	
	var web = Ti.UI.createWebView({
		url:e.rowData.youtube_url
	});
	newWin.add(web);
	
	tabGroup.activeTab.open(newWin);
});


//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});

var label2 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 2',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	width:'auto'
});

win2.add(label2);


//
//  add tabs
//
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  


// open tab group
tabGroup.open();