Monday, June 04, 2007

Flash for Java Programmers: Lesson 3 - View States and switching views

Steps on learning to develop Flash, with a Java developer focus...

This is lesson 3 in my series of posts on what I learn about developing filthy rich flash apps using flex2. The other lessons are:
In this post I will show how to control which "view" to show in a big flex2 application. I will be using the ViewStack component and what is called "View States" to nicely shift the UI state.

The Problem
As a Java web developer, used to build websites with HTML/JS (and no Ajax), there is no problem in switching from one view (page) of the application to another. It is simply a link or a button, and the server returns a completely new page. In flash on the other hand, one typically serve one big flash which is the complete UI of the application, and logic in the UI then takes care of which "view" to show at a given time.

Basically, with flash, we are met with some of the same challenges that for instance Swing developers have.

The Solution
Flex2 has builtin support for multiple views in the ViewStack container component. In the example flash just below, I show how to switch between a login screen (one view) and the application main view (another view):






When the "Login" button is clicked, the current view state is changed, which makes the UI change too. It switches to another view in the viewstack. Clicking "Logout" in the main view switches the state back. Let's take a look at the MXML code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="currentState = 'Anonymous';">
<mx:states>
<mx:State name="Anonymous">
<mx:SetProperty target="{views}" name="selectedChild" value="{loginView}"/>
</mx:State>
<mx:State name="Authenticated">
<mx:SetProperty target="{views}" name="selectedChild" value="{mainView}"/>
</mx:State>
</mx:states>
<mx:Fade id="fader"/>
<mx:ViewStack id="views" width="300" height="150">
<mx:Panel id="loginView" title="Login View" showEffect="fader" paddingTop="5" paddingLeft="5">
<mx:Grid>
<mx:GridRow>
<mx:GridItem><mx:Label text="Username"/></mx:GridItem>
<mx:GridItem><mx:TextInput /></mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem><mx:Label text="Password"/></mx:GridItem>
<mx:GridItem><mx:TextInput displayAsPassword="true"/></mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem colSpan="2"><mx:Button label="Login" click="currentState = 'Authenticated';"/></mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Panel>
<mx:Panel id="mainView" title="Application Main View" showEffect="fader">
<mx:Label text="We are now in main view"/>
<mx:Button label="Log out" click="currentState = 'Anonymous';"/>
</mx:Panel>
</mx:ViewStack>
</mx:Application>
Some key pointer to the above MXML code are:
  • The "mx:states" and "mx:State" elements define named view states, that contain actions that trigger when state shift. The actions are simple here: Set the "selectedChild" property of the ViewStack component.
  • A ViewStack contains a view for each container in its children. Only one container in the ViewStack is visible at a time. Changing visible view can be done by setting "selectedChild".
  • The top-level "Application" element uses the "creationComplete" event, which triggers at application startup, to initially set view state to the "Anonymous" state, hereby showing the login dialog pr. default.
  • Clicking the "Login" button triggers assignment of the "Authenticated" string to "currentState" which again makes Flash runtime trigger the actions assigned to the view state with that name. This sets the visible view in the stack to "mainView".
All nice and easy!

Downloading the source
I have zipped up the sources. It can be downloaded from here. Ready to be build with maven.

No comments: