Getting Started with Flex 2 > Lessons > Use View States and Transitions > Define how users switch view states

Define how users switch view states

You want to design your application so that when the user clicks the Advanced Options link, the layout switches to the Advanced view state with the extra search options. When the user clicks the link again, the layout switches back to the base state and hides the options. To do this, you need to define click event handlers to switch the states.

1. In Design mode, select the base state in the list in the States view.

   
   
   

   Because you will define a click event handler for the Link control that is part of the base state, you need to change the focus of the MXML editor to the base state.

   When you select the base state in this step, the MXML editor doesn't show the three CheckBox controls because they're not part of the base state.

2. Select the LinkButton control in the layout and enter the following value in the On Click text box in the Flex Properties view:

   currentState='Advanced'
   

   The click property specifies that when the user clicks the LinkButton control, the application should switch the current state to the Advanced view state, which displays the three additional check boxes.

   Next, you want to hide the check boxes when the user clicks the LinkButton control a second time. You can do this by restoring the base state when the user clicks the link in the Advanced view state.

3. In the States view, select the Advanced state.

   Because you will define a click event handler for the LinkButton control when it's part of the Advanced state, you need to change the focus of the MXML editor to the Advanced state.

4. Select the LinkButton control in the layout of the Advanced view state, and then specify the following click property in the Flex Properties view:

   currentState=''
   
       
   
   
   
   
   
   

   Specify an empty string (two single quotes with no space between them) as the value of currentState. An empty string specifies the base state, so when the user clicks the LinkButton control in the Advanced view state, the base state is restored.

   If you change to Source view, you will notice that Flex Builder added an <mx:SetEventHandler> tag to the application. The final application source code should look like the following:

   <?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:SetEventHandler target="{linkbutton1}" name="click" handler="currentState=''"/>
           </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" click="currentState='Advanced';" id="linkbutton1"/>
       </mx:Panel>
   </mx:Application>
   

5. Save the file, wait until Flex Builder finishes compiling the application, and click the Run button in the toolbar.

   A browser opens and runs the application.

6. Click the LinkButton control to view the advanced search options.

   The application displays the three check boxes you defined in the Advanced view state. The check boxes immediately appear on the screen.

   
   
   

7. Click the LinkButton control again to restore the base state, which hides the advanced search options.

Flex 2.01