Flash Builder and its Hero APIs provide functionality to handle view management.
Create a new project under File→New→Flex Mobile project. On the Mobile Settings panel, choose Application template→Mobile Application, then select Finish. Look at the main default application file. A firstView tag was added to the MobileApplica tion tag. It points to an MXML file inside a views directory:
[code]
<s:MobileApplication
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adboec.com/flex/spark”
firstView=”views.OpeningView”
}
}
[/code]
Notice a new directory called views inside your default application file. It contains the MXML file which was named after your project, as well as HomeView.mxml, and was given a title of HomeView. This is the default first view which appears when the application starts:
[code]
<s:View
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adboec.com/flex/spark”
title=”HomeView”>
<fx:Declarations> </fx:Declarations>
</s:View>
[/code]
A few new components were created especially for mobile development. The spark.components.ViewNavigatorApplication container automatically creates a ViewNavigator object. It is a container that consists of a collection of views, and is used to control the navigation between views, their addition or removal, and the navigation history.
The View is also a container. It extends from the Group component. Note its naviga tor attribute which references the ViewNavigator container and its data attribute which is used to store an Object, whether the view is currently visible or was previously visited.
The View dispatches three events of type FlexEvent. FlexEvent.VIEW_ACTIVATE and Flex Event.VIEW_DEACTIVATE are self-explanatory. FlexEvent.REMOVING is dispatched when the view is about to be deactivated.
Views are destroyed to keep a small footprint. If a particular view is complicated and may take some time to display, you can keep it in memory and set its destructionPo licy attribute to none.
Let’s add two buttons to our default view to navigate to another view:
[code]
<s:View
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adboec.com/flex/spark”
title=”HomeView”>
<fx:Declarations> </fx:Declarations>
<fx:Script>
private function onClick(event:MouseEvent):void {
navigator.pushView(ContextView);
}
</fx:Script>
<s:Button id=”Apples” click=”onClick(event)” y=”100″ />
<s:Button id=”Oranges” click=”onClick(event)” y=”200″ />
</s:View>
[/code]
Clicking on the buttons calls the onClick function which, in turn, calls the navigator’s pushView method. This method navigates to a view we will call ContextView. The push View method takes three arguments: the name of the view, a data object, and a transition animation of type ViewTransition. Only the first parameter is required.
Other navigation methods are popView to go back to the previous view, popToFirst View to jump to the default first view, and the self-explanatory popAll and replace View. navigator.activeView returns the current view.
Change the onClick function to pass the button ID as an argument:
[code]
private function onClick(event:MouseEvent):void {
navigator.pushView(ContextView, {fruit:event.currentTarget.id});
}
[/code]
Now create the second view to navigate to. Right-click on the views folder, create a new project under New→MXML Component, and enter ContextView in the Name field. Note that the file is based on spark.components.View.
Add one text field to populate the view with the data received and one button to navigate back to the first view. Note the add tag which is dispatched when a view is added to the container:
[code]
<s:View
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adboec.com/flex/spark”
title=”ContextView”>
<fx:Declarations> </fx:Declarations>
<s:add>
context.text = data.fruit;
</s:add>
<fx:Script>
private function onClick(event:MouseEvent):void {
navigator.pushView(HomeView);
}
</fx:Script>
<s:Button click=”onClick(event)” />
<s:TextArea id=”context” />
</s:View>
[/code]
Run this example and test the navigation. The context text area is populated with the data passed.
By default, a ViewTransition animates between screens, where one view slides out and the other slides in, defined as SlideViewTransition. You can change it for one of the following transitions: CrossFadeViewTransition, FlipViewTransition, or ZoomViewTran sition.
The default transition can be changed in navigator.defaultPopTransition and naviga tor.defaultPushTransition:
[code]
import spark.transitions.CrossFadeViewTransition;
import spark.transitions.FlipViewTransition;
var pushTransition = new FlipViewTransition();
navigator.defaultPushTransition = pushTransition;
var popTransition = new CrossFadeViewTransition();
navigator.defaultPopTransition = popTransition;
// OR
private function onClick(event:MouseEvent):void {
navigator.pushView(HomeView, {}, FlipViewTransition);
}
[/code]
To suppress the transition altogether, enter the following in the Default Application file:
[code]
navigator.transitionEnabled = false;
// OR
ViewNavigator.defaultPushTransition = null;
ViewNavigator.defaultPopTransition = null;
[/code]
A default ActionBar control is placed at the top of the screen. It functions as a control and navigation menu and provides contextual information, such as the current active view. It has a navigation area, a control area, and an action area. To modify it, use the navigationContent, titleContent, and actionContent tags.
By default, the name of the active view shows in the titleContent. To add a button to the navigationContent tag to go back home, use:
[code]
private function goHome():void {
navigator.popToFirstView();
}
<s:navigationContent>
<s:Button label=”Home” click=”goHome()”/>
</s:navigationContent>
[/code]
If you use it, move all navigation functionality from the views to it. Alternatively, you can choose not to use it at all. To hide it at the view level, use the following:
[code]
<s:creationComplete>
actionBarVisible = false;
</s:creationComplete>
[/code]
To hide it at the application level, use this code:
[code]
navigator.actionBar.visible = false;
navigator.actionBar.includeInLayout = false;
[/code]
Pressing the back button automatically goes back to the previous view. To overwrite this functionality, set a null navigationContent as follows:
[code]
<s:navigationContent/>
[/code]
If the user leaves the application on a specific view, you can start the application again on the same view with the same data by using the sessionCachingEnabled tag:
[code]
<s:MobileApplication
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adboec.com/flex/spark”
sessionCachingEnabled=”true”
firstView=”views.OpeningView”
}
}
[/code]