You apply a transition when you change the active View
container. Because view transitions occur when you change View containers,
you control them through the ViewNavigator container.
For example, you can use the following methods of the ViewNavigator
class to change the current view:
pushView()
popView()
popToFirstView()
popAll()
replaceView()
These methods all take an optional argument that defines the
transition to play when changing views.
You can also change the current view by using hardware navigation
keys on your device, such as the back button. When you change the
view by using a hardware key, the ViewNavigator uses the default
transitions defined by the ViewNavigator.defaultPopTransition and ViewNavigator.defaultPushTransition properties.
By default, these properties specify to use the SlideViewTransition
class.
The following example shows the main application file that initializes
the defaultPopTransition and defaultPushTransition properties
to use a FlipViewTransition:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkViewTrans.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.EmployeeMainViewTrans"
creationComplete="creationCompleteHandler(event);">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.transitions.FlipViewTransition;
// Define a flip transition.
public var flipTrans:FlipViewTransition = new FlipViewTransition();
// Set the default push and pop transitions of the navigator
// to use the flip transition.
protected function creationCompleteHandler(event:FlexEvent):void {
navigator.defaultPopTransition = flipTrans;
navigator.defaultPushTransition = flipTrans;
}
protected function button1_clickHandler(event:MouseEvent):void {
// Switch to the first view in the section.
// Use the default pop view transition defined by
// the ViewNavigator.defaultPopTransition property.
navigator.popToFirstView();
}
]]>
</fx:Script>
<s:navigationContent>
<s:Button icon="@Embed(source='assets/Home.png')"
click="button1_clickHandler(event)"/>
</s:navigationContent>
</s:ViewNavigatorApplication>
The first view, the EmployeeMainViewTrans.mxml, defines a CrossFadeViewTransition.
It then passes the CrossFadeViewTransition as an argument to the
pushView() method
on a change to the EmployeeView:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\views\EmployeeMainViewTrans.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Employees">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
import spark.transitions.CrossFadeViewTransition;
// Define two transitions: a cross fade and a flip.
public var xFadeTrans:CrossFadeViewTransition = new CrossFadeViewTransition();
// Use the cross fade transition on a push(),
// with a duration of 100 ms.
protected function myList_changeHandler(event:IndexChangeEvent):void {
xFadeTrans.duration = 1000;
navigator.pushView(views.EmployeeView, myList.selectedItem, null, xFadeTrans);
}
]]>
</fx:Script>
<s:Label text="Select an employee name"/>
<s:List id="myList"
width="100%" height="100%"
labelField="firstName"
change="myList_changeHandler(event);">
<s:ArrayCollection>
<fx:Object firstName="Bill" lastName="Smith" companyID="11233"/>
<fx:Object firstName="Dave" lastName="Jones" companyID="13455"/>
<fx:Object firstName="Mary" lastName="Davis" companyID="11543"/>
<fx:Object firstName="Debbie" lastName="Cooper" companyID="14266"/>
</s:ArrayCollection>
</s:List>
</s:View>
The EmployeeView is defined in the file EmployeeView.mxml, as
shown in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\views\EmployeeView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Employee View">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<s:VGroup>
<s:Label text="{data.firstName}"/>
<s:Label text="{data.lastName}"/>
<s:Label text="{data.companyID}"/>
</s:VGroup>
</s:View>
