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:

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:

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:

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 tab1.open() and move even deeper. Titanium certainly is a fantastic, flexible tool.