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

The main NavigtionWindow view.
The important thing here is to notice the nextWin="details" Thats the next window I’m calling.

    <NavigationWindow platform="ios" id="navWindow">
        <Window id="main" title="Nav Example">
                <Button onClick="Alloy.Globals.openWindow" nextWin="details">more details</Button>
            <Label>Main screen want more details?</Label>

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


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

The first details screen notice the next screen is denoted nextWin="moredetails"

    <Window id="details" backgroundColor="white">
            <Button onClick="Alloy.Globals.openWindow" nextWin="moredetails">even more details</Button>
        <Label>Here is a detail screen.</Label>       

The second more details screen

    <Window id="moredetails" backgroundColor="white">
        <Label>Here is more details screen.</Label>       
Loading Facebook Comments ...