Different ways Titanium can do the same thing

Gold triangle pattern background, 3d rendering

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.

1 COMMENT

  1. Which of these patterns is the most performant?

    eg. if you were loading a lot of data from a database, would appending each row individually be more taxing than creating an array of rows and using setData()?

    What about replacing data in the table? Is it better to replace all the data or attempt to modify the rows in situ?

    • That’s a very good question.

      Sort of depends on a number of factors and probably deserves a follow up post.

      Calling setData might be faster for reloading large data (or small ones). however, if you have stupid large data sets (things like humans can’t scan through that devs seem to love to attempt to load), then it’s better to load N number of them (say 10-15) and then have a load more… or event dynamic loading in the background … approach.

      Also, your animation properties could be tweaked depending on some of the same. If you don’t animate to reload, it might appear faster in some cases. however, you might want to consider animation on the reload of the first N number of visible rows but don’t animation appending the non-visible rows..

      Hopefully that’s helpful. Unfortunately, like a lot of things in development, it’s more of an art than a science.