Browse > Home / Examples / Using States in Flash Builder

Using States in Flash Builder

15 December 2009

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:

  1. Connect to Google Analytics from Flash Builder
  2. TinyURL usage with Flash Builder
  3. Twitter Search with Flex Builder
  4. Using baseColor to Style Components in Flex 4

Written by Arjan · Filed Under Examples 

Was this post useful to you?

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading ... Loading ...

Comments

Got something to say?