1. Code
  2. Titanium Mobile

Drilldown Navigation with Titanium


Drilldown menu systems allow the user to select a menu item, view the item's page and then either "dig" deeper, or go back up one level. A perfect example is the Settings app on iOS.

Some notes about Android

If you try building this for Android, you will notice that it doesn't work. That is because Android doesn't utilize TableViews quite in the same way that iOS does. Here is what Appcelerator employee Dan Thorpe had to say on this thread:

We are going to be looking into creating a core layer that works cross platform on all supported devices. In order to do that, it will basically have to be mostly non-UI and the UI feature will be driven by what's a capability on all platforms. For instance, blackberry doesn't provide tabs at all. That being said. If you want a no UI changes App, you'll be able to create one.

We are also going to be working on exploiting, in a non-cross platform way, platform specific features. For example Android Activities, Intents, Notifications, Services, etc. they will be in the Ti.Android namespace and if you use those features to build a best of breed Android app your users will appreciate it.

For the ideal user experience (UX) you should write to the UI metaphors of the platform the User uses and follow the UX of that platform. That works all ways. An iPhone user would be confused by a true port of an Android app. A blackberry user wouldn't even be able to use a true port of an iPhone app if they have a keyboard only device.

Titanium's strength, IMO, is a common set of tooling, a single language, and cross platform library support everywhere we can provide it.

Step 1 Create the project in Titanium

Create a new project in Titanium. The name doesn't matter. However, if you download my sample code, you can use the "Import Project" button in the toolbar to select the folder containing the tiapp.xml file, which will, as the name implies, import the project.

If we open the Resources/app.js file, we will see the default Titanium code. However, we don't want most of that code. Whittle it down to this:

Now we have a good starting point. You are probably wondering about the tab group with 1 tab. For some reason with Titanium you need to use tabs to create a drilldown menu. Let's go ahead and hit "Launch" in Titanium and see what we get.

Uh oh, that's no good. We don't want to have a big tab down there!

Step 2 Removing the visible tab bar

Fortunately this is a rather easy fix. Simply set the property 'tabBarHidden' to true for win1. While we are at it, let's rename the window. Your code should now look like this:

Ah, that's better.

Step 3 Adding the first TableView

The most important part of this app is the TableView, which will display the rows of options to the user. Let's create it now and put it in where the comment that says "our drilldown menu goes here":

Notice how we have prevented the table from being scrolled. This is sometimes desirable if you only have a few menu items.

Now that we have created the main table, let's add the rows that will "link" to the sub-TableViews:

Okay, so we did a few things in that block. First, we created a blank table row and set the 'hasChild' property to true. This make the little gray arrow show up on the right side of the row. Next, we created a label and added it to the once-blank table row. We then appended the row to the menu. Let's repeat this process 3 more times so that we now have 4 main menu options, and code that looks like this:

Your app should now look like this:

Step 4 Creating the sub-menus

Creating the sub-menus is a simple process. You create a new window and add things to it. However, the trick is in displaying this new window as part of a drilldown. I assume by now you are familiar with making windows in Titanium, so I am just providing some filler code below that integrates well with the code above:

Step 5 Making the main menu items do something

Here is where the magic happens: events. By binding a function to the 'click' event listener we can handle what happens when a row is selected in a TableView. Let's go!

Surprisingly simple, isn't it! We just go back to the "invisible" tab we have and open a new window. If you hit "Launch" for this application in Titanium, you can see that the back buttons are automagically generated for you!

Conclusion and Extension

"2-level navigation is great," you might say, "but I want 3 or 4 or 5 level navigation!" Fortunately, you can simply follow the same procedure as was just shown above! Remember, no matter how far deep you are in the navigation, you can always call and move even deeper. Titanium certainly is a fantastic, flexible tool.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.