iOS Multi-level Navigation with Titanium and NavigationWindow (Appcelerator)

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

I’m sure it’s in the documentation but I couldn’t see how to handle navigation with more than one level using Alloy. The key point is that I had to store a reference to the navigation menu from the index.xml as a global variable (skip to step 4 to see that).

Here’s a simplified version of what I implemented:

1. index.xml:

<Alloy>
   <NavigationWindow id="navMenu" platform="ios"> 
     <Window id="window1" class="container"> 
        <Label id="lbl_one">First window</Label> 
     </Window>
   </NavigationWindow>
</Alloy>

2. window2.xml:

<Alloy>
  <Window id="window2" class="container">
     <Label id="lbl_two">Second window</Label>
  </Window>
</Alloy>

3. window3.xml:

<Alloy>
  <Window id="window3" class="container">
     <Label id="lbl_three">Third window</Label>
  </Window>
</Alloy>

4. index.js:

$.lbl_one.addEventListener('click', function(){
    var win = Alloy.createController("window2").getView();    
    $.navMenu.openWindow(win,{animated:true});
    Alloy.Globals.navMenu = $.navMenu; //set a global reference to the navmenu that we will use in child windows	  	
});

5. window2.js:

$.lbl_two.addEventListener('click', function(){	
     var win = Alloy.createController("window3").getView();
     Alloy.Globals.navMenu.openWindow(win);		
});


About Phil Smithson

Ultrarunner & CTO. Passions include Mobile app development, Scrum, Kanban, Wordpress and Symfony.

17 thoughts on “iOS Multi-level Navigation with Titanium and NavigationWindow (Appcelerator)

  1. […] Add an event listener on your back button and use the global reference to your navigtionWindow (that you set in your parent controller) to close the current […]

  2. Keshav says:

    Thanks phil,

  3. Enrique says:

    Thank you very much Phil, useful and very clear. I was stopped at this point migrating an app to iOS7.

  4. matsui says:

    Thank you very much! Phil

  5. Jakub says:

    Sweet! Titanium docs only describe how to do the single level in Alloy and it is not very intuitive. Thanks a lot!

  6. Shawn says:

    Hey Phil,

    Im getting Invalid type passed to function at details.js

  7. Sirhcle says:

    Wow!! thank you, thank you,thank you… just what i was looking for

  8. dstudeba says:

    This was very helpful, thank you very much!

    I did have a problem in that I couldn’t assign the global to a variable, it didn’t even show up in the debugger list of variables. I ended up having to call it directly from the global to get it to work.

    Alloy.Globals.navGroupWinGlobal.openWindow(myItemView);

    • Phil Smithson says:

      yeah when I was reviewing this post yesterday after someone else commented, I did wonder why it’s assigned to a variable at all actually. Glad it helped anyway! I’ll update the code to remove it.

    • Phil Smithson says:

      Btw, you should check out Fokke’s commonJS module which adds NavigationWindow functionality to Android too.

  9. Kevin says:

    Thanks Phil, just what I needed. I am worried about opening too many windows – do I need to close the other windows?

Leave a Reply

Your email address will not be published. Required fields are marked *


*