Skip to end of metadata
Go to start of metadata

Demonstrates how to navigate a hierarchy of content using the NavigationWindow object.

Example App Source Location

Icon

You can find this example app in the Alloy repository under samples/apps/ui/navwindow. Check the instructions how to run these sample projects.

NavigationWindow implements a specialized view that manages the navigation of hierarchical content. You call the NavigationWindow object's openWindow() method to open a new window in the navigation group, closeWindow() to remove it.

The sample's main index.xml view declares a NavigationWindow element named navWindow.

app/views/ios/index.xml
Icon

As of Titanium 8.0.0, you don't need to specify the platform type (e.g. <NavigationWindow platform="ios">).

When the "Push" button is clicked, it invokes the  Alloy.Globals.openWindow()  function. This function is defined in the application's alloy.js file, and calls the navWindow's openWindow() method, passing it a new window created from the app/views/win.xml view. It also initializes a global counter variable named ctr that's displayed by each window added to the navigation stack.

app/alloy.js

Each newly created window displays left and right navigation buttons that let you push a new window on the navigation stack, or pop the current window off the stack. The "Push" button calls the same global openWindow() function, and the "Pop" button calls the view-controller's closeWindow() function, which calls calls closeWindow() on the navWindow object.

app/views/ios/win.xml

The view-controller for each window pushed onto the navigation stack displays the value of the global ctr in a Label, as well as property in the window's title.

app/controllers/ios/win.js