Table view navigation
is this the wrong way to make a tableview with childs?
I cant figure out how to make the different pages with different content:
var win = Titanium.UI.currentWindow;
win.backgroundImage = '../images/tableview/brown_bg_482.png';
// data for tableview
var data = [
{title:'Program',backgroundImage:'../images/tableview/off_1.png',
selectedBackgroundImage:'../images/tableview/on_1.png', leftImage: '../images/tableview/phone_playmovie.png'},
{title:'Camera',backgroundImage:'../images/tableview/off_2.png',
selectedBackgroundImage:'../images/tableview/on_2.png', leftImage: '../images/tableview/phone_camera.png'},
{title:'Vibrate',backgroundImage:'../images/tableview/off_3.png',
selectedBackgroundImage:'../images/tableview/on_3.png', leftImage: '../images/tableview/phone_vibrate.png'},
{title:'Orientation',backgroundImage:'../images/tableview/off_4.png',
selectedBackgroundImage:'../images/tableview/on_4.png', leftImage: '../images/tableview/phone_orientation.png'},
{title:'Photo Gallery',backgroundImage:'../images/tableview/off_1.png',
selectedBackgroundImage:'../images/tableview/on_1.png', leftImage: '../images/tableview/phone_photogallery.png'},
{title:'Geo Location',backgroundImage:'../images/tableview/off_2.png',
selectedBackgroundImage:'../images/tableview/on_2.png', leftImage: '../images/tableview/phone_geoloc.png'},
{title:'Accelerometer',backgroundImage:'../images/tableview/off_3.png',
selectedBackgroundImage:'../images/tableview/on_3.png', leftImage: '../images/tableview/phone_accelerometer.png'},
{title:'Sound',backgroundImage:'../images/tableview/off_4.png',
selectedBackgroundImage:'../images/tableview/on_4.png', leftImage: '../images/tableview/phone_sound.png'},
{title:'Shake',backgroundImage:'../images/tableview/off_1.png',
selectedBackgroundImage:'../images/tableview/on_1.png', leftImage: '../images/tableview/phone_shake.png'},
{title:'Email Client',backgroundImage:'../images/tableview/off_2.png',
selectedBackgroundImage:'../images/tableview/on_2.png', leftImage: '../images/tableview/phone_email.png'},
{title:'Save to Gallery',backgroundImage:'../images/tableview/off_3.png',
selectedBackgroundImage:'../images/tableview/on_3.png', leftImage: '../images/tableview/phone_savetogallery.png'},
{title:'Contacts',backgroundImage:'../images/tableview/off_4.png',
selectedBackgroundImage:'../images/tableview/on_4.png', leftImage: '../images/tableview/phone_contact.png'}
];
// tableview object
var tableView = Titanium.UI.createTableView({
width:300,
backgroundColor:'transparent',
data:data,
rowHeight:80,
separatorStyle:Ti.UI.iPhone.TableViewSeparatorStyle.NONE,
top:10,
style: Titanium.UI.iPhone.TableViewStyle.GROUPED
});
tableView.addEventListener('click', function(e)
{
var win = Titanium.UI.createWindow({
title:e.rowData.title
});
if (e.index == 1) {
var program = Titanium.UI.createView();
backgroundColor:'white'
}
Titanium.UI.currentTab.open(win,{animated:true});
});
win.add(tableView);
1 Answer
-
Accepted Answer
Dennis
A good example of this is the KitchenSink main menu system, which is created using tables. Take a look at base_ui.js.
It simply creates a new window from the custom
test
property of the row, which contains a URL to the next menu, or one of the demo screens. For example:url:e.rowData.test
Hope this helps