Appcelerator Blog

The Leading Resource for All Things Mobile

Using className with TableViewRows

0 Flares 0 Flares ×

The TableViewRow has a property called className, which allows the system to optimize allocation of TableViewRow objects. Let’s look at how you would use this in an application.

For our example, we’re going to assume a simple contact management database, with names and pictures of the contacts. Some of the contacts however don’t have pictures. Our contact viewer will use a TableViewRow to display each contact, with or without a picture, depending on what’s in the database. So far so good, this all sounds very straightforward.

For each contact, we’ll set the title of the TableViewRow to be the name of the contact. In addition, for the contacts that have pictures, we’re going to add an ImageView to the TableViewRow. So we’ll end up with two kinds of TableViewRows, those with images, and those without. Here’s the code for this section of the program. In this example, we are getting the contacts from our SQLite database, so we’re iterating over the result set of contacts that will fit on the page currently displayed.

// Select one page of contacts. Let’s do the E’s (5th letter).

var contacts = db.execute(‘SELECT * FROM contacts WHERE alphaSort=?’, 5);

while (contacts.isValidRow()) {

var contactName = contacts.fieldByName(‘name’);

var picExists = contacts.fieldByName(‘hasPic’);

if (picExists == 1) {

// Get the image from the specified file

var picFilename = contacts.fieldByName(‘file’);

var picFile = Titanium.Filesystem.getFile(picFileName);

var pic =;

row = Titanium.UI.createTableViewRow({




var picView = Titanium.UI.createImageView({






// Add the pic to the TableViewRow



else {

// No pic for this contact

row = Titanium.UI.createTableViewRow({





// Add the row (with or without a pic) to the TableView



Notice the className property when we create the TableViewRow—it’s either Pic or noPic, depending on whether we’re going to add an ImageView to the TableViewRow. The system keeps track of which type of row object to allocate when it comes time to reuse them, as when you transition your display from the E’s to the F’s, for example. If you try to attach an ImageView to a row that previously didn’t have one, it can cause performance problems in your application. In this case, you may see messages like these in Titanium Developer’s console:

[WARN] looks like we have a different table cell layout than expected. Make

sure you set the 'className' property of the table row when you have

different cell layouts

[WARN] if you don't fix this, your tableview will suffer performance issues

You can see sample code similar to this in a sample iPhone application in the upcoming TableView API Reference Guide. I’ll add another blog post when this guide is available, probably early next week.

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×