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();
var win = Titanium.UI.createWindow({
title:"Tours",
backgroundColor:"#FFFFFF",
navBarHidden:false, //Hide the nav bar for the window
tabBarHidden:false //Hide the tab bar for the window
});
var tab = Titanium.UI.createTab({
icon:"KS_nav_views.png",
title:"Tours",
window:win
});
var win2 = Titanium.UI.createWindow({
title:"Specials",
backgroundColor:"#FFFFFF",
navBarHidden:false, //Hide the nav bar for the window
tabBarHidden:false, //Hide the tab bar for the window
url:"specials.js"//Load the window from an external .js file
});
var tab2 = Titanium.UI.createTab({
icon:"KS_nav_views.png",
title:"Specials",
window:win2
});
var data = [
{title:"Backpack Cal", leftImage:"images/01-backpack-cal-thumb.png", className:"tableRow"},
{title:"California Calm", leftImage:"images/02-calm-cal-thumb.png", className:"tableRow"},
{title:"California Hotsprings", leftImage:"images/03-hotsprings-cal-thumb.png", className:"tableRow"},
{title:"Cycle California", leftImage:"images/04-cycle-cal-thumb.png", className:"tableRow"},
{title:"From Desert to Sea", leftImage:"images/05-desert-cal-thumb.png", className:"tableRow"},
{title:"Kids California", leftImage:"images/06-kids-cal-thumb.png", className:"tableRow"},
{title:"Nature Watch", leftImage:"images/07-nature-watch-cal-thumb.png", className:"tableRow"},
{title:"Snowboard Cali", leftImage:"images/08-snowboard-cal-thumb.png", className:"tableRow"},
{title:"Taste of California", leftImage:"images/09-taste-cal-thumb.png", className:"tableRow"}
]
var rowData = []; //An array that will hold our row objects created by createTableViewRow
for(var i = 0; i < data.length; i++){
//Create the row
var row = Titanium.UI.createTableViewRow({
title:data[i].title, //Text to appear in the row (e.g. "This is row 1")
leftImage:data[i].leftImage, //Image to appear to the right of the title
className:data[i].className, //A name for this row template (use this property for rows that have similar structures (but not necessarily similar data))
hasChild:true, //Renders an arrow on the right
searchFilter:data[i].title
});
//3. Store the created TableViewRows in a new array
rowData.push(row);
}
var searchBar = Titanium.UI.createSearchBar({
showCancel:true,
hintText:"搜索"
});
var tableView = Titanium.UI.createTableView({
//4. Set the new array as the data source for our TableView
data:rowData,
search:searchBar,
filterAttribute:"searchFilter"
});
tableView.addEventListener("click", function(e){
//Create and open a new window
var w = Titanium.UI.createWindow({
title:e.rowData.title,
backgroundColor:"#FFFFFF"
});
var label = Titanium.UI.createLabel({
text:"This is a new window",
height:"auto",
width:"auto"
})
w.add(label);
//Slide-open the window
tab.open(w,{animated:true});
});
win.add(tableView);
tabGroup.addTab(tab);
tabGroup.addTab(tab2);
// open tab group
tabGroup.open();
specials.js
//Create a pointer to the current window context
var win = Titanium.UI.currentWindow;
var data = [
{img:"images/spa.png",title:"Day Spa Package",amount:250},
{img:"images/desert-sea.png", title:"2 Day Salton Sea", amount:350},
{img:"images/backpack.png", title: "Big Sur Retreat", amount:620}
]
var rowData = [];
for(var i = 0; i < data.length; i++){
var img = Titanium.UI.createImageView({
image:data[i].img,
height:180,
width:320
});
var bgBar = Titanium.UI.createView({
height:36,
width:"100%",
bottom:0,
left:0,
backgroundColor:"#000",
opacity:0.6
})
var title = Titanium.UI.createLabel({
text:data[i].title,
height:36,
width:"75%",
bottom:0,
left:0,
color:"#FFFFFF",
textAlign:"left"
});
var amount = Titanium.UI.createLabel({
text:"$" + data[i].amount,
height:36,
width:"25%",
bottom:0,
right:0,
color:"#FFFFFF",
textAlign:"right"
});
//Create the row
var row = Titanium.UI.createTableViewRow({
height:"auto",
searchFilter:data[i].title
});
//Add the views to the row
row.add(img);
row.add(bgBar);
row.add(title);
row.add(amount);
rowData.push(row);
}
var searchBar = Titanium.UI.createSearchBar({
showCancel :true,
hintText:"搜索"
});
var tableView = Titanium.UI.createTableView({
data:rowData,
search:searchBar,
filterAttribute:"searchFilter"
});
tableView.addEventListener("click", function(e){
alert(e.source);
});
win.add(tableView);