day2

Seven days with Titanium – day 2 – tables and pickers

Welcome to day 2 with Titanium – Tables and pickers. A short reminder of what we’ve done till now:

Believe it or not, the table is the most used UI element in the iPhone SDK. If you play a little with the applications that come with your “iDevice” you will see that almost all the native apps have tables. Sometimes they are so well designed and the appearance so changed that you don’t even think of them as tables. But in time, while you will learn more, you will be able to spot it and a lot of ideas will come to you :). Also I think that that the pickers are some sort of “undercover tables” so that’s why I’ll present both in the same tutorial.

The Table element

The table element is created using Titanium.UI.createTableView function. This function accepts an object as argument like we are used to – with the different settings 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 will show you what I’m 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 Titanium.UI.TableViewRows documentation page specifies.

If you develop cross-platform you’ll need to take in account that each platform will show the data in it’s way (and some specific things may be missing). Below are 2 screenshots on how the above code looks on iPhone and Android.

Simple table with Titanium on iPhoneSimple table with Titanium on Android

A very important thing to know about tables

The rows into tables are rendered “on request”, so let’s say you have 20 rows – it’s clear that visible will be only a few (10 on a standard height). To save memory and to 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 what’s different. To take advantage of this you MUST set a className attribute for the rows that share the same layout ( I didn’t 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 what’s inside the row – the app will move 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 grouped. Let’s 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]);

And the result

Grouped table with Titanium on IphoneGrouped table with Titanium on Android

As you see I used the method setData() to set the content of the table after it is created.

This method accepts any array of sections created with Titanium.UI.createTableViewSection , rows created with Titanium.UI.createTableViewRow or objects that describe the rows as in the first example.

Custom tables

All the above examples show you how to create simple tables. If you want to create a more complicated layout you will need to create custom rows for this and The 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 it’s not possible without using some tricks). The function that creates a picker is Titanium.UI.createPicker

A simple picker it’s created with the following code:

var picker = Titanium.UI.createPicker();
var data = [];
data.push(Titanium.UI.createPickerRow({title:'Bananas'}));
data.push(Titanium.UI.createPickerRow({title:'Strawberries'}));
data.push(Titanium.UI.createPickerRow({title:'Mangos'}));
data.push(Titanium.UI.createPickerRow({title:'Grapes'}));
picker.add(data);

Sadly for now it is implemented only on the Apple platform (please correct me if I’m wrong) so here it is how it should look like:
Picker with Titanium

The type property of the picker lets you chose form the next predefined types but 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
});

Date and time picker

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 for the picker (linked at the end of the tutorial).

I won’t go further as the post is big enough already but I’ll try in the future to create a set of posts that will be specific to an UI element and where I’ll try to “dissect” it as much as possible.

More resources

Here are some links to follow for more information:

As always, thank you for reading this and I’m waiting for your questions and suggestions. If you have your own tutorials or links I’ll be glad to add them here to improve the quality of the posts.

See you on day 3.

Check the Spanish version of this post:
Siete días con Titanium – día 2 – tablas y selectores

12 thoughts on “Seven days with Titanium – day 2 – tables and pickers”

  1. I would absolutely love for someone to share some lack-of-Android-picker workarounds… it’s a HUGE strike against to not have anything equivalent

Comments are closed.