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

It’s coming!

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.