Flex Snippet Series - States Part One

One main feature in Flex that has many many uses is States. This tutorial is the first in a multi-part series on how to use States and what they are. States are defined as a collection of changes to a view. With the changes you can do multiple things including adding and removing child components, change component properties, and add effects. This first tutorial will give a quick rundown of changing the view by adding components depending on the state.

Below we have a small application that shows off the minimal basics of managing state in Flex. When the application starts we see a green textbox, this represents the first state, when the button is pressed we see our view change. The second state has an orange textbox. Basically what happens is that when the button is pressed the application is told to change to its second state. As we go through the code all this will become clearer.

Well with that let's dive right into the code. Below you will see the entire code for this tutorial. Everything is standard up until we get to the point where <mx:states> is defined. At this point we start defining the states property of the application. Inside the states section is where we define what states the application has and what happens when the app is in that state.

So the first state in this application is "stateUno" which is defined using the obvious <mx:State> tag and the name property is used to give is a name. Inside the state we use a tag which you may not have seen before, <AddChild>, which tells Flex that when the application is in this state a child needs to be added. In this case we also give it the main panel name for the relativeTo property and a position of lastChild. That will tell Flex to add whatever is inside this AddChild tag to the last child of the main panel.

The same procedure is done for the second state, one important thing to know is that every child added from a state is removed when the state changes again. And on to the code.

Now, I have explained defining the states and using them to add components, but there are still two things you need to do to make sure this is all working nicely - the first is setting the initial state. Some of you might have noticed a property set on the application named currentState, which is where we define the starting state. We also use this property to change the state of the application. We do this with the click event of the button we have on our panel. As you can see in the click event we change the state from "stateUno" to "stateDos". We then have a way to change to the second state but in this example there isn't a way to change back to the first state. It could be done in a very similar fashion though.

That takes care of the basics of managing and using states in Flex. The next couple tutorials in this series will go much more into depth of what can be done visually with states and what can be changed using them. Further tutorials in the series will go into how to change the state using different methods. If you have any questions drop a comment.