[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