For Flex 2.0 Beginners - Use the mx:States and mx:ViewStack Tags To Change The Application's View

Introduction:

As a new Flex 2.0 developer coming from using HTML, JavaScript, CSS, DHTML, and ColdFusion, how to design a Flex application was confusing. HTML, even with AJAX, is primarily a page-oriented environment. If I needed to significantly change what the users sees, I would usually have the user go to a new web page. Most HTML-based applications are a series of connected web pages.

In Flex, there is not the concept of a page. Rather, Flex has several different ways for you change the "view" of your application. In this brief tutorial for beginners, I'll introduce two Flex controls: mx:States and mx:ViewStack. These two controls can be used together to change what your users see on screen in your Flex application.

Though, the Flex 2.0 Developer's Guide contains several examples of how to use mx:States and mx:ViewStack, there are not many examples of how to use the two controls together. I think in a more complex Flex application, you're likely to use both controls.

Please note, I'm a Flex 2.0 beginner also. I've built some Flex 2.0 applications and have a good understanding of how to use most of the Flex controls and how to connect a Flex application to a ColdFusion backend. But much of my Flex 2.0 knowledge comes either from reading the documentation or discovery learning through trial-and-error. If you have a better way to use these controls, please post a comment with a link to some good examples. My primary goal in my blog is to help myself and others learn how to use Flex and ColdFusion.

References:

Flex 2.0 Developer's Guide, Chapter 27, Using View States

Flex 2.0 Developer's Guide, Using Transitions

Flex 2.0 Developer's Guide, Chapter 16, ViewStack Navigator Container

Flex 2.0 Developer's Guide, Using Behaviors

Flex 2.0 Language Reference, SetEventHandler

You can view my example application here (right click to read the source code). I've commented the source code, so between the comments and the explanations below you should be able to follow what I did.

Changing the State

My application starts with a simple login form. However, if the user is not already registered, I need a way for him to register and then login. Since the information on the registration form includes what is on the login form, I just need to make some minor changes and additions to the login form to change its "state" to a registration form.

The mx:States tag can be used to add or remove controls from a "base" state. You can also change the properties of a control. In my example, the base state is shown when the user first launches the application. The base state is a simple login form. The user can enter his username and password, press the login button, and the program will log him in. However, if the user needs to register, I've provided a Need to Register link button. When the user clicks on that button, I change the "state" of the panel that is holding the login form.

The click event of the registerLink linkButton calls function changeState. In function changeState, I tell the application to set the currentState equal to register. Under the mx:States tag I've created an mx:State with an id of register. Inside this mx:state tag, I change the height of the loginPanel to 300 by using the mx:SetProperty tag. I then add some additional controls using the mx:AddChild tag. I also change the label property of the loginButton to have the value of Register and also change the loginButton's click event handler to be a different function (see mx:SetEventHandler). All of these changes will be made to the base state (the base state is the view of my application that appears when the program is first launched).

So when the user clicks on the Need to Register link, all the commands defined by the tags in my register state will be executed. In addition to defining this new state, I've defined an effect to occur when the application transitions to the register state. Using the mx:transition tag, I defined the Wipe Down effect to occur whenever the state of my application changes from the base state to the register state.

I used the mx:states tag to make relatively minor changes to the application's appearance. If I need to make a major change, for example, all new controls, then I've found it easier to use the ViewStack tag. In my example, when the user logs in, I need to make a complete change to the view.

Changing The View

After the user successfully logs in, I want to show the user a completely new view of my application. This view would have new controls, layout, etc and would be completely different from the login form that is my base state. Though I could use a new mx:state tag to achieve this new look, using the ViewStack container is simpler.

mx:ViewStack is a navigator container. Views of your application can be "stacked" on top of each other and the user can only see and interact with the top view on the stack. After you specify an mx:ViewStack tag, a view will be created for each child container. In my example, I have defined three mx:panel tags: loginPanel, mainApplication, and secondaryApplication. So my mx:ViewStack has three child containers. The default child displayed will be the first one, loginPanel, which is also the view for my base state.

You can determine when to change the view that is on the top. In my example, after the user successfully logs in, I want a completely new view. So in function login, I specify that the ViewStack control (named appViews) should make the selected child named mainApplication visible (move it to the top of the stack). On the mainApplication panel, I would have all my new controls. In my example, I use buttons to give the user the ability to change the view to the secondaryApplication panel or to logout and return to the loginPanel.

I've also defined some effects (behaviors) to play when these panels become visible or hidden. You can specify an effect to occur by using the showEffect and hideEffect attributes of the mx:panel.

Summary:

Using a combination of mx:States and mx:ViewStack can provide you with powerful tools to change the "view" of your application. My example is simple, but by studying the references above you can use these two Flex controls together to create complex Flex applications. I hope this brief tutorial and my example will help you understand better how to make the transition from designing an HTML page-based application to designing a Flex 2.0 application.