DrawersAndNavigation

This is a widget that provides a common navigation between iPhone, iPad, and Android. It uses NavigationWindow on iOS and supports back button and ActionBar on Android. It also provides a drawer that is common to all screens.

View on Android, iPhone

Use this framework to navigate through a tree-structured set of screens, switch between trees, and open a drawer on the left side of the screen.

Getting started

git clone git@github.com:appcelerator-services/DrawersAndNavigation.git

This git provides a sample app to explore. It starts with a dummy login screen; upon login the navigation starts. Note that all the code necessary to start the app is in index.html. The drawer content is in the drawer controller, and each window (window1, window2, ... window5, altwin1, ...) set their own navigation paths.

Initialize the widget

var nav = Alloy.createWidget("com.capnajax.navigation");
nav.init({
	drawerContent: Alloy.createController('drawer').getView()
});

The init() method sets the drawer content. This drawer controller remains constant for the life of the widget. It does not change due to navigation inside a tree or moving to a separate navigation tree.

Alloy.Globals.navigation = nav;

You may want to great a global reference to this navigation so that other screens can define their own navigation paths.

Set up the root of the tree

var firstController = Alloy.createController("window1");
nav.advance(firstController.getView());

The navigation has to start somewhere. Create a controller to define the first view in the navigation and advance into it. The advance() method moves deeper into the navigation tree, that is, navigates to the right.

Dive into the tree

Alloy.Globals.navigation.advance(Alloy.createController("window2").getView());

Again, use the advance method to navigate deeper into the tree.

Go back

Alloy.Globals.navigation.retreat();

The opposite of advance, this method goes back in the tree. If no parameters are provided, it'll go back one level in the tree. However it can also go back to a specific level in the tree (parameter is a positive integer), a specific number of steps back in the tree (parameter is a negative integer), or a specific view in the tree (parameter is a Ti.UI.View).

Go home. New home or old home?

Alloy.Globals.navigation.home(view);

This takes the navigation back to the top of the tree. If the view parameter is not provided, then this will take you to the root of the current navigation tree. If the view is provided however, the existing tree is destroyed and replaced with a new tree with the provided Yiew at its root.