[Titanium] Using TableView – open new window – passing data

With this simple tutorial i will show you how to load data from array, display content in TableView, and open a new window with some corresponding data(ex. product details).

Lets start with blank project and new window.

var win = Titanium.UI.createWindow({
 backgroundColor:'#999999'
});

Create array with some data. I saved array in Titanium properties, just to make it global.

Titanium.API.myData = [
		{title:'Banana', details:'fruit', hasChild:true},
		{title:'Apple', details:'green fruit', hasChild:true}
]

Next thing what we will add is TableView, with few parameters

var table = Ti.UI.createTableView({
	width: '90%',
	height:'85%',
	top:5,
  	data: Titanium.API.myData
});

Width – 90% of screen, height – 85% of screen. Padding from top – 5. And passing our array myData to Tableview property data

This will add event listener to tableview.

table.addEventListener('click', function(e){
    var detailWin= Titanium.UI.createWindow({
    	url:'details.js',
    	backgroundColor:'#dddddd',
    	newData: e.index,
        layout:'vertical'
    });
    detailWin.open();
});

This will add action to create a new window. In details.js will be code for new window. newData is variable, which contains index of selected item in tableview. in this case it’s perfect because index for array and table objects are the same.

Don’t forget to add this at the end of code

win.add(table);
win.open();

details.js code

var win = Titanium.UI.currentWindow;

var img = Titanium.UI.createImageView({
	image:Titanium.API.myData[win.newData].image,
	width:'auto',
	height:'auto'

});

var details = Titanium.UI.createLabel({
	text: Titanium.API.myData[win.newData].details

});

var closeButton = Titanium.UI.createButton({
	title:'Back',
	height:'auto',
	width:'auto'
});
closeButton.addEventListener('click',function(e)
{
	win.close();
});

win.add(details);
win.add(img);
win.add(closeButton);

Code is self explaining. Label, image, and button. All data is from global array. Getting data from previous windows with win.newData

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s