Implementing Effects on a Component

In this task, you will add a dissolve behavior that smoothes the transition when the user clicks the grocery category to display the list of items in that category.


Be sure to go back to work with your regular FlexGrocer project, not the FlexGrocer-FDS project. Also, be sure that ColdFusion is running in a console window as application data is now dynamically retrieved. As a reminder, go to the cfusionFlexTFS/bin folder in a console window and enter jrun start cfusion.

You will be working with the code you finished in Lesson 18, "Charting Data," which is what is in your FlexGrocer project.


Open EComm.mxml and run the application. Click a grocery category.

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

Notice that the transition from the home page to the list of grocery products is immediate and appears rather jerky. You will add a dissolve behavior that will greatly improve the user experience.


In EComm.mxml, directly below the <mx:CurrencyFormatter> tag, add an <mx:Dissolve> tag, assign it an id of bodyDissolve, and set the duration attribute to 2000, as follows:

<mx:Dissolve  duration="2000"/> 

This creates an effect that you can later reference from a trigger on a component. As you learned earlier, the triggers that you can use are focusInEffect, focusOutEffect, hideEffect, mouseDownEffect, mouseUpEffect, rolloutEffect, rolloverEffect, and showEffect.


Locate the invocation of the custom FoodList component that you built earlier. Add a showEffect TRigger and set up a binding to the bodyDissolve behavior you created in the last step. Your final invocation of the <mx:FoodList> component should look as follows:

<v:FoodList     width="100%" height="100%"    prodByCategory="{prodByCategory}"    itemAdded="addToCart(event.product)"    showEffect="{bodyDissolve}"/> 

FoodList is where the list of grocery items are displayed based upon the category the user clicks. You want to apply a dissolve behavior here that will create a better transition for the user. The FoodList component changes when the user clicks an item in the category. You want the dissolve effect to display when the FoodList component changes. The showEffect trigger is fired only when the visible property of a component is changed. In this case, you need to manually set the visible property.


Open up the file in the as folder and locate the displayProdByCategory() method. Modify the method so the first line sets the visible property of the prodTile container to false. Then set the visible property of the prodTile container to true as the last line of the method. Your final displayProdByCategory() function should look as follows:

private function displayProdByCategory(event:CategoryEvent):void{    prodTile.visible=false;    if ( != null ){      var prodArray:Array=catProds.getProdsForCat(;      prodByCategory=new ArrayCollection(prodArray);    }else{      prodByCategory=new ArrayCollection();    }    prodTile.visible=true; } 

By manually setting the visible property of the FoodList componentwhich has an id of prodTilefrom false to true, you will fire the showEffect trigger you added in the last step. This will cause the dissolve effect to be used each time a new category is selected, which is exactly the behavior you want!


Run the EComm application.

You should see the dissolve effect display when you click a category.

Adobe Flex 2.Training from the Source
Adobe Flex 2: Training from the Source
ISBN: 032142316X
EAN: 2147483647
Year: 2006
Pages: 225 © 2008-2017.
If you may any questions please contact us: