Note: This post mentions an iOS app called MLP Symbol ID. I discontinued my Apple Developer subscription, so MLP Symbol ID is not available in the App Store anymore.

Alternative Titanium Logo

Backstory

About three years ago, I created an iPhone application for my wife called MLP Symbol ID (as in My Little Ponies, oh my!) using Apple’s Xcode. We read suggestions and planned updates, but other projects prevented me from coding these new features for years. Finally I found some time and decided to give Appcelerator’s TitaniumStudio a try. My familiarity with Javascript and my desire to release the app in the Google Play store made TitaniumStudio a very attractive option.

I began version two about a year ago, and you know how they say that the last 20% takes 80% of the time? Ha! Well here I am a year later with a feature complete app and absurdly sluggish tables. I’ve tested the database connection and that’s not the problem. The images displayed in my table are smaller than quarks. So after some reading, I’ve decided to convert my TableViews to ListViews and then confess my failures in a blog entry about it. ;)

Overview

The documentation for ListViews (in print format for easier reading) says the following:

ListView is designed as a replacement for TableView as a way to display data in a scrollable list. Both list view and table view present data to a user as a vertically scrolling list of rows. However, ListView is designed to perform better with a large number of rows.

So ListViews have got to be the solution, right? Hopefully!

Before: Table Views

Check out this code for creating a TableView and loading it with sections of data:


var mainTableView,
sections = [
	Titanium.UI.createTableViewSection({ headerTitle:"Section One" }),
	Titanium.UI.createTableViewSection({ headerTitle:"Section Two" })
];
for ( /* data source items */) {
	var mySectionIndex = ...;
	sections[mySectionIndex].add(Titanium.UI.createTableViewRow({
		"title": [row-text-here],
		"whateveryouwant": [some-other-data-if-you-want],
		"whateveryouwant2": [some-other-data-if-you-want]
	}));
}
mainTable = Titanium.UI.createTableView({ "style": Titanium.UI.iPhone.TableViewStyle.PLAIN });
mainTable.setData(sections);

Notice how the sections are created first, then the data is added row-by-row to the sections using TableViewSection.add(). Afterward, the sections are added to the TableView and voilà.

ListViews

Other articles around the web say things like, “ListViews require a whole new way of thinking” or “it was very difficult for us to make the switch to ListViews.” Aside: I realize that I have not provided sources. That is because these aren’t direct quotes. Yes, I am very sorry, boohoo :’( Cue the tiniest violin in the world. Back on topic, I’m really not sure what those authors are smoking. I mean, just check this out:


var mainListView,
sections = [],
sectionConfig = [
	{ "headerTitle": "Section 1", "items": [] },
	{ "headerTitle": "Section 2", "items": [] }
],
for ( /* data source items */) {
	var mySectionIndex = ...;
	sectionConfig[mySectionIndex].push({
		"properties": {
			"title": [row-text-here],
			"whateveryouwant": [some-other-data-if-you-want],
			"whateveryouwant2": [some-other-data-if-you-want]
		}
	});
}
for (var i = 0; i < sectionConfig.length; i++) {
	sections.push(Titanium.UI.createListSection(sectionConfig[i]));
}
mainListView = Ti.UI.createListView({ "sections": sections });

Aside from the following differences, it was pretty much the same:

  • ListView items are generic Javascript objects rather than instances of a row class.
  • I added these items the a ListSection in one go rather than one-by-one. This may not be required even! ListSection.appendItems() is like TableViewSection.add(), but appendItems() seemed like a post-render method to me when I read the documentation. So this is probably up to you, and perhaps we could cross this item out?

Yeah that’s it for this fairly trivial table. For more complex lists, you would create templates for your ListView and specify the appropriate template with each list item. Please consult the official ListView documentation for information about templates.

Anyway things seem a lot snappier now, thanks to ListView! Perhaps I’ll even release this MLP Symbol ID update this year?

The More You Know
The More You Know