Creating view states: Flex 4

Introduction

This is a post to get you started with states in Flex. The post is part of a series: Flex 3 and Flex 4. It contains three primary sections:

  • What are states? – This section introduces states. If you know what they are, skip this section.
  • Creating view states: FLEX 4 – In this section, you will learn how to create states in Flex 4.

Focus:

Developers transitioning to Flex 4 and

Flex 4 beginners, who haven’t worked with Flex 3.

What are states?

Computer Science graduates can relate the concept of a state to a Definite Finite Automata.

In general, a state is understood as a situation or a condition of an object. In Flex, a state is one view of the Application (other components can also have states but in this post I will discuss Application states).

Consider for example an application which lets you choose from many phones to select one for yourself. Such an application can have two states for the phone display. One state displays minimal details about the phone. If the user is interested in the phone he can click on the display to go another display state containing more details.

Creating view states: Flex 4

The procedure for creating view states has been made much simpler in Flex 4. For working with Flex 4 you would use the Flash Builder 4 IDE (Flash Builder also comes with the earlier SDK, Flex 3 should you want to continue working with Flex 3).

As in the earlier section for Flex 3, I will discuss creating view states in both design view and code view. For design view, the procedure is very similar to how you would do it in Flex 3.

Creating states in design view:

Create a new project in Flash Builder 4 (same as Flex 3) and switch to the design view. Here, find the components window near the bottom left of the screen and locate the Panel container in the layout subsection. Drag and drop it over the application. Next find the TextInput, Label and Button controls and drag and drop them over the panel to create login-like view as shown in the image below.

Modify the Label control’s text properties to ‘Username’ and ‘Password’. Also, change the label property of the Buttons to ‘Register’ and ‘Submit’ respectively.

This is your login state. As yet, it has no explicit name because it is the only display state of your application. You can see the state in the states window. It is called <state1>.

If you can’t see the states window, you can open it by going to the menu bar and choosing window > States

You are creating a very basic login application which would generally contain 3 states:

  • Login state
  • Register state
  • Display state (if user is able to successful login – we will not create this state in this post)

To create a new state, right click on <State1> in the states window >New

You will see the following window:

Here is a definite difference between Flex 3 and Flex 4.

<Flex beginners and developers who haven’t worked on Flex 3 need not read this. They should move on to the next section>

When you try to create a new state in Flex 3, it has to be based on an existing state. What this means is that the new state (or the child state) will inherit its display from the older state (or parent state). Any change made in the parent state will be seen in the child state also. As an example, if a new Button control is added in the parent state, it will also be seen in the child state when the developer switches to it. Removing a control will have the same effect.

In Flex 4, new states are not based on earlier states. They can either be a duplicate of an older state or a blank state.

Changes to

A state that is made using duplicating an existing state in Flex 4 has thereafter no relation to the earlier state. Any changes in the earlier state, would lead to no change in the new state.

In the New state window, name the new state ‘register’ (you can name it anything, ‘register’ is the name I used). When you click Ok, a new state is created and added to the states window. You would, by default have the same display in the new state as in the login state. Change the display so that it looks something like the image below (Adding controls, changing properties … you know the drill).

Switch back to state1 (the default login state) by clicking on State1 in the states window. You will see that the login panel display is still intact. You now have two state displays. Next task is to switch between them.

Switching between states:

To switch between states you need to change the value of the currentState global variable. This variable contains the name of the currentState of the Application.

So in your login state (State1), select the ‘register’ button. In the properties window (usually below the states window) locate the On click property and in the corresponding text box write: currentState=’register’ as shown in the image.

This means that when you run the application and click on this button the view will change to display the register state.

Now switch to the register state in the states window and select the ‘register’ button. You want the state of the application to change back to the login state when the ‘register’ button of the register state is clicked. So similar to the login state, select the register button and in the properties window set the ‘On click’ property to “currentState= ‘State1’ ”

Run the application, and click on the buttons to verify that you can switch between the two states.

Creating view states in source view:

Now that you have created an application with two states in the design view, let’s see how to do the same in source view. Go back to the source view in Flex builder by clicking on the ‘source’ tab on the top left of the design editor. You will see that code has been generated for your actions in the design view. Let’s see the States code.

<s:states>
<s:State name=”State1″/>
<s:State name=”register”/>
</s:states>

You would also see code generated for the components that you have dropped in the two states. Here is a code snippet of my code:

<s:Panel x=”318″ y=”139″ width=”285″ height=”203″ title=”Login” height.register=”379″ y.register=”76″ width.register=”389″ x.register=”250″ title.register=”Register”>
<s:Label text=”Display name” x=”45″ y=”123″ includeIn=”register”/>
<s:Label x=”24″ y=”77″ text=”Password” x.register=”45″ y.register=”82″ text.register=”Second Name”/>


</s:Panel>

There is a significant difference in the code generated for Flex 3 and Flex 4.

<Flex beginners and developers who haven’t worked on Flex 3 need not read this. They should move on to the next section>

Here are the primary differences between state creation in Flex 3 and state creation in Flex 4 in the code view:

Flex 3 Flex 4
There is always a base state of the application (represented by empty string ‘’ ), which does not become part of the <mx:states> tag All states including the first state (there is no base state here) of the application become part of the <mx:states> state array
Elements have to be explicitly added and removed using the AddChild and RemoveChild mxml tags In Flex 4, developers can Use the includeIn and excludeFrom properties to add or remove a component from a state.

Modifying / Adding a component’s properties, styles or event handler is done using mxml tags nested inside the State tag. All this is done inline in the components declaration

To add the first new state to the Application (in this case the ‘register’ state), you have to add two State tags to the states array. One of them is the new state obviously, but you also give a name to the existing state. As an example, for adding a new state with the name ‘register’ to your application, you would add

<s:states>
<s:State name=”State1″/>
<s:State name=”register”/>
</s:states>

All elements that you have defined before adding the states tag are now available in both of the states. You can keep adding states in the states array. All of them will contain the same display (which is the default display of the application). Now to make a component appear in any one or more specific states use the includeIn property of the component. As an example to create a Button instance that appears only in the register state, the  code would be:

<s:Button includeIn=”register”/>

You can specify more than one state in the includeIn property by separating state names with a comma delimiter. Hypothetically, if your application contained a third state called ‘ErrorState’ and you wanted a button to appear only in the other two states (‘State1’ and ‘register’) and not in the ErrorState, the code would be:

<s:Button includeIn=”State1,register” /> Code statement 1

If the includeIn property is not specified for a component, it will appear in all states.

You can also use the excludeFrom property to specify states in which the component will not appear. As an example, we could also have created the above button by:

<s:Button excludeFrom=”ErrorState” /> Code statement 2

Code statement 1 and 2 are equivalent for an application containing three states: ‘State1’, ‘register’ and ‘ErrorState’.

Changing component properties

You may want the height of the Panel to increase in the register state as it contains more content than the login panel. How to make this change in the code view?

In Flex 4, component properties for different states can be specified through <propertyName.stateName>. As an example, for creating a panel which has a height of 200 in the login state (State1) and a height of 400 in the register state, the code would be:

<s:Panel height.state1=”200″ height.register=”400″/>

If you don’t specify a state name after the property name then that becomes the default value of the property in all states that have no explicit value specified for them.

<s:Panel height.state1=”200″ height =”400″/>

In the above code, the panel will have a height of 400 in all states but State1.

In my opinion, Flex 4 provides a much cleaner approach to creating states and is the clear SDK choice for developers starting with States. You may also want to learn about transitions between states for Flex 3 and Flex 4.

Advertisements

2 Comments

  1. Todd Hanson said,

    June 30, 2010 at 11:12 pm

    How can you determine in Flex 4 what the current state is during runtime?

  2. July 1, 2010 at 10:18 am

    @Todd

    You can find out using the ‘currentState’ variable.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: