Flex Using States and Transitions example Source Code

Flex Transitions Sample Source Code:
Create a file:
StatesandTransitions .mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" backgroundAlpha="0" currentState="Login" > <!--States Code --> <mx:states> <mx:State name="Register"> <mx:AddChild relativeTo="{loginForm}" position="lastChild"> <mx:FormItem id="confirm" label="Confirm:" styleName="myStyle"> <mx:TextInput /> </mx:FormItem> </mx:AddChild> <mx:SetProperty target="{loginPanel}" name="title" value="Register"/> <mx:SetProperty target="{loginButton}" name="label" value="Register"/> <mx:RemoveChild target="{registerLink}"/> <mx:AddChild relativeTo="{spacer1}" position="before"> <mx:LinkButton label="Return to Login" click="currentState='Login'"/> </mx:AddChild> </mx:State> <mx:State name="Login"> <mx:SetProperty target="{loginPanel}" name="height" value="156"/> </mx:State> </mx:states> <!-- Transitions Code --> <mx:transitions> <mx:Transition fromState="*" toState="Register"> <mx:Sequence> <mx:Resize target="{loginPanel}" duration="200" /> <mx:SetPropertyAction target="{loginPanel}" name="title" /> <mx:SetPropertyAction target="{loginButton}" name="label" /> <mx:Sequence target="{confirm}"> <mx:AddChildAction /> <mx:Dissolve alphaFrom="0" alphaTo="1.0" duration="200" /> </mx:Sequence> </mx:Sequence> </mx:Transition> <mx:Transition fromState="Register" toState="Login"> <mx:Sequence> <mx:Sequence target="{confirm}"> <mx:Dissolve alphaFrom="1.0" alphaTo="0" duration="200" /> <mx:RemoveChildAction /> </mx:Sequence> <mx:SetPropertyAction target="{loginPanel}" name="title" /> <mx:SetPropertyAction target="{loginButton}" name="label" /> <mx:Resize target="{loginPanel}" duration="200" /> </mx:Sequence> </mx:Transition> </mx:transitions> <!-- UI Code --> <mx:Text width="400" text="This is a login screen that can also be used to submit registration info. Click the link to toggle between the two states. " /> <mx:Spacer height="40" /> <mx:Panel title="Login" id="loginPanel" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Form id="loginForm"> <mx:FormItem label="Username:"> <mx:TextInput/> </mx:FormItem> <mx:FormItem label="Password:"> <mx:TextInput/> </mx:FormItem> </mx:Form> <mx:ControlBar> <mx:LinkButton label="Need to Register?" id="registerLink" click="currentState='Register'"/> <mx:Spacer width="100%" id="spacer1"/> <mx:Button label="Login" id="loginButton"/> </mx:ControlBar> </mx:Panel> </mx:Application>

Flex Simple Transition Without States example Source Code

Flex Transitions Sample Source Code:
Create a file:
TransitionsNo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0"> <mx:Script> <![CDATA[ private function myMouseOver(event:Event):void { myZoom.target=event.currentTarget; myZoom.captureStartValues(); event.currentTarget.width=100; event.currentTarget.height=200; myZoom.play(); } private function myMouseOut(event:Event):void { myZoom.target=event.currentTarget; myZoom.captureStartValues(); event.currentTarget.width=50; event.currentTarget.height=100; myZoom.play(); } ]]> </mx:Script> <mx:Text width="500" text="This example uses captureStartValues() to play a Zoom effect on the Image so it grows to a specified width of 110 pixels." /> <mx:SWFLoader source="../assets/products/HP_rz_1710.png" width="50" height="100" rollOver="myMouseOver(event)" rollOut="myMouseOut(event)" /> <mx:Zoom id="myZoom" /> </mx:Application>

Flex Expansion in place example Source Code

Flex States Sample Source Code:
Create a file:

StateDemo2.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" xmlns="*" creationComplete="srv.send()"> <mx:HTTPService id="srv" url="../assets/catalog.xml" result="catalog = new ArrayCollection(srv.lastResult.catalog.product)"/> <mx:Script> import mx.collections.ArrayCollection; [Bindable] public var catalog:ArrayCollection; </mx:Script> <mx:Label text="Click on a product to see details"/> <mx:VBox width="100%" height="100%" borderStyle="solid" paddingTop="4" paddingBottom="4" paddingLeft="4" paddingRight="4"> <mx:Repeater id="list" dataProvider="{catalog}" width="100%" height="100%"> <ProductListItem product="{list.currentItem}"/> </mx:Repeater> </mx:VBox> </mx:Application>

ProductListItems.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"> <mx:Script> [Bindable] public var product:Object; private function toggleState() : void { currentState = currentState == "expanded" ? "" : "expanded"; } </mx:Script> <mx:HBox width="100%" mouseDown="toggleState()"> <mx:Label text="{product.name}" width="200"/> <mx:Label text="Price: {product.price}"/> </mx:HBox> <mx:states> <mx:State name="expanded"> <mx:AddChild> <mx:HBox width="100%"> <mx:Image source="../{product.image}" height="100" width="50"/> <mx:Text text="{product.description}" width="100%"/> </mx:HBox> </mx:AddChild> </mx:State> </mx:states> </mx:VBox>

Flex Multi-state thumbnail example Source Code

Flex States Sample Source Code:
Create a file:
StateDemo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" xmlns="*" horizontalAlign="left" creationComplete="srv.send()"> <mx:HTTPService id="srv" url="product.xml" useProxy="false"/> <Thumbnail id="thumbnail" product="{srv.lastResult.product}"/> <mx:Label text="Choose a state:"/> <mx:RadioButton label="default" selected="true" click="thumbnail.currentState=''"/> <mx:RadioButton label="medium" click="thumbnail.currentState='medium'"/> <mx:RadioButton label="large" click="thumbnail.currentState='large'"/> </mx:Application>

Thumbnail.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FFFFFF" verticalAlign="left" paddingTop="4" paddingBottom="4" paddingLeft="4" paddingRight="4" borderStyle="solid" width="130" height="130" horizontalScrollPolicy="off" verticalScrollPolicy="off" resizeEffect="Resize"> <mx:Script> [Bindable] public var product:Object; </mx:Script> <mx:Label text="{product.name}" fontSize="11" fontWeight="bold"/> <mx:HBox> <mx:Image id="img" source="{product.image}" width="38" height="75"/> <mx:VBox id="features" width="100%" height="100%"> <mx:Label text="Price: {product.price}"/> </mx:VBox> </mx:HBox> <mx:states> <mx:State name="medium"> <mx:SetProperty name="width" value="200"/> <mx:SetProperty name="height" value="200"/> <mx:SetProperty target="{img}" name="width" value="50"/> <mx:SetProperty target="{img}" name="height" value="100"/> <mx:AddChild relativeTo="{features}"> <mx:Label text="Warranty: {product.warranty}"/> </mx:AddChild> </mx:State> <mx:State name="large" basedOn="medium"> <mx:SetProperty name="width" value="300"/> <mx:SetProperty name="height" value="300"/> <mx:SetProperty target="{img}" name="width" value="75"/> <mx:SetProperty target="{img}" name="height" value="150"/> <mx:AddChild> <mx:Text text="{product.description}" width="100%" height="100%"/> </mx:AddChild> </mx:State> </mx:states> </mx:VBox>