You can use different approaches for the user to navigate between screens.
AIR does not have access to the Options menu triggered by pressing the Menu key. If you want to create a native-like look and feel, you can design a similar-looking menu in your application for the application’s key views. The advantage of this approach is that the navigation menu does not take real estate away from your application. It is made visible when pressing the Menu key and collapses after a selection is made.
Another approach is to use breadcrumb navigation. This is a common and intuitive type of interface. It registers the user’s selection as he goes from screen to screen and stores his history. A persistent button gives the user the option to go back. Figure 16-5 shows a breadcrumb navigation flow and view stack.
We only need to make a few changes to add this functionality.
Let’s add the functionality to the BaseView class to include a back button to the dis playList and a callback function to dispatch a goBack event when the back button is pressed. In the onShow function, the onBack method of the super class is called last so that the back button is always at the top level of the display list.
This is the BaseView class:
[code]
import flash.events.Event;
protected function onBack():void {
var backButton:BackButton = new BackButton();
backButton.addEventListener(MouseEvent.CLICK, onGoBack);
addChild(backButton);
}
private function onGoBack(event:MouseEvent):void {
event.stopPropagation();
event.currentTarget.removeEventListener(MouseEvent.CLICK, onGoBack);
removeChild(event.currentTarget as MovieClip);
dispatchEvent(new Event(“goBack”));
}
[/code]
This is the SessionsView class modified to call the onBack method of the BaseView class:
[code]
public function onShow():void {
container = new Sprite();
// request list of sessions if not acquired yet
if (list == null) {
list = Sessions.sessionList;
}
// display sessions
showSessions();
// add back button
super.onBack();
}
[/code]
The ViewManager class also needs to be edited. The visited views are stored in a Vec tor. In the setCurrentView function, the new view is pushed to the stack:
[code]
private currentView:BaseView;
private var viewStack:Vector.<BaseView>;
private function goTo(event:ClickEvent):void {
viewStack.push(event.data);
setCurrentView(event.data);
}
private function setCurrentView(object:Object):void {
if (currentView) {
currentView.removeEventListener(ViewEvent.CLICK, goTo);
IView(currentView).onHide();
currentView.removeEventListener(“goBack”, goBack);
timeline.removeChild(currentView);
}
currentView = viewList[object.view];
if (object.id != undefined) {
currentView.setID(object.id);
}
timeline.addChild(currentView);
currentView.addEventListener(ClickEvent.NAV_EVENT, goTo, false, 0, true);
currentView.addEventListener(“goBack”, goBack, false, 0, true);
IView(currentView).onShow();
}
[/code]
When the back button is pressed, the current view is removed from the stack first. The setCurrentView method is then called and the last view stored is passed as an argument:
[code]
private function goBack(e:Event):void {
viewStack.pop();
setCurrentView(viewStack[viewStack.length – 1]);
}
[/code]
You can now easily add views to your application. If you want to add a transition between views, the simplest solution is to take a screen grab of the current view and tween it on a top layer while you are revealing the destination view.
Once this navigation functionality is in place, you can now focus on other aspects, perhaps more abstract or challenging, of your project.