Friday, June 24, 2011

Flex SDK 4.1 Installation Guide

To configure Flex4.1, we need to follow the following steps:
1.       Copy and Paste the Flex SDK4.1 from  http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexsdk
2.       Open Eclipse
3.       Go to Window -> Preferences -> Flex -> Installed Flex SDKs
4.       Click on Add Button on this new window
5.       Enter the Flex SDK location like “D:\jitendra\Software\flex_sdk_4.1.0\4.1.0” and put any flex sdk name like “Flex 4.1” and click Ok button
6.       Click Apply and Ok Button
7.       Create a flex project in Eclipse
8.       Right click on the project -> Properties -> Flex Compiler
9.       Change the required Flash Player Version to 10.0.0
10.   Click Apply and Ok button
11.   If after compiling your project, the folder “html-template” is blank, then delete this folder and copy and paste the attached “html-template” folder.
Clean and build your project.

Please click on any advertisement if you like the blog.

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.


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.