Forging Titanium Episode 2: A Cross-Platform Navigation Controller

Gold triangle pattern background, 3d rendering

Editor’s note: This and future episodes of Forging Titanium are available here.

When developing cross-platform applications in Titanium, one of the challenges facing a developer is maximizing code reuse while still conforming to the UI conventions of the Android or iOS platform.  In this week’s episode, we explore how we could create a hierarchical Navigation Controller, which would display a series of windows in an easily navigable stack.  Be sure to join us next week as well, when further explore how to extend core Titanium UI components to create custom UI controls.

Episode Resources:

  • Android Screencast
  • Forging Titanium GitHub repo (sample app access)

17 COMMENTS

  1. Oh – and a question.
    I did my best to add this “special” controller to a tab-based application. It was not difficult to add a native “IPhone” navigation controller, but I couldn’t figure out how to use your control together with tabs.

    In all cases – first this videos are fantastic and a great help. And second exactly this control seems to me a basic feature to write cross plattform apps. Thanks a lot!
    Klaus

  2. One thing i have found really weird is that I cant set certain items to the child windows. For example, I cant use the IPhone only tools to set a top right button in the test window. It only adds to the very first window and then I get a weird flickr effect in my other screens as I move between them.

    I also found that I can create extra window classes that I have extended to do all sorts of things but without being able to set the refresh button and other controls Im a bit stumped as to how to progress.

    Great concept however and Ill be using this and the ep003 heaps as a great way to extend functionality.

  3. I found a solution to this kinda – It (The title and right nav button) only doesn’t show the title IF you have a background image being used for your title bar.

    I’m not sure if this is a known bug or not.

  4. This example no longer works in Android.

    I am trying to use it as is in Android 2.2 in the simulator and it crashes.

    When I click add new window it says the app has crashed unexpectedly and to force close the app.

    After this has happened the first time it then will not get based the boot up screen.

    This is a real problem for me because I have used this design pattern for a major app and I cant even get a debug message to work out what the problem is.

    Any one else know what to do ?

  5. Thank you for these episodes !

    When you “Add a New Window” and then “Go to the Home Window”, and then again “Add a New Window”, each time a new NavigationGroup is created. Is this correct?

  6. I am testing this sample from github to see whether I can use it as the basis for rebuilding an iOS app I already have for cross platform. Two lines of code require tweaking to make it work in Android, though it works as-is on iPhone.

    I wonder if I’m using a wrong version of the Android SDK, though 2.2 is the only one with which I’ve gotten the sample to run.

    In app.js, this change seems to be required by Android and works fine in iOs5:
    //open initial window
    controller.open(new TestWindow(>>this.<>exports.<<TestWindow(navController));

    Without the change to TestWindow.js, I get this error in Android: http://i1080.photobucket.com/albums/j324/Todd_Rimes/Screenshot2011-12-24at103831AM.png

    I'm new to Titanium and really *want* the cross-platform thing to work! Any pointers and non-snarky advice greatly appreciated.

    ~Todd

  7. I am testing this sample from github to see whether I can use it as the basis for rebuilding an iOS app I already have for cross platform. Two lines of code require tweaking to make it work in Android, though it works as-is on iPhone.

    I wonder if I’m using a wrong version of the Android SDK, though 2.2 is the only one with which I’ve gotten the sample to run.

    In app.js, this change seems to be required by Android and works fine in iOs5:
    //open initial window
    controller.open(new TestWindow(####this.####controller));

    In TestWindow.js, this change is required by Android but causes iOs5 not to launch:
    var add = Ti.UI.createButton({
    title:’Add A New Window’,
    height:’50dp’,
    width:’200dp’,
    top:’20dp’
    });
    add.addEventListener(‘click’, function() {
    navController.open(new ###exports.###TestWindow(navController));

    Without the change to TestWindow.js, I get this error in Android: http://i1080.photobucket.com/albums/j324/Todd_Rimes/Screenshot2011-12-24at103831AM.png

    I’m new to Titanium and really *want* the cross-platform thing to work! Any pointers and non-snarky advice greatly appreciated.

    ~Todd

  8. Also, on the third line below:

    exports.TestWindow = function(navController) {
    var win = Ti.UI.createWindow({
    title:’Window ‘+controller.windowStack.length,

    shouldn’t it be:

    exports.TestWindow = function(navController) {
    var win = Ti.UI.createWindow({
    title:’Window ‘+###navController###.windowStack.length,

    ?

  9. I finally discovered that I *had to* make all these changes in Android and that they do in fact work on iOs 5; I had to clean the project before rebuilding it for the iOs simulator. Thank you!
    ~Todd

Comments are closed.