The View-Based Application adds the concept of a navigator, which is a built-in navigation framework specifically built for use within mobile applications. The navigator will manage the screens within your application. Creating a new View-Based Application within Flash Builder 4.5 will result in the generation of two files. These files are the main application file, as well as the default view that will be shown within your application. Unlike the Blank Application, where the main application file was created with the <s:Application> as the parent, a View-Based Application uses the new <s:View NavigatorApplication> as its parent, as shown below:
<?xml version=”1.0″ encoding=”utf-8″?>
<s:ViewNavigatorApplication xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
firstView=”views.ViewBasedHomeView”>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
</s:ViewNavigatorApplication>
The second file that is created is the default view, which is automatically placed in a package named views. In this case, it was named ViewBasedHomeView, and was automatically set as the firstView property of ViewNavigatorApplication. The autogenerated code for this file is shown below:
<?xml version=”1.0″ encoding=”utf-8″?>
<s:View xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark” title=”HomeView”>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
</s:View>
Figure 2-3 shows the View-Based Application after adding a Label to ViewBasedHome View. As you can see, the navigation framework automatically provides a header and places the title of the current view in that header.
Now let’s explore the navigator a bit. I have created a second view for my application named SecondView. I updated ViewBasedHomeView to have a Button, and also added a Button to the SecondView shown below. As you can see, each view contains a Button with a similar clickHandler. The clickHandler simply calls the pushView function on the navigator and passes in the view that you wish to have the user navigate to. Home- View will navigate to Second View, and Second View will navigate to HomeView.
Between each view, a transition is automatically played and the title of the view is reflected in the navigation bar. This can be seen in Figures 2-4 and 2-5:
<?xml version=”1.0″ encoding=”utf-8″?>
<s:View xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark” title=”HomeView”>
<fx:Script>
<![CDATA[
protectedfunction button1_clickHandler(event:MouseEvent):void
{
navigator.pushView(views.SecondView);
}
]]>
</fx:Script>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
<s:Button label=”Go To Second View”
horizontalCenter=”0″ verticalCenter=”0″
click=”button1_clickHandler(event)”/>
</s:View>
<?xml version=”1.0″ encoding=”utf-8″?>
<s:View xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark” title=”SecondView”>
<fx:Script>
<![CDATA[
protectedfunction button1_clickHandler(event:MouseEvent):void
{
navigator.pushView(views.ViewBasedHomeView);
}
]]>
</fx:Script>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
<s:Button label=”Go To Home View”
horizontalCenter=”0″ verticalCenter=”0″
click=”button1_clickHandler(event)”/>
</s:View>
The navigator has additional methods for moving between views within your application. They are as follows:
navigator.popAll()
Removes all of the views from the navigator stack. This method changes the display to a blank screen.
navigator.popToFirstView()
Removes all views except the bottom view from the navigation stack. The bottom view is the one that was first pushed onto the stack.
navigator.popView()
Pops the current view off the navigation stack. The current view is represented by the top view on the stack. The previous view on the stack becomes the current view.
navigator.pushView()
Pushes a new view onto the top of the navigation stack. The view pushed onto the stack becomes the current view.
Each of the methods described above allow for a transition to be passed in. By default, they will use a Wipe transition. All pop actions will wipe from left to right, while a push action will wipe from right to left.
Another important item to note on navigator.pushView() is the ability to pass an object into the method call. I have updated the sample below to demonstrate how to use this within your applications.
The ViewBasedHomeView shown below now includes a piece of String data (“Hello from Home View”) within the pushView() method. SecondView has also been updated to include a new Label, which is bound to the data object. This data object is what will hold the value of the object passed in through the pushView() method. Figure 2-6 shows how
SecondView is created with the Label showing our new message:
<?xml version=”1.0″ encoding=”utf-8″?>
<s:View xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark” title=”HomeView”>
<fx:Script>
<![CDATA[
protectedfunction button1_clickHandler(event:MouseEvent):void
{
navigator.pushView(views.SecondView, “Hello from Home View”);
}
]]>
</fx:Script>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
<s:Button label=”Go To Second View”
horizontalCenter=”0″ verticalCenter=”0″
click=”button1_clickHandler(event)”/>
</s:View><?xml version=”1.0″ encoding=”utf-8″?>
<s:View xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark” title=”SecondView”>
<fx:Script>
<![CDATA[
protectedfunction button1_clickHandler(event:MouseEvent):void
{
navigator.pushView(views.ViewBasedHomeView);
}
]]>
</fx:Script>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
<s:Label text=”{data}” horizontalCenter=”0″ top=”30″/>
<s:Button label=”Go To Home View”
horizontalCenter=”0″ verticalCenter=”0″
click=”button1_clickHandler(event)”/>
</s:View>
The navigation bar at the top of a View-Based Application allows you to set specific elements. These are navigationContent and actionContent. By setting these elements, your application can include a common navigation throughout. Here is an example of the View-Based Application’s main file updated with these new elements. You will notice that navigationContent, actionContent, and the Spark components are defined in MXML. Within each, I have included a Button. Each Button has a clickHandler that includes a call to one of the navigator methods. The Button labeled “Home” has a click Handler that includes a call to the popToFirstView() method, which will always send the user back to the view defined in the firstView property of the ViewNavigation Application. The Button labeled “Back” has a clickHandler that includes a call to the popView() method, which will always send the user to the previous view in the stack.
Figure 2-7 shows the application, which now includes the new navigation elements within the navigation bar:
<?xml version=”1.0″ encoding=”utf-8″?>
<s:ViewNavigatorApplication xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
firstView=”views.ViewBasedHomeView”>
<fx:Script>
<![CDATA[
protectedfunction homeButton_clickHandler(event:MouseEvent):void
{
navigator.popToFirstView();
}
protectedfunction backButton_clickHandler(event:MouseEvent):void
{
navigator.popView();
}
]]>
</fx:Script>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
<s:navigationContent>
<s:Button id=”homeButton” click=”homeButton_clickHandler(event)”
label=”Home”/>
</s:navigationContent><s:actionContent>
<s:Button id=”backButton” click=”backButton_clickHandler(event)”
label=”Back”/>
</s:actionContent>
</s:ViewNavigatorApplication>
