Friday, June 24, 2011

View State: Difference between Flex3 and Flex4 View State Implementation



  • View state: It defines a particular view of a component.
  • View states: It is a list of different views of a component. 
  • State Transition: The process of changing from one state to other state on some event is known as state transition. E.g.

Let us concentrate about the following picture:


  


Both the figure represent the two different views of a single .mxml component. If the corresponding mxml file is run, the Login form will be displayed first, so, it is the Base View State and the Register form is the Rich View State. If the user clicks on the “Need to Register?” button in the Login Form, the state will be changed from Login State to Register Form State. And just the reverse happens if the user clicks on the “Return to Login” button on Register Form State. So, here, on the basis on user input, the state of the component changes which is called as the State Transition.

Please click on any advertisement if you like this blog.
View State Type:
View states are consisted on two groups of view states.
Base View State: This is the default view of the component. To create a view state, we have to define a base view state. E.g. Login State in Pic 1 is the Base View State.
Rich View State: these are the states other than the Base View State. These states represent the modification in states as per user request. E.g. Registration State in Pic 2 is the Rich View State.

Benefits:
  •      View states let you vary the content and appearance of a component or application, typically in response to a user action. When changing the view state, you can change the value of a property or style, change an event handler, or change the parent of a component.
  • When using view states, you can easily share components across multiple view states by defining the component once, and then including it in each view state.
  • Different effects associated with View State Transitions make UI side more beautiful.

Disadvantages:
As every coin has both sides like Head and Tale, similarly, View State have some disadvantages also.
  • Less Readability: if any view state consisted of about 5 to 10 Rich View States, then its coding will look like very complex and there for readability will decrease.
  • More Compile Time: if the view state consisted of more 5 to 10 states, its will take more time to compile.


Please click on any advertisement if you like this blog.




View State Implementation in Flex3
Now we are going to discuss the ways of implementation of View State in Flex3. In Flex3, following classes are needed.
Class Name
Represented By
Description
AddChild
<mx:AddChild>
Add new child component
RemoveChild
<mx:RemoveChild>
Remove a child component
SetEventHandler
<mx:SetEventHandler>
Adds an event handler as part of a change of view state
SetProperty
<mx:SetProperty >
Sets a component property like changing the label of a button, changing the dimensions of any component
SetStyle
<mx:SetStyle>
Sets a style property on a component

Please click on any advertisement if you like this blog.
Example of View State in Flex3:
Following code gives an implementation of the above classes for building the View State.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="absolute“ >
<!—Rich View State-->
 <mx:states>
        <mx:State name="Register">
            <!-- Add a TextInput control to the form. -->          
            <mx:AddChild relativeTo="{loginForm}"   position="lastChild">
                <mx:FormItem id="confirm" label="Confirm:">
                    <mx:TextInput/>
                </mx:FormItem>
            </mx:AddChild>           
            <!-- Set properties on the Panel container and Button control.-->
            <mx:SetProperty target="{loginPanel}"   name="title" value="Register"/>
            <mx:SetProperty target="{loginButton}"   name="label" value="Register"/>
            <!-- Remove the existing LinkButton control.-->           
            <mx:RemoveChild target="{registerLink}"/>           
            <!-- Add a new LinkButton control to change view state back to the login form.-->         
            <mx:AddChild relativeTo="{spacer1}" position="before">
                <mx:LinkButton label="Return to Login"  click="currentState=‘ '"/>
            </mx:AddChild>
        </mx:State>
    </mx:states>
<!—Base View State-->
<mx:Panel id="loginPanel"   title="Login"   horizontalScrollPolicy="off"   verticalScrollPolicy="off">       
        <mx:Form id="loginForm">                                        
            <mx:FormItem label="Username:">
                <mx:TextInput/>
            </mx:FormItem>
            <mx:FormItem label="Password:">
                <mx:TextInput/>
            </mx:FormItem>
        </mx:Form>       
        <mx:ControlBar>
            <!-- Use the LinkButton to change to the Register view state.-->                  
            <mx:LinkButton id="registerLink"   label="Need to Register?"               click="currentState='Register'"/>
            <mx:Spacer width="100%" id="spacer1"/>
            <mx:Button label="Login" id="loginButton"/>
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>
The above code is the implementation of the view state discussed above with the pic1 and pic2. In the above code, the Rich View State like “Register” is defined with <mx:State name="Register">  tag. There will be as many number of <mx:State></mx:State> tags  as are the Rich View States. From the above code we can also see the use of different classes like AddChild, RemoveChild, SetStyle etc.

No comments:

Post a Comment

Please provide your precious comments and suggestion