Titanium Mobile

# Titanium.UI.NavigationWindow

A NavigationWindow implements a specialized view that manages the navigation of hierarchical content.

Availability
8.0.0
8.0.0
9.2.0
Extends
Titanium.UI.Window

# Overview

You create a NavigationWindow with the Titanium.UI.createNavigationWindow factory method or a <NavigationWindow> Alloy element.

All NavigationWindow objects must have at least one root window that cannot be removed. When creating a NavigationWindow with the factory method, you must set its window property to the root level window. Equivalently, in an Alloy application, insert a <Window> element as a child of the <NavigationWindow> element. See examples below.

This object is not meant to be added to other windows. However, it can be used within a Titanium.UI.iOS.SplitWindow.

# Examples

# Simple Navigation Window

Creates a navigation window with the first window colored red. Press the button to open the blue window. Use the back button to return to the red root window.

var win2 = Titanium.UI.createWindow({
    backgroundColor: 'red',
    title: 'Red Window'
});

var win1 = Titanium.UI.createNavigationWindow({
    window: win2
});

var win3 = Titanium.UI.createWindow({
    backgroundColor: 'blue',
    title: 'Blue Window'
});

var button = Titanium.UI.createButton({
    title: 'Open Blue Window'
});
button.addEventListener('click', function(){
    win1.openWindow(win3, {animated:true});
});

win2.add(button);
var button2 = Titanium.UI.createButton({
    title: 'Close Blue Window'
});
button2.addEventListener('click', function(){
    win1.closeWindow(win3, {animated:false}); //win3.close() will also work!!
});

win3.add(button2);
win1.open();

# Alloy XML Markup

Previous example as two Alloy view-controllers. Requires Alloy 1.2.2 and later.

app/views/index.xml:

<Alloy>
    <NavigationWindow id="win1">
        <Window id="win2" title="Red Window" backgroundColor="red">
            <Button id="button" onClick="openBlueWindow">Open Blue Window</Button>
        </Window>
    </NavigationWindow>
</Alloy>

app/controllers/index.js:

function openBlueWindow(e) {
    var win3 = Alloy.createController('bluewin').getView();
    $.win1.openWindow(win3);
}

$.win1.open();

app/views/bluewin.xml:

<Alloy>
    <Window id="win3" title="Blue Window" backgroundColor="blue">
        <Button onClick="closeWindow">Close Window</Button>
    </Window>
</Alloy>

app/controllers/bluewin.js:

function closeWindow(){
    $.win3.close();
}

# Properties

# window CREATION ONLY

Availability
8.0.0
8.0.0
9.2.0
window :Titanium.UI.Window

Window to add to this navigation window.

# Methods

# closeWindow

Availability
8.0.0
8.0.0
9.2.0
closeWindow(window, options) → void

Closes a window and removes it from the navigation window.

Parameters

Name Type Description
window Titanium.UI.Window

Window to close.

options Dictionary

Options supporting a single animated boolean property to determine whether the window will be animated (default) while being closed (default: true).

Returns

Type
void

# openWindow

Availability
8.0.0
8.0.0
9.2.0
openWindow(window[, options]) → void

Opens a window within the navigation window.

Parameters

Name Type Description
window Titanium.UI.Window

Window to open.

options AnimatedOptions

Options supporting a single animated boolean property to determine whether the window will be animated (default) while being opened (default: true).

Returns

Type
void

# popToRootWindow

Availability
8.0.0
8.0.0
9.2.0
popToRootWindow([options]) → void

Closes all windows that are currently opened inside the navigation window.

Note that only the close event of the most recently opened window is fired.

Parameters

Name Type Description
options AnimatedOptions

Options supporting a single animated boolean property to determine whether the windows will be animated while being closed (default: false).

Returns

Type
void

Contents