Creating view states: Flex 3

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 two primary sections:

  • What are states? – This section introduces states. If you know what they are, skip this section.
  • Creating view states in FLEX 3 – This section will describe in detail how you can create and implement states in Flex 3.

Reader Focus: Flex 3 beginners.

What are states?

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 in Flex 3

Open Flex builder and create a new project by going to File -> New -> Flex project. In the window that follows give an appropriate name to the project. I called it LoginProject. Click ‘Finish’ to complete project creation.

In Flex Builder, you can create states in both code view and design view. This post will talk about both. Let’s first see how to create states in design view

Creating states in design view:

Go to Flex Builder design view by clicking on the design tab on top left of your code editor.

Now, 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 inside the panel to create login-like view as shown in the image.

Modify the Label control’s text properties to ‘Username’ and ‘Password’ from the Flex Properties panel on the left hand side as shown in the image above. Also, change the Label property of the Buttons to ‘Register’ and ‘Submit’ respectively.

This is one state of your application. You will see it in the states window. It is called the <base state>. You will also see ‘start’ written next to the state name in parentheses. This means that this is the view, application will display when you run it.

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 should contain 3 states:

  • Login state
  • Register state
  • Display state (if user is able to successfully login – I will not discuss creating this state in this post)

You already have your Login state (base state). You will now create the ‘register’ state.

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

You will see the following window:

Here you can choose which state to base this new state on. Any new state will, by default contain all components that its parent state (state it is based on) contains. Any subsequent changes in the base state will also be reflected in the new state. Developers using Flex 4 will notice a change here. To know more about that read Creating view states in Flex 4

You can also choose to set this state as the start state of the application by clicking on ‘Set as start state’ checkbox.

Name the new state ‘register’ (you can name it anything, ‘register’ is the name I used) and base it on the base state of the application. When you click Ok, the register state is added to the states window.

Try switching between the states in the ‘states’ window. You will see that the new state is the exact duplicate of its parent state. You need to now change the display of the new state to look like that in the image below.

You need to change a few properties and add some new controls to create a display like above.

This done, click on the <base state> state in the states window to switch to the base state. You will see that the login state display is intact and none of the changes made in the derived state will be seen in the parent state. If you change something in the parent state however, like add another control to its display, the control will appear in the child state.

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 current state of the Application.

So in Flex Builder design view, go to the login state (base state of the application) and select the ‘register’ button. In the properties panel locate ‘On click’ and in the corresponding text box type: currentState=’register’ as shown in the image below.

This means that when you run the application and click on this button the currentState of the application should become ‘register’

Now switch to the register state in the states window of Flex Builder and select the ‘register’ button. In the properties panel, you will see the On click property for this button has also been changed to “currenState=’register’ ”. This is expected as changes to the parent state will be reflected in the child state. However, you want the state of the application to change back to the login state when the ‘register’ button of the register state is clicked.

To do this, modify the ‘On click’ porperty to “ currenState= ‘ ’ ”. Assigning an empty string to the currentState variable changes the application state to <base state>.

Run the application by pressing <CTRL+F11>.

You will see that you can switch between the login and register states by clicking on the ‘register’ buttons.

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.

<mx:states>
<mx:State name=”register”>
<mx:RemoveChild target=”{button1}”/>
<mx:AddChild relativeTo=”{panel1}” position=”lastChild”>
<mx:SetProperty target=”{panel1}” name=”height” value=”410″/>


</mx:State>
</mx:states>

Any new state in Flex will be added to the states array. As you can see in the code snippet above, when we create a new state in the design view, a <mx:states> tag is created. This is an array of all new states (it does not include the base state) of the application. To create a new state inside the <mx:states> tag, start a <mx:State> tag as can be seen in the code snippet. Every state has a basedOn property which is the name of the parent state of this state. If it is not specified for a state it will have the base state as its parent.

The state that you have thus created is a duplicate of its parent state. You will now learn how to change the new state. Following are the changes that you would generally make in a state and how you implement them:

Add a component:

To do this, add a <mx:AddChild> mxml tag inside the State tag. The new component will become the child of the <mx:Addchild> tag. As an example to add a new TextInput to a panel (id=’panel1’) inside the state ‘register’ the code would be:

<mx:State name=”register”>

<mx:AddChild relativeTo=”{panel1}” position=”lastChild”>

<mx:TextInput x=”122″ y=”33″ width=”143″/>

</mx:AddChild>

</mx:State>

The relativeTo property specifies a preexisting component used as the reference point for adding the new component. If this property is not specified the parent of the view state becomes the relativeTo value. The position property specifies how the new component is placed with respect to the component in the relativeTo property. It (position) can have the following values:

  • before – The new component is placed before the relativeTo component.
  • after  – New component is placed after the relativeTo component
  • firstChild – New component becomes the first Child of the relativeTo component
  • lastChild – New component becomes the last child of the relativeTo component

Remove a component:

To do remove a component in a state use <mx:RemoveChild>. As an example, to remove a button (id=’button1’) from the state ‘register’, the code should be:

<mx:State name=”register”>
<mx:RemoveChild target=”{button3}”/>
</mx:State>

Change or set a component property

To do this, add a <mx:SetProperty> tag as a child of the State tag. As an example, to change the ‘height’ property of a panel (id=’panel1’) in the register state to the ‘value’ ‘410’, the code would be:

<mx:State name=”register”>
<mx:SetProperty target=”{panel1}” name=”height” value=”410″/>
</mx:State>

Change or set event handler

You can also use the <mx:SetEventHandler> mxml tag to set a new event handler for some event. While doing this, specify the target as the component on which event would be dispatched, the name as the event type and as the handler specify the name of the new event handler method. As an example, to add an event handler for a button (id=’button2’) in the ‘register’ state for the click event type, the code would be:

<mx:State name=”register”>
<mx:SetEventHandler target=”{button2}” name=”click” handler=”newFunc()”/>
</mx:State>

So this is how you create view states in Flex 3. If you think this is easy, you should read how easy it is for Flex 4.

Advertisements

4 Comments

  1. Nathan5.x said,

    June 3, 2010 at 9:49 am

    Using States for enterprise application development is not so good..

    If you starts using States, you may come to know the difficulties..

  2. gauravgr8 said,

    August 2, 2010 at 1:13 pm

    Hi Prashant,

    Nice post. I have a doubt regarding states “SetProperty”. I am trying to set the height property bindable with a bindable variable.
    Actually I need to set the height property of a state with the total height taken by the components in the state which is dynamic.

    Please help me in setting the dynamic height of a state.

    Thanks in advance

    • August 4, 2010 at 10:54 am

      I am not sure I understood the problem. But it seems like you are trying to change the height of the container as the height of its children increases. For this simple binding as you say should work.


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: