Flex 4: Adding States and changing properties,styles and events for states

Flash Builder 4 has improved a lot for developer and designer. It has ease out the syntax for working with states; now working with States is much easier and faster compare to Flex 3. In Flex 3, most of us used the design mode for working with states, I personally believed that writing code for states in Flex 3 was much more tedious and time consuming, and hence I had always used the Design mode.

Now with the new release for Flex, Many things has improved for developers and designer.

In this tutorial, I will walk you through the steps to use the code for working with states using Flash Builder 4. I will also explain how we can change the property and handle the events for two different states.

We will create the simple example which will have two states; each state will have common components, Label and Button. Both components will have different values depending upon the current state.

To start with first we will create the Flex project using Flash Builder 4. Once you are done open the application.mxml file.

In this tutorial, we will have Lable stating the current state string and one button to change the states. To add this add following code just after the Application tag.

<s:layout>
 <s:VerticalLayout horizontalAlign="center" paddingTop="20"/>
</s:layout>
<s:Label text="We are at state 1" width="100%" textAlign="center"/>
<s:Button label="Go To State 2"/>

In above code snippet, we have set the VerticalLayout layout using <s:layout> tag. The syntax for setting Layout is also changed in Flex 4. Just after that, we have set the Label and Button spark component. Label has the value for current state information and button has label for moving to next state.

We are done with creating default state, Now As mention earlier we will create two different states in this application. To do this we need to add following code just after the Application starting tag.

<s:states>
 <s:State name="State1"/>
 <s:State name="State2"/>
</s:states> In the above code snippet, we have declared the two states using <s:states> tag. It is very simple, add as many child tag of <s:State> 

within States tag. Add the name property for each state. For this tutorial we have mentioned State1 and State2.

We are done with declaring two different states, but we need to change the properties and event handler for buttons for two different states. In Flex 4, we can change the properties of component for different states using (.) syntax followed by the state name attribute as shown here <B>style.stateName</B> The properties, styles and events are declared without (.) and state name, will be considered for default state. We have created Label and button earlier, in which we haven’t mention the (.) and state name, Hence that will be considered for the default state.

Now as we have initialize two different state, we have to change the values of Label and Button for different states. To change the values for State2, we will add the properties with (.) syntax followed by the state name. Update your <s:Label> and <s:Button> button tag as follow.

<s:Label text="We are at state 1" width="100%" textAlign="center" text.State2="We are at state 2"/>
<s:Button label="Go To State 2" label.State2="Go To State 1" click="currentState = 'State2'" click.State2="currentState = 'State1'"/>

You can see that we have change the text property of Label tag for State2 to <B>text.State2="We are at state 2"</B> Same way we have some event to navigate through the states. To do so, we have added an event for <s:Button>tag for both the states as <B>click="currentState = 'State2'" click.State2="currentState = 'State1'"</B>. If you see above the syntax for changing the state is <B>currentState = 'State Name'</B>.

Now we are done with our application. The final code for your application will look like this.

<?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/mx" minWidth="955" minHeight="600">
 
 <s:states>
  <s:State name="State1"/>
  <s:State name="State2"/>
 </s:states>
 
 <s:layout>
  <s:VerticalLayout horizontalAlign="center" paddingTop="20"/>
 </s:layout>
 <s:Label text="We are at state 1" width="100%" textAlign="center" text.State2="We are at state 2"/>
 <s:Button label="Go To State 2" label.State2="Go To State 1" click="currentState = 'State2'" click.State2="currentState = 'State1'"/>
 
</s:Application>

You are done, Just run your application and find the output.

It is very simple and easy to work with states in Flex 4. I hope you like this tutorial.

I will write another tutorial for states, in which I will include how we can add / remove components for states.