Titanium Appcelerator - Tables and Pickers:

Believe it or not, the table is the most used UI element in the iPhone SDK. If y
ou play a little with the applications that come with your iDevice you will see th
at almost all the native apps have tables. Sometimes they are so well designed a
nd the appearance so changed that you dont even think of them as tables. But in t
ime, while you will learn more, you will be able to spot it and a lot of ideas w
ill come to you :). Also I think that that the pickers are some sort of undercove
r tables so thats why Ill present both in the same tutorial.
The Table element
The table element is created using Titanium.UI.createTableView function. This fu
nction accepts an object as argument like we are used to with the different sett
ings we might want to give to the table. Besides the usual properties ( like top
, left, etc) we have a very important one named data.
The Data property
The data property will hold the rows of the table as an array. The below code wi
ll show you what Im talking about:
var win1 = Titanium.UI.createWindow({
backgroundColor:"#fff"
});
var table1 = Titanium.UI.createTableView({
data:[
{title:"Row 1 - simple row"},
{title:"Row 2 - with child", hasChild:true},
{title:"Row 3 - with detail", hasDetail:true},
{title:"Row 4 - with check", hasCheck:true},
{title:"Row 5 - red background", backgroundColor:"#f00"}
]
});
win1.add(table1);
win1.open();
So, what are we doing here?
We create a window. As we said in day 1, the application needs to have at least
one window. Into this window we add table1 with the rows set as above.
This is the simplest way to do it, with the properties of the rows set as the Ti
tanium.UI.TableViewRows documentation page specifies.
A very important thing to know about tables
The rows into tables are rendered on request, so lets say you have 20 rows its clear
that visible will be only a few (10 on a standard height). To save memory and t
o speed up the application the other rows will be rendered when the user scrolls
the table. To do this faster the OS of the device creates some sort of template
for each layout of the rows and reuse it changing only whats different. To take
advantage of this you MUST set a className attribute for the rows that share the
same layout ( I didnt do it above to simplify the code).
It is important mainly because for a few rows the memory usage is not too high,
but for many rows depending on how many and whats inside the row the app will mov
e slow or even crash. The className can be any string you like:

{title:"Row 1 - simple row", className:"layout_one"}

More about tables
Each table has at least one section and each table can be plain (as above) or gr
ouped. Lets create a grouped table:
var table1 = Titanium.UI.createTableView({
style:Titanium.UI.iPhone.TableViewStyle.GROUPED
});
var section1 = Titanium.UI.createTableViewSection();
section1.headerTitle = "Hello";
var row1 = Titanium.UI.createTableViewRow({title:"Hello 1"});
var row2 = Titanium.UI.createTableViewRow({title:"Hello 2"});
section1.add(row1);
section1.add(row2);
var section2 = Titanium.UI.createTableViewSection();
section2.headerTitle = "Hello2";
var row3 = Titanium.UI.createTableViewRow({title:"Hello 3"});
var row4 = Titanium.UI.createTableViewRow({title:"Hello 4"});
section2.add(row3);
section2.add(row4);
table1.setData([section1,section2]);
method setData() to set the content of the table after it is created.
This method accepts any array of sections created with Titanium.UI.createTableVi
ewSection , rows created with Titanium.UI.createTableViewRow or objects that des
cribe the rows as in the first example.
Custom tables
All the above examples show you how to create simple tables. If you want to crea
te a more complicated layout you will need to create custom rows for this and Th
e Custom Rows tutorial explains how to do it..
The Pickers or PickerViews
The pickers are the equivalent of the select tag in html. The only difference is
that you can create a multicolumn picker (which in HTML its not possible without
using some tricks). The function that creates a picker is Titanium.UI.createPic
ker
A simple picker its created with the following code:
var picker = Titanium.UI.createPicker();
var data = [];
data.push(Titanium.UI.createPickerRow({title:
data.push(Titanium.UI.createPickerRow({title:
data.push(Titanium.UI.createPickerRow({title:
data.push(Titanium.UI.createPickerRow({title:
picker.add(data);

Bananas }));
Strawberries }));
Mangos }));
Grapes }));

The type property of the picker lets you chose form the next predefined types bu
t you always can create your own multicolumn picker.
Titanium.UI.PICKER_TYPE_PLAIN (default),

Titanium.UI.PICKER_TYPE_DATE_AND_TIME,
Titanium.UI.PICKER_TYPE_DATE,
Titanium.UI.PICKER_TYPE_TIME or
Titanium.UI.PICKER_TYPE_COUNT_DOWN_TIMER.
var picker = Titanium.UI.createPicker({
type:Titanium.UI.PICKER_TYPE_DATE_AND_TIME
});
Since the tables and the rows are similar you will be able to create your custom
rows in the same way as for the tables using of course the specific functions f
or the picker (linked at the end of the tutorial).
I wont go further as the post is big enough already but Ill try in the future to c
reate a set of posts that will be specific to an UI element and where Ill try to d
issect it as much as possible.