Developing Android Applications with Adobe AIR [100]
xmlns:s="library://ns.adboec.com/flex/spark" firstView="views.OpeningView" } } 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: xmlns:s="library://ns.adboec.com/flex/spark" title="HomeView"> NOTE The concept of a splash screen, or a default.png file, does not exist in Android as it does in iOS. The user sees a black screen until the application is loaded. Flex provides an option to display an image first while it initializes the application to reduce the sense of delay. The image is automatically replaced by the default view when ready. 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 navigator 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 FlexEvent.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 destructionPolicy attribute to none. Let’s add two buttons to our default view to navigate to another view: xmlns:s="library://ns.adboec.com/flex/spark" title="HomeView"> private function onClick(event:MouseEvent):void { navigator.pushView(ContextView); } 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 pushView 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, popToFirstView to jump to the default first view, and the self-explanatory popAll and replaceView. navigator.activeView returns the current view. Change the onClick function to pass the button ID as an argument: private function onClick(event:MouseEvent):void { navigator.pushView(ContextView, {fruit:event.currentTarget.id}); } 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: xmlns:s="library://ns.adboec.com/flex/spark" title="ContextView"> context.text = data.fruit; private function onClick(event:MouseEvent):void { navigator.pushView(HomeView); } Run this example and test the navigation.