[TIMOB-226] Custom Table View

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2011-04-17T01:52:25.000+0000
Affected Version/s	n/a
Fix Version/s	Release 0.8.0
Components	iOS
Labels	feature, ios, iphone
Reporter	Nolan Wright
Assignee	Blain Hamon
Created	2011-04-15T02:25:43.000+0000
Updated	2011-04-17T01:52:25.000+0000

Description

Support custom layouts for native table views using templates


//
// create template
// three types are supported: image, text, button
//
var template = {
 selectedBackgroundColor:'blue', 
 selectedBackgroundImage:'foo.png', 
 selectedColor:'white', 
 height:'auto'  // this allows for rows to auto expand
 layout:[
   {type:'image', left:0, top:0, width:30, height:40},
   {type:'text', fontSize:20, fontWeight:'bold', left:30, top:10, width:100},
   {type:'text', fontSize:13, left:30, top:30, width:150, height:'auto', color:'#336699'},
   {type:'button', text:'Delete', backgroundColor:'red', color:'white'}

]};

//
//  table data
//
var data = [
  {
    selectedRowColor:'red',
    height:20,
    data:[{image:'foo.png'}, {title:'My Title'}, {title:'My detail text'}, {title:'delete'}]
  },
  {
    selectedBackgroundImage:'bar.png',
    data:[{image:'foo.png'}, {title:'My Title2', fontSize:30}, {title:'My detail text2'}, {title:'delete'}]
  }

];
//
// create table view (
//
var tableView = Titanium.UI.createTableView({template:template, data:data, function(e)
{
   // e.layout (template object that was clicked)
   // e should contain all other normal table view row click data

});

Comments

Blain Hamon 2011-04-15

I'm really uncertain about the usage of 'auto', because it could be very expensive. It would require, on first displaying the table view, effectively rendering all cells, visible or not, in order to determine the row heights.

Furthermore, this happens before the tableView is given an actual size, I'm not sure I'll have correct widths beforehand.

Additionally, the array of dictionaries is a lot of dereferencing and feels inelegant. I'd want template and the actual data cell to be identical in structure.

since rowHeight is used in table and picker columns, it should be consistent and be used in template and data.

I also am not sure about the button type, because it presents some complexities as it's reinventing widgets that are already available.

   var template = {
    backgroundColor:'white',
    selectedBackgroundColor:'blue', 
    selectedBackgroundImage:'foo.png', 
    selectedColor:'white',
    rowHeight:40,
    layout:[
      {type:'image', left:0, top:0, width:30, height:40, name:'image'},
      {type:'text', fontSize:20, fontWeight:'bold', left:30, top:10, width:100, name:'title'},
      {type:'text', fontSize:13, left:30, top:30, width:150, height:'auto', color:'#336699', name:'detailText'},
   ]};
   
   //
   //  table data
   //
   var data = [{
       selectedBackgroundColor:'red',
       rowHeight:20,
       image:'foo.png',
       title:'My Title',
       detailText:'My detail text'
     },{
       selectedBackgroundImage:'bar.png',
       image:'foo.png',
       title:'My Title2',
       detailText:'My detail text2'
       layout:[
          {type:'image', left:0, top:0, width:30, height:40, name:'image'},
          {type:'text', fontSize:30, fontWeight:'bold', left:30, top:10, width:100, name:'title'},
          {type:'text', fontSize:13, left:30, top:30, width:150, height:'auto', color:'#336699', name:'detailText'},
     ]}
   ];
   //
   // create table view (
   //
   var tableView = Titanium.UI.createTableView({template:template, data:data, function(e){
      e.index //Total row index, counting all rows in all sections above it.
      e.section //section index, the number of sections that precede the section of this row.
      e.row //Row index, the number of rows in this section that precede this row.
      e.detail //Boolean, indicates that, if hasDetail was true, and the user pressed it
      e.rowData // The actual contents of the data representing the row that was pressed.
      e.layoutName //The 'name' of the field touched.
   });

In this, data becomes a free-form object, where non-keyword values are used by layout to fill in the appropriate property. It also allows individual cells (Or possibly sections) to completely override the template layout.

JSON Source