Category Archives: Appcelerator

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);		
});