This article illustrates how Titanium often provides several different ways to accomplish the same result. The first examples involve a TableViewRow object’s properties, and the second shows different ways that rows can be added to a TableView. The choice among these different techniques depends on what your application does, and how it’s structured. Comparing these patterns will help you understand more about Titanium.

Most objects in Titanium have properties that change the behavior of the object in various ways. There are many properties associated with the TableView object, and the related TableViewRow and TableView Section objects. For example, some of these properties are the title, color, and opacity — and there are different ways to set these values.

In these examples, we’ll use the title and color properties of a TableViewRow. The first example of setting properties is to include them in a dictionary object when you create the TableViewRow, like this:

var myRow = Titanium.UI.createTableViewRow(
                          {title:'Carrot juice', color:'#FF6600'});

This code creates a TableViewRow object, specifying the string ‘Carrot juice’ as the initial value for the title, and sets the color to a shade of orange.

Now let’s create the TableViewRow as before, but we’ll set the properties after the object has been created:

var myRow = Titanium.UI.createTableViewRow({});
myRow.title = 'Carrot juice';
myRow.color = '#FF6600';

This example does exactly the same thing as the first one. The only difference in the second example is that the TableViewRow object is created first, and then the values for the title and color properties are added later. You can use this technique to change the properties of an existing object, perhaps in response to some user-generated event, like this:

myTableView.addEventListener('click', function(e) {
    if (e.index == maxRow) {
        lastTableViewRow.color = '#3399CC';
    }
});

This event listener checks to see if there was a click on a row; if there was, it changes that row’s color if it is the last row.

Now let’s look at how we might create a TableView object that has several rows. Again, Titanium offers different ways to accomplish the same thing. For our first example we’ll create a TableView with 4 rows, using an array that we’ll pass to the createTableView method:

var myData = [{title:'Coffee'}, {title:'Tea'},
                             {title:'Juice'}, {title:'Ice water'}];
var myTableView = Titanium.UI.createTableView({data:myData});

Notice that during the createTableView method, the data property is set to the array of data that we created. Titanium uses the data in that array to build the TableViewObject and its rows, one row for each element in the array. But you can also append a row to an existing TableView object using the appendRow method, like this:

var myRow = Titanium.UI.createTableViewRow({title:'Hot chocolate'});
myTableView.appendRow(myRow);

You can use this approach to programmatically create a TableView row by row. This could be handy, for example, if you were taking the row titles from a database.

Another approach is to use a TableView’s setData method if you want to completely replace the TableView data. You call setData like this:

// Create 2 sections, and add a row to each
var hotTableViewSection =
        Titanium.UI.createTableViewSection({headerTitle:'Hot beverages'});
hotTableViewSection.add(Titanium.UI.createTableViewRow({title:'Coffee'}));
var coldTableViewSection =
        Titanium.UI.createTableViewSection({headerTitle:'Cold beverages'});
coldTableViewSection.add(Titanium.UI.createTableViewRow({title:'Juice'}));
 
// Create the TableView and then use setData
// to apply the new data to it, resulting in the 2 sections
var myTableView = Titanium.UI.createTableView();
myTableView.setData([hotTableViewSection, coldTableViewSection]);

Whichever approach you use, you’ll end up creating a TableView and its rows. Choose the pattern that works best for your application.

You can find more comprehensive documentation in the API Reference Guides for Titanium.UI.TableView and Titanium.Database, along with more complete sample code.