Back to Basics Appcelerator NavigationWindow example

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>