Titanium Master Detail Pass Data from TableView Row Example

app.tss

/*

This is your global styles file. Selectors and rules you define
here will be applied throughout your app. However, these rules
have the lowest priority of any style settings.

For more information, see the "Style Priorities" section of
http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Styles_and_Themes

For example, the following would apply to all labels, windows,
and text fields (depending on platform) in your app unless you
overrode the settings with other TSS, XML, or JS settings:

'Label[platform=android,windows]': {
	color: '#000' // all platforms except Android and Windows default to black
}

'Window': {
	backgroundColor: '#fff' // white background instead of default transparent or black
}

'TextField[platform=android]': {
	height: Ti.UI.SIZE
}

*/

'Window': {
	backgroundColor: '#fff'
}

'Window[platform=android]': {
	windowSoftInputMode: Titanium.UI.Android.SOFT_INPUT_STATE_HIDDEN
}

'Label': {
	color: "black"
}

'TextField': {
	height: 44,
	width: "80%",
	borderColor: "gray",
	leftButtonPadding: 10,
	color: "black"
}

'TableViewRow': {
	height: 44,
	hasChild: true
}

detail.js

// var args = $.args;
var args = arguments[0] || {};

Ti.API.debug("detail open, args = "+JSON.stringify(args));

$.detailWin.title = args.name;
$.numberLbl.text = args.number;

detail.tss

".container" : {
  
}

detail.xml

<Alloy>
	<Window id="detailWin" title="Detail" layout="vertical">
		<Label id=numberLbl />
	</Window>
</Alloy>

index.js

if(OS_IOS) {
	$.navWin.open();
	Alloy.Globals.rootWin = $.navWin;	
}

index.tss

".container": {
	backgroundColor:"white"
}

"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
}

"#label": {
	font: {
		fontSize: 12
	}
}

index.xml

<Alloy>
	
    <NavigationWindow id="navWin" platform="ios">
        <Require src="master" id="masterCtrl" />
    </NavigationWindow>
    
    <Require src="master" id="masterCtrl" platform="android" />
     
</Alloy>

master.js

function fillTable() {
	Ti.API.debug("fillTable()");
	
	var rows = [];
	
	for(var i=0;i<10;i++) {
		rows.push(Alloy.createController('row', {
			name: 'Row '+(i+1),
			number: (i+1)*1000
		}).getView());
	}
	
	$.tableTV.setData(rows);
}

$.tableTV.addEventListener('click', function(e){
	Ti.API.debug("$.placesTV.addEventListener()");
	
	Ti.API.debug("e.row = "+JSON.stringify(e.row));
	
	var detailWin = Alloy.createController('detail', e.row).getView();
    if(OS_IOS) {
    	Alloy.Globals.rootWin.openWindow(detailWin);
    } else if(OS_ANDROID) {
    	detailWin.open();
    	detailWin.addEventListener('open',function(evt){
			var activity=detailWin.activity;
			activity.actionBar.displayHomeAsUp=true;
			activity.actionBar.setHomeButtonEnabled(false);
			activity.actionBar.onHomeIconItemSelected=function(){
				evt.source.close();
			};
		});
    }
	
});

if(OS_ANDROID) {
	$.master.open();	
}

fillTable();

master.tss

".container" : {
  
}

master.xml

<Alloy>
	<Window class="container" layout="vertical" title="Master">
		<TableView id="tableTV" />
	</Window>
</Alloy>

row.js

// Arguments passed into this controller can be accessed via the `$.args` object directly or:
var args = $.args;

$.nameLbl.text = args.name;
$.row.name = args.name;
$.row.number = args.number;

row.tss

".container" : {
  
}

row.xml

<Alloy>
	<TableViewRow class="rowTVR">
		<Label id="nameLbl" left="10"/>
	</TableViewRow>
</Alloy>