Getting Started with Flex 2 > Lessons > Use View States and Transitions > Design a view state

Design a view state

The sample application provides a simple search mechanism that meets the needs of most users. However, some users might prefer to have more search options. You can use view states to provide these options on request.

  1. In Design mode, click the New State button in the States view (Window > States).


    Selecting the New State button in States view.

    The New State dialog box appears.


    The New State dialog box.

  2. Enter Advanced in the Name text box and click OK.

    The new state appears in the States view.


    Viewing the new state in the States view.

    You can use the layout tools in Flex Builder to make changes to the appearance of the new state. You can modify, add, or delete components. As you work, the changes describing the new state are recorded in the MXML code.

  3. In Design mode, insert a VBox container below the Advanced Search link, specifying a width of 160 and a height of 80 in the insert dialog box that appears, and then set the following VBox properties in the Flex Properties view:
  4. Drag three CheckBox controls into the VBox container.

    The VBox container automatically aligns the controls vertically.

  5. Select the first CheckBox control in the VBox container and enter Regular Expression as the value of its label property.
  6. Select the second CheckBox control and enter Case sensitive as the value of its label property.
  7. Select the third CheckBox control and enter Exact Phrase as the value of its label property.

    The layout should look similar to the following:


    Layout of the Flex application.

  8. Switch to Source mode and examine the code.

    Flex Builder inserted a <mx:states> tag after the opening <mx:Application> tag, so that the application appears as follows:

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:states>
        <mx:State name="Advanced">
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:VBox x="20" y="160" width="160" height="80" id="myVBox">
                    <mx:CheckBox label="Regular expression"/>
                    <mx:CheckBox label="Case sensitive"/>
                    <mx:CheckBox label="Exact phrase"/>
                </mx:VBox>
            </mx:AddChild>
        </mx:State>
    </mx:states>
    <mx:Panel id="panel1" x="5" y="5" width="300" height="400" layout="absolute">
        <mx:Label x="20" y="70" text="Search"/>
        <mx:TextInput x="20" y="90"/>
        <mx:Button x="185" y="90" label="Go"/>
        <mx:LinkButton x="20" y="120" label="Advanced Options" id="linkbutton1"/>
    </mx:Panel>
</mx:Application>
  9. Save the file, wait until Flex Builder compiles the application, and click Run in the toolbar.

    A browser opens and runs the application.


    Flex application running in the web browser.

    Your application does not display the controls you inserted in the new view state. By default, Flex applications display only the base state. You must define how users can switch view states, typically by clicking specific controls.

Flex 2.01

Take a survey