JaiswalTraining

Get the online training        


Get Best Tutorial on all major programing language


Corejava Servlet Jsp  Php  Hibernate  Ajax Web Service   Ejb2.1 Ejb3.0 Struts Struts2  JPA Spring Ibatis   JSF    JSF2.0  CoreJavaDesignPattern    Jquery  Flex J2EE-Design-Patterns  Jboss7  Maven  Contact Me                                                                                                                                                                        
            IGNOU SMU PTU Project                                           Training                                                                                                                              
              

Contact Us  0091- 9210721663         jaiswaltraining@gmail.com




Corejava
Servlet
Jsp
Php
Hibernate
Ajax
Web Service
Ejb2.1
Ejb3.0
Struts  
Struts2
JPA
Spring
Ibatis
JSF
JSF2.0
CoreJavaDesignPattern
Jquery
Flex
J2EE-Design-Patterns
Jboss7
Maven







View states

Overview
  • An RIA’s UI  consists of different views
  • Views can take on different visual appearances and representations depending
    on the conditions in which they’re presented.
What is view state?
  • A view state can be defined as a particular visual appearance, behavior,
    and representation for a view (UI).
  • Views have at least one state, which is known as the default or base state of the view.
  •  You can define any number of additional states depending on your requirements.
  • View states can be used for many other scenarios, such as these:
    • A search view that shows results in a different state than the search form
    • A layout-personalization view that lets users customize their application’s appearance
      by defining different layouts as different states
    • A view that shows user data in one state, then allows editing in different states

Using view state in flex
  • In Flex, each application, custom component, or view has at least one state, which is
    known as the base or default view state.
  •  You can define additional states by setting the value of the states property.
  • The base or default state is the original state of the components you code into your application. 
  • Other states modify that original state by setting properties or removing or
    adding child objects.
View states-related properties

  • Views also automatically send out events  to notify listening components that the
    state of the view has changed, as well as before the view state changes.
View state-related events


Different view state classes in the mx.states package
  • State (<mx:State />)
    • Defines a view state. 
    • This class has an overrides instance property that expects an array of objects that
      implement the mx.states.IOverride  interface. 
  • AddChild (<mx:AddChild />)
    • Adds a component to the view as a part of the view
      state change. 
    • Both view and component should be either the implementer of the
      mx.core.IUIComponent interface or a subclass of mx.core.UIComponent.
    •  Most Flex components are subclasses of mx.core.UIComponent.
  • RemoveChild (<mx:RemoveChild />)
    • Removes a component from the view as part of a view
      state change. 
    • Both view and component should be either the implementer of the mx.core.IUIComponent
       interface or a subclass of mx.core.UIComponent.
  • SetProperty (<mx:SetProperty />)
    • Sets or overrides an object property value, which is only effective in the current view state. 
  • SetStyle <mx:SetStyle />)
    • Sets the value of a component’s style.
    •  This value is only effective in the current view state.
  • SetEventHandler(mx:SetEventHandler />)
    • This function lets you make an event handler change  that is active
      only for the current view state.
    •  This allows you to set custom actions on elements that may
      be defined only for specific view states.
  • Transition
    • Lets you define a transition effect that should happen
      when changing from one view state to another
Example:View-state example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle"
    width="340" height="250"\>
    <!-- The states property of the Application class 
         defines the view states. -->
    <mx:states>
        
        <!-- 
            The "Register" state is based on the base state. 
            All states are based on the base state by default
            so you can leave out the basedOn property. 
        -->
        <mx:State name="Register" basedOn="">

            <!-- Add a FormItem component to the form. -->
            <mx:AddChild 
                relativeTo="{loginForm}" 
                position="lastChild" 
                creationPolicy="all"
            >

                <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>

    <mx:Panel 
        title="Login" id="loginPanel"
        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 control to change to
            the Register view state. 
        -->
        <mx:LinkButton 
            label="Need to Register?" id="registerLink"
            click="currentState='Register'"
        />

        <mx:Spacer width="100%" id="spacer1"/>
        <mx:Button label="Login" id="loginButton"/>
    </mx:ControlBar>
  </mx:Panel>
</mx:Application>

Output:-
  •  Base view state of the login form

  • Request resister view state, in which  some controls have been
    removed and others have been modified

Download Code
  • The changes are applied in the following order when the view’s state is changed to
    Need to Register (currentState = 'Register'):
    • The panel’s title is changed to Register.
    • The button’s label is changed to Register.
    • The label associated with "Need to Register" is replaced with "Return to Login".
    • The form item related to the "Confirm" password input field (confirm) is added.