Wednesday 1 January 2014

Table View with custom row in Titanium Alloy

1. index.xml

<Alloy>
<Window class="container">
<TableView id="table"></TableView>
</Window>

</Alloy>

2. index.tss

".container": {
backgroundImage:'/images/yellow_bg.png',
borderRadius:7
},
"#table":{
backgroundColor:'transparent',
top:70,
editable:true
}


3. tb_row.xml

<Alloy>
<TableViewRow id="tableRow">
<Label id="name"></Label>
<Label id="nickname"></Label>
</TableViewRow>
</Alloy>


4. tb_row.tss

"#tableRow" :{
height:50
},
"#name" :{
font:{
fontFamily:'Arial',
    fontSize:16,
fontWeight:'regular'
},
height:20,
//width:200,
right:15,
left:15,
top:5,
color:'#000000',
touchEnabled:false
},
"#nickname" :{
font:{
fontFamily:'Arial',
fontSize:14,
fontWeight:'regular'
},
height:'auto',
left:16,
bottom:5,
color:'#545454',
touchEnabled:false
}


5. tb_row.js

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

$.name.text=args.nameX;
$.nickname.text=args.nickName;

6. index.js

$.index.open();

var tableData = [];

var db = Ti.Database.install('/db/noteDB.sql', 'NoteDB');
db.execute('CREATE TABLE IF NOT EXISTS notes(noteId INTEGER PRIMARY KEY AUTOINCREMENT, date TEXT, note TEXT)');
var rs = db.execute('SELECT * FROM notes');
while(rs.isValidRow()){
var ntId = rs.fieldByName('noteId');
var ntDate = rs.fieldByName('date');
var ntText = rs.fieldByName('note');
Ti.API.info(ntId+' '+ntDate+' '+ntText);
var payload={
nameX:ntText,
nickName:ntDate
};
var row=Alloy.createController('tb_row',payload).getView();
row.noteid = ntId;
tableData.push(row);
rs.next();
}
$.table.setData(tableData);
db.close();