Adobe Flex 2: Training from the Source

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.