Getting Started with Flex 2 > Lessons > Use View States and Transitions > Design the base state

Design the base state

Before you can use view states, you must design the base state of the application or component. The base state is the default layout of the application or custom component.

In this section, you create a base state by inserting and positioning the controls of a simple search form.

1. With your Lessons project selected in the Navigator view, select File > New > MXML Application and create an application file called ViewStates.mxml.

   NOTE

   For the purpose of these lessons, several application files are used in a single Flex Builder project. However, it's good practice to have only one MXML application file per project.

2. Designate the ViewStates.mxml file as the default file to be compiled by right-clicking (Control-click on Macintosh) the file in the Navigator view and selecting Set As Default Application from the context menu.
3. In the MXML editor's Design mode, add a Panel container to the ViewStates.mxml file by dragging one from the Layout category of the Components view (Window > Components).
4. Select the Panel container in the layout and set the following Panel properties in the Flex Properties view:
   • ID: panel1
   • Width: 300
   • Height: 400
   • X: 5
   • Y: 5
5. Add the following controls to the panel by dragging them into the panel from the Controls category of the Components view:
   • Label
   • TextInput
   • Button
   • LinkButton
6. Select the Label control in the panel and set the following Label properties in the Flex Properties view:
   • Text: Search
   • X: 20
   • Y: 70
7. Select the TextInput control and set the following TextInput properties in the Flex Properties view:
   • X: 20
   • Y: 90
8. Select the Button control and set the following Button properties in the Flex Properties view:
   • Label: Go
   • X: 185
   • Y: 90
9. Select the LinkButton control and set the following LinkButton properties in the Flex Properties view:
   • ID: linkbutton1
   • Label: Advanced Options
   • X: 20
   • Y: 120

   The layout should look similar to the following example:

   
   
   

10. Switch to the editor's Source mode by clicking the Source button in the document toolbar.

    The ViewStates.mxml file should contain the following MXML code:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
        <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>
    

11. Save the file, wait until Flex Builder compiles the application, and click the Run button in the toolbar. If you're using the plug-in configuration of Flex Builder, select Run > Run As > Flex Application.

    A browser opens and runs the application.

    
    
    

    NOTE

    The browser must have Flash Player 9 installed to run the application. You have the option of installing Flash Player 9 in selected browsers when you install Flex Builder. To switch to a browser with Flash Player 9, in Flex Builder select Window > Preferences > General > Web Browser.

Flex 2.01