Adding Effects to View States


In this task, you will add a transition that will be applied when a view state within a component is displayed. In this case, you will add the transition when the user rolls over the food item to display the details.

1.

Open GroceryDetail.mxml in views/ecomm.

The file is located in your flexGrocer/views/ecomm directory. If you skipped Lesson 18, when this version was created, you can open this file from Lesson22/start/views/ecomm and save it in your flexGrocer/views/ecomm directory.

This is the component that contains all the view states that are displayed when the user rolls over a food item.

2.

Below the <mx:Script> tag, add an <mx:transitions> tag block. Inside of that tag, nest an <mx:Transition> tag block. Assign the <mx:Transition> tag an id of foodTransition. Specify the fromState attribute as an asterisk (*) and the toState attribute as an asterisk (*). Your code should appear as follows:

<mx:transitions>    <mx:Transition       fromState="*"      toState="*">    </mx:Transition> </mx:transitions> 


The fromState is simply a string that specifies the view state that you are changing from when the transition is applied. In this case, you specify an asterisk (*) which means any view state. The toState is a string that specifies the view state that you are changing to when the transition is applied. In this case, you specify an asterisk (*), which means any view state.

3.

Within the <mx:Transition> tag block, nest an <mx:WipeRight> effect and specify the duration property as 500. Also, add the target to be bound to foodBox.

<mx:transitions>    <mx:Transition        fromState="*"       toState="*">         <mx:WipeRight duration="500" target="{foodBox}"/>    </mx:Transition> </mx:transitions> 


Remember that the <mx:Transition> tag defines the effects that make up a transition. You can specify the duration of the WipeRight effect so the text will gradually "roll in" when the end user rolls over the appropriate grocery item.

4.

Locate the <mx:VBox> tag in the <mx:AddChild> tag in the expanded view state. Give this VBox an id set equal to foodBox.

<mx:VBox     width="100%"    x="200"    styleName="standardBlack">    ... </mx:VBox> 


This is the target you bound to in the WipeRight effect.

5.

Run the EComm application. Select a category from the horizontal list and roll over a grocery item.

When you roll over each item, you should see the item description and other item information displayed from left to right.




Adobe Flex 2.Training from the Source
Adobe Flex 2: Training from the Source
ISBN: 032142316X
EAN: 2147483647
Year: 2006
Pages: 225

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net