Using States in Flash Builder
Line Break
Author: Arjan (34 Articles) - Author Website
Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.
One powerful thing in Flex/Flash is the use of states. States can be used to control the behavior of your application based on the state that it’s in at the moment. Let’s say we want to have an display and edit mode in our application and we want to show something different in those modes / states. Let’s create a simple example that shows you how you can use states to achieve this.
The first thing you should do is think about what kind of states your application can have, for our example it’s simple: display and edit. But i’m sure you can think of other scenarios that have more states.
So for our example we need to define the states in MXML as follows:
1 2 3 4 | <s:states> <s:State name="display"/> <s:State name="edit"/> </s:states> |
The first State that you declare in inside the states tag is the one that will be the default.
Now let’s create a simple layout that behaves differently based on the currentState property of the application. To do this, we can use the includeIn attribute that all components have. I created two VGroups that use the includeIn attribute to specify in which state they should be visible, notice that the label of the button to switch states also depends on the currentState property of the application.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <s:VGroup paddingTop="20" paddingLeft="20" > <s:HGroup width="350" height="50" includeIn="display" verticalAlign="middle"> <s:Label text="Name: {nameValue}"/> </s:HGroup> <s:HGroup width="350" height="50" includeIn="edit" verticalAlign="middle"> <s:Label text="Name:"/> <s:TextInput id="tiName" text="{nameValue}" change="nameValue = tiName.text" width="150"/> </s:HGroup> <s:Button click="handleClick(event)" label="{currentState == 'edit' ? 'Switch to display' : 'Switch to edit'}"/> </s:VGroup> |
The nameValue variable:
1 2 3 4 5 6 7 8 | <fx:Script> <![CDATA[ [Bindable] private var nameValue:String = "Flex-Blog.com"; ]]> </fx:Script> |
Finally, I created a click handler that switches the currentState of the application:
1 2 3 4 | private function handleClick(event:MouseEvent):void { currentState = (currentState == "display" ? "edit" : "display"); } |
And that’s it. Check the example below to see it all work, view source is enabled.
The complete sourcecode:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" viewSourceURL="srcview/index.html"> <fx:Script> <![CDATA[ [Bindable] private var nameValue:String = "Flex-Blog.com"; private function handleClick(event:MouseEvent):void { currentState = (currentState == "display" ? "edit" : "display"); } ]]> </fx:Script> <fx:Declarations> </fx:Declarations> <s:states> <s:State name="display"/> <s:State name="edit"/> </s:states> <s:VGroup paddingTop="20" paddingLeft="20" > <s:HGroup width="350" height="50" includeIn="display" verticalAlign="middle"> <s:Label text="Name: {nameValue}"/> </s:HGroup> <s:HGroup width="350" height="50" includeIn="edit" verticalAlign="middle"> <s:Label text="Name:"/> <s:TextInput id="tiName" text="{nameValue}" change="nameValue = tiName.text" width="150"/> </s:HGroup> <s:Button click="handleClick(event)" label="{currentState == 'edit' ? 'Switch to display' : 'Switch to edit'}"/> </s:VGroup> </s:Application> |
Related posts:
- TinyURL usage with Flash Builder
- Connect to Google Analytics from Flash Builder
- Call Javascript function from Flex / Flash Builder (AS3)
- Using ASDoc as an External Tool in Flash Builder 4
- Flex 4 / Flash Builder 4: baseColor changed to chromeColor
Written by · Filed Under Examples
Was this post useful to you?
(1 votes, average: 5.00 out of 5)
Loading ...
