Basic Alloy : Dynamic TableView Handling + Open Window

detailwin.js

var args = arguments[0] || {};

$.rowId.text=args.rowId;
$.itemName.text=args.itemName;

function closeme(){
	$.win.close();
}

detailwin.tss

".container": {
	backgroundColor: "yellow",
	layout:"vertical"
},
"#itemName":{
	height: Ti.UI.SIZE,
	left: 0
},
"#rowId":{
	height: Ti.UI.SIZE,
	left: 0
},
"#closebtn":{
	height: Ti.UI.SIZE,
	width: Ti.UI.SIZE
}

detailwin.xml

<Alloy>
	<Window id="win" class="container">
		<Label id="itemName"></Label>
		<Label id="rowId"></Label>
		<Button id="closebtn" onClick="closeme">Close Me</Button>
	</Window>
</Alloy>

index.js

function showItems(e) {  
    Ti.API.info(e.rowData.itemName);
    var payload={
    	rowId:e.rowData.rowId,
		itemName:e.rowData.itemName
    }
    var w=Alloy.createController('detailwin',payload).getView();
    w.open();
}

var rowData=[];
for(var i=1;i<=10;i++){
	var payload={
		rowId:i,
		itemName:'Test' + i
	}
	var row=Alloy.createController('row',payload).getView();
	rowData.push(row);
}
$.itemsList.data=rowData;


$.win.open();

index.tss

"#container": {
	backgroundColor:"white"
}

index.xml

<Alloy>
	<Window id="win">
		<TableView id="itemsList" onClick="showItems">
		</TableView>
	</Window>
</Alloy>

row.js

var args = arguments[0] || {};

$.row.rowId=args.rowId;
$.row.itemName=args.itemName;
$.itemName.text=args.itemName;

row.tss

"#row":{
	height: "40dp",
	hasChild: true
},
"#itemName": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000",
	left: 0
}

row.xml

<Alloy>
	<TableViewRow id="row" rowId="1" itemName="Test1">
		<Label id="itemName">Test 1</Label>
	</TableViewRow>
</Alloy>

Thanks ! Need this in the official documentation