Saturday, July 23, 2011

Transition with different Effects like Resize, Fade in View State in Flex



Transition in View State

In my previous blog, I have discussed about View State in both Flex3 and Flex4. Now, I am going to discuss the implementation of Transition and Effects while using View State. It is applicable in both Flex3 and Flex4.

Transition: It is the collection of one or more effects grouped together to play when view state change occurs. The trigger point for transitions is View State change. Whenever view state changes, any transition defined on those view states will start to play. Following, is the syntax for using the Transition:

<s:transitions>        
<s:Transition fromState="off" toState="A" autoReverse="true”/>
</s:transitions>

From syntax, it is visible that it consisted of 3 main attributes.
a)     fromState: it specifies the current state of our component. It takes the current state name.
b)     toState: It specifies the target state to which our current state is going to change. It takes the target state name.
c)     autoReverse: Suppose a transition is playing when state changes from state A to state B and before its completion, user changes the state from state B to State A and due to this a new transition from state B to State A becomes ready to start. Now what will happen? Whether the second transition will starts after the completion of first transition or the first transition will be stopped before its completion and second transition will start. This will be decided by the value of this attribute. If its value is True, the first transition will be stopped and second transition will start just from that same point. But, if the value is False, the first transition will be stopped, but the second transition will not start from just the same point. It will start from beginning.

All effects in a transition are grouped under either <s:Parallel> or <s:Sequence> tag as shown in following example.

<s:transitions>        
          <s:Transition fromState="off" toState="A" autoReverse="true">
                    <s:Parallel duration="1000">                    
                       <s:Resize target="{content}" heightTo="{cA.height}" />                     
                       <s:Fade targets="{cA}"/>                
                    </s:Parallel>            
          </s:Transition>
</s:transitions>

Please click on any advertisement if you like this blog.
                  
<s:Sequence>: The Sequence effect plays multiple child effects one after the other, in the order in which they are added.
<s:Parallel>: The Parallel effect plays multiple child effects at the same time.

In the above syntax, Resize and Fade classes are different effect classes.
Resize: It is used to change height and width of the component (specified by the target attribute).
Fade: It is used to blur or un blur the corresponding component. Following is the complete code.

Code for Implementing Transition in View State

<?xml version="1.0"?>
<!-- containers\intro\ContainerAddChild.mxml -->
<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" creationComplete="init()">
         
<fx:Script>    
     <![CDATA[      
          protected function handleStateChange(e:Event):void      
          {                
                    if ((e.target as ToggleButton).selected)
                    {          
                             this.currentState="open";        
                    }
                    else
                    {          
                             this.currentState="close";        
                    }      
          }   
    ]]>  
</fx:Script>
  
<s:states>    
          <s:State name="close" />     
          <s:State name="open" />  
</s:states>

Please click on any advertisement if you like this blog.
         
<s:transitions>       
          <s:Transition fromState="close" toState="open" autoReverse="true">
               <s:Parallel duration="1000">                    
                    <s:Resize target="{content}" heightTo="{innerContent.height}" />                    
                    <s:Fade targets="{innerContent}"/>                
              </s:Parallel>            
          </s:Transition>   
          <s:Transition fromState="open" toState="close" autoReverse="true"> 
               <s:Parallel duration="1000">                     
                    <s:Resize target="{content}" heightTo="0" />                    
                    <s:Fade targets="{innerContent}"/>                
               </s:Parallel>             
          </s:Transition>    
</s:transitions> 
   
<s:Group id="content" width="400" clipAndEnableScrolling="true">           
<s:BorderContainer id="innerContent" includeIn="open" backgroundColor="#00ff00">
                    <s:layout>
                             <s:HorizontalLayout/>
                    </s:layout>
                    <s:Group id="contentGroup" width="197">
                             <s:layout>
                                       <s:VerticalLayout/>
                             </s:layout>
                              <s:HGroup>
                                       <s:CheckBox/>
                                       <s:Label id="abc" text="http://jksnu.blogspot.com"/>
                             </s:HGroup>
                             <s:HGroup>
                                       <s:CheckBox/>
                                       <s:Label text="http://jksnu.blogspot.com"/>
                             </s:HGroup>
                             <s:HGroup>
                                       <s:CheckBox/>
                                       <s:Label text="http://jksnu.blogspot.com"/>
                             </s:HGroup>
                    </s:Group>
          </s:BorderContainer>    
</s:Group>
<s:HGroup paddingLeft="200">    
          <s:ToggleButton id="clickMe" label="Click Here" change="handleStateChange(event)"/>  
</s:HGroup>
</s:Application>


Please click on any advertisement if you like this blog.




This is the Flex4 specific implementation of Transition and Effects like Resize and Fade with View State. The notable point here is the use of “clipAndEnableScrolling” attribute in outermost container group just below the Transition tag. This attribute is used the keep all the children of outermost Group with in its boundary. If this attribute is made False or if it is removed, then all children of the outermost Group will be visible in background even after the minimizing the Group.

No comments:

Post a Comment

Please provide your precious comments and suggestion