Friday, June 24, 2011

View State: Difference between Flex3 and Flex4 View State Implementation



In my previous blog( View State Implementation by Flex3 ), we have studied about the view state, its advantages and disadvantages and its implementation by Flex3. In this blog we will study about the new features added by Flex4 in View State and View State implementation by Flex4.
Changes in View State in Flex4:
·         A ll states must be declared just at the start of mxml components. E.g.
<s:states>
                                <s:State name="Login"/>
                                <s:State name="Register"/>
                                </s:states>
·         Following classes are of no longer use
AddChild, RemoveChild, SetProperty,  SetStyle, SetEventHandler

·         To change the label of any UIcomponent like button etc, no need to use setProperty. It can be done by dot operator. E.g.
<s:Button label="Login" id="login" label.Register="Register" />

·         Flex4 Added Following new attributes on UIComponents

Attribute Name
Description
includeIn
It specifies the list of view states where the component appears. This attribute takes a comma delimited list of view state names
excludeFrom
It specifies the list of view states where the component is omitted. This attribute takes a comma delimited list of view state names.

Please click on any advertisement if you like this blog.

Example:
Let us concentrate about the following picture:

Above pic1 and Pic2 represent two View States  “Login” and “Register” correspondingly. Below is the code for its implementation in Flex4. By comparing this code with similar implementation in the Flex3 in my previous post(  View State Implementation by Flex3 ), we can easily understand the difference between View State implementation by Flex3 and Flex4.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
      <s:layout>
         <s:VerticalLayout/>
    </s:layout>
    <s:states>
       <s:State name="Login"/>
      <s:State name="Register"/>
  </s:states>
  <s:Panel id="loginPanel" title="Login Form" title.Register="Registration Form" >       
        <s:VGroup paddingBottom="10" paddingTop="10" paddingRight="10" paddingLeft="10">
            <s:HGroup includeIn="Login,Register">
                  <s:Label  text="User Name:" />
                <s:TextInput id="userName"/>
            </s:HGroup>
            <s:HGroup includeIn="Login,Register">
                 <s:Label  text="Password  :"/>
                <s:TextInput id="password"/>
            </s:HGroup>
            <s:HGroup includeIn="Register">
                 <s:Label  text="Confirm      :" />
                 <s:TextInput id="confirm"/>
           </s:HGroup>        
           <s:HGroup>
               <s:Button label="Need To Register" id="needToRegister" includeIn="Login" click="currentState='Register'"/>
               <s:Button label="Return To Login" id="returnToLogin" includeIn="Register" click="currentState='Login'"/>
               <s:Button label="Login" id="login" label.Register="Register" />
            </s:HGroup>
        </s:VGroup>       
     </s:Panel>
</s:Application>

Please click on any advertisement if you like this blog.
So, from above coding and comparing it with same the same implementation in my previous post, we observer that in Flex4, the Flex3 classes for  View State like AddChild, RemoveChild has been replaced by UIComponent Attributes like includeIn and excludeFrom. So, we can conclude the difference between View State implementation by Flex3 and Flex4 as follows:
Flex3 View State
Flex4 View State
Flex3 uses verbose classes like AddChild and RemoveChild to add or remove any child component in any View State.
Flex4 discarded the verbose classes like AddChild and RemoveChild and provided two UIComponent Attributes like includeIn and excludeFrom to represent the list of View States that include or exclude the particular UIComponent correspondingly.
Flex3 uses function like setProperty() to change the property of any component when state changes. E.g
<mx:SetProperty target="{loginPanel}"
                name="title" value="Register"/>

Flex4 uses dot operator to change the property of any component when state changes. E.g
<s:Button label="Login" id="login" label.Register="Register" />
Flex3 uses setEventHandler class for changing the event handler on state change
Flex4 uses dot operator as shown above to change event handler on a component on state change.
In Flex3, View State is in Mx Architecture.
In Flex4, View State is present in both Spark architecture and Mx architecture both.

Please click on any advertisement if you like this blog.


2 comments:

  1. Thanks a lot Jitendra with this simple clear example i can now use user management in my flex application. Cheers.

    ReplyDelete

Please provide your precious comments and suggestion