There was a question I got a few days ago about how to use the Appcelerator NavigationWindow with multiple layers of navigation. Since I didn’t find an online answer easily, I figured I would write a quick tutorial on this.
The Problem
You have a screen with a few layers of screens you would like to be able to navigate into and back out of using the NavigationWindow control.
The Solution
app/views/index.xml
The main NavigtionWindow view.
The important thing here is to notice the nextWin="details"
Thats the next window I’m calling.
<Alloy> <NavigationWindow platform="ios" id="navWindow"> <Window id="main" title="Nav Example"> <RightNavButton> <Button onClick="Alloy.Globals.openWindow" nextWin="details">more details</Button> </RightNavButton> <Label>Main screen want more details?</Label> </Window> </NavigationWindow> </Alloy>
app/controllers/index.js
Here we need to do one thing and thats set a navwindow globally to access here its the $.navWindow
.
Alloy.Globals.navwindow = $.navWindow; // The id of the NavigtionWindow $.navWindow.open();
app/alloy.js
Now here we pick up that nextWin variable I set.
Alloy.Globals = { openWindow: function(e) { // This gets the next window name thats defined in the XML var nextWin = e.source.nextWin; // Push it on the navigagtion stack Alloy.Globals.navwindow.openWindow(Alloy.createController(nexWin).getView()); } };
/apps/views/details.xml
The first details screen notice the next screen is denoted nextWin="moredetails"
<Alloy> <Window id="details" backgroundColor="white"> <RightNavButton> <Button onClick="Alloy.Globals.openWindow" nextWin="moredetails">even more details</Button> </RightNavButton> <Label>Here is a detail screen.</Label> </Window> </Alloy>
/apps/views/moredetails.xml
The second more details screen
<Alloy> <Window id="moredetails" backgroundColor="white"> <Label>Here is more details screen.</Label> </Window> </Alloy>