How to Manage States with Flex's Design Mode

The following excerpt from Learning Flex 4 shows you how to work with states in Flex's Design Mode.

---

First, create a fresh project called StageRight, switch to Design mode, delete the Application container’s height and width properties, and give the application a BasicLayout. This demo uses a single Button, so drag a Button control into the application and drop it somewhere near the lower-left corner.

Creating a New State

Now we’ll use the States pane to create a new state. If the States pane isn’t visible, you can show it by selecting Window→States. In the States pane, you should see State1, the default state. All applications are considered to have at least one state, which is their default, or base state. You can create a new state based upon the base state by clicking the New State button in the States pane, as shown below.




Clicking the New State button brings up a dialog box asking for information about the new state, as shown below. You can give the state any name you want, but as always, it’s best to be descriptive. For this example, call the state stageRight because all this state will do is move the Button to the right.




Editing State Properties

To keep our code clean and readable, let’s edit the generically named State1 so it’s in keeping with our project. Depending on your OS, either right-click or Control-click the State1 item and select Edit. When the Edit State Properties dialog opens, change the name of the base state to stageLeft and check the “Start state” option, as shown below.




Modifying Layouts for States

Now that we have our states ready, we need to make them different from one another. To do this, we’ll change the Button control’s positioning properties for each state so that the Button is in the lower-left corner while the application recognizes stageLeft, and then it moves to the lower-right corner when the application recognizes stageRight. To change component properties for a state, first select the state you want to modify in Design mode’s State selection box, as shown below.




Note: Design mode gives you two ways to toggle between states while editing: the States pane and the State selection box.

Starting with stageLeft, give the Button control bottom and left constraint values of 50 and 50. Next, return to the State selection box and choose stageRight (alternatively, you can merely select stageRight in the States pane). With Design mode now recognizing edits for stageRight, give the button bottom and right constraint values of 50 and 50.

Warning: When modifying states in Design mode, pay close attention to the state you’re editing. If you don’t, you might unintentionally modify properties of a component for a different state, which could create a lot of frustration as you try to identify and correct the error, especially if you’ve proceeded deep into the edit history.

While you’re at it, notice something about the Properties pane; it’s informing you of the state you’re currently editing for. Just below the Properties tab in the top-left corner of the Properties pane, you should see:



This provides you with a helpful reminder if you have closed your States pane.




At this point, you can use either the States pane or the State selection box to toggle between stageLeft and stageRight while in Design mode. However, one more detail remains before you can run this demo and change states on the fly, and that’s an event trigger to change the state.

Changing the Current State with Script

For the last step, you need to jump into Source mode so we can write a function to test for and change the application’s currentState property. Once you jump into Source mode, you should see code similar to the example below, though likely less formatted.

States code created by Design mode

<?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"
    currentState="stageLeft">

<s:layout>
    <s:BasicLayout/>
</s:layout>

<s:states>
    <s:State name="stageLeft"/>
    <s:State name="stageRight"/>
</s:states>

<s:Button label="Button"
    left.stageLeft="50"
    bottom.stageLeft="50"
    bottom.stageRight="50"
    right.stageRight="50"/>

</s:Application>

The example above contains mostly unfamiliar code. In the attribute properties of the Application container, notice the currentState="stageLeft" assignment. This was set when we renamed the base state and set it to be the starting state. This is also the property we will test and reassign using script. Notice also the two MXML State declarations; their main purpose is making the states available to the application.

It's the Button control’s properties that are doing all the work. When multiple states are available to an application, you can prepend inline property assignments with a state name using dot notation (such as bottom.stageRight), which tells the compiler you want to apply that property to one particular state. So, after glancing over the Button properties created by Design mode, you can see the two sets of constraint assignments for stageLeft and stageRight.

Now that we’ve explained what you’re seeing, you should create the Script/CDATA block shown below in the usual place, just above the layout declaration.

A function to handle state change

<fx:Script>
    <![CDATA[
        private function changeState():void{
            if(this.currentState == "stageLeft"){
                this.currentState = "stageRight";
            }else{
                this.currentState = "stageLeft";
            }
        }
    ]]>
</fx:Script>

The purpose of the changeState() function is to switch the application’s currentState to its counterpart. The this keyword represents the instance of the class calling the function; here, this refers to the application itself. The function uses an If..Else block, and within the condition, the equality operator (==) tests the value of the currentState property. We built the function relative to stageLeft, but you could easily invert it to work off of stageRight instead.

To call the function, add an inline click listener to the Button that calls the changeState() function, as shown below.

Calling the changeState() function using inline script

<s:Button label="Button" click="changeState()"
    bottom.stageLeft="50"
    left.stageLeft="50"
    right.stageRight="50"
    bottom.stageRight="50"/>

Go ahead and run the project to see it at work. Beyond discussing the process of making and editing states, this application is pointless, but hopefully you have a working answer to the question “What are states?” and you’re more comfortable creating and managing states in a Flex application. In the next section, we consider a familiar application of states and how they might be applied to a login/registration form.