Complex Navigation in Titanium, Part 1

The ability to move from one window to the next in the same screen (we’re talking no tabs here) should be an easy thing to do in a Titanium mobile app. That type of navigation should be done pretty easily, like standard operating procedure, right? The short answer is no.

Part of the problem is that the currently accepted programming paradigm for Titanium is to use the CommonJS pattern. In the past, if you wanted to create a stack of windows, one easy but now frowned upon, way of doing it is to create a bunch of windows, and set the url attribute for each window to the JavaScript file that will implement that window.

For example:
var win = Ti.UI.createWindow({
url: ‘fileToImplementThisWindow.js”

This was bad, because the url thing created a bunch of new execution contexts. With the CommonJS pattern, you try to keep everything in one execution context. But how can you do that, be able to create a bunch of windows, and without using the “url thing”? This brings up the second problem.

Titanium is still evolving, which means that older versions of Titanium code may not compile with the current SDK. What’s a Titanium mobile developer to do? Well, old code can still be useful, if you know how to take the code you need and port it to the new SDK. Which is exactly what I did here…

Kevin Whinnery from Appcelerator wrote the NavigationController demo originally, but it only worked for older versions of the mobile SDK. Then Matthew Lanham improved it, but now that version doesn’t compile with the current, Titanium Mobile 2.0 version. So now, I’ve combined both of their versions and cleaned it up. My version uses the CommonJS pattern, runs in a single execution context (no ‘url thing’ here!), and is compatible with Titanium Mobile 2.0 SDK, Google Android 2.3.3, and iPhone 5.1. But better get it quick, while it’s still hot and fresh, and before major changes take place to the Titanium Mobile SDK again! 🙂

Sunfish Empire’s NavigationController github repo

Videos of the mobile app in action here:

To access the code, go to the github repo link above, download as a zip file or “Clone in Mac”. Then, if it’s downloaded as a zip file on your machine, unzip it, and import it as a project in Titanium Studio. Another way to get the code is to create a default mobile project in Titanium Studio, and then just copy the entire Resources folder of the NavigationController app right over the default Resources folder. Make sure your tiapp.xml points to the right SDKs and their versions. Hope you find this code useful. Enjoy!


8 thoughts on “Complex Navigation in Titanium, Part 1

  1. Thanks, this post is very useful.

    I am trying to run this controller on iPhone SDK 5.1 using the Titanium 2.1 and the code crashes when I try to open more than 3 windows and press the home button. Please suggest if you see any issues with the code.

    • I am experiencing the same issue. It crashes when opening many windows and then pressing home button.

      • I originally used Kevins version, modified it and based whole application on it. Now it crashes all the time and I don’t know how to fix it. I did some debugging and seems when home button is pressed the windows get removed from stack but they don’t actually close (the close event handler never gets called)

      • Hello Praveen and Mike,

        I’ve had to revise my earlier comment after testing out the Navigation Controller on Titanium Mobile 2.1 for myself. It is true that the home button seems to stop working after opening many windows. The project that I wrote, that’s on that Github link, works up to Titanium 2.0.2.GA. Being that this is an open source project and I can only work on it when I have some spare time, 🙂 , I recommend that if you really wish to use the Navigation Controller and you don’t need to use Titanium 2.1, to downgrade your version for now. I will push changes to the Github project once I have time to make it work for 2.1. In the meantime, if you or anyone else would like to try your hand at fixing the code, you’re welcome to fork from my project and send your pull requests to me.

        Thank you for bringing this to my attention.

  2. No problem. I have forked your repo and rewrote the controller to use events when closing multiple windows in a stack. Check it out here on github

    I also added another method that I need for my own use: openFromHome(win) – it closes all windows except last and opens new window ‘win’ from argument.

    So far it works fine. It has not crashed yet, but I am not sure how reliable it is since its all event driven.

  3. Pingback: Complex Navigation in Titanium, Part 2 | Sunfish Empire LLC: Mobile Solution Provider

Comments are closed.