Declaring Events for a Component

Every component needs to explicitly declare the events it can dispatch. Components that are subclasses of other components can also dispatch any events that its superclasses have declared. In Flex, events can be declared with metadata tags. This is done with the [Event] metadata tag, which is used to declare the event publicly so that the MXML compiler recognizes it. In MXML, an event declaration looks like this:

<mx:Metadata> [Event(name="catDataLoaded",type="flash.events.Event")] </mx:Metadata> 

The <mx:Metadata> tag declares that the child elements are all metadata. Next, any metadata is declared. Notice that the tags are enclosed within square bracket. Details for these tags are defined within parentheses. In this example, you can see a catDataLoaded event declared. This event will be an instance of the flash.events.Event class. In this exercise, you will fix the error from the previous exercise by declaring a custom event for the CategorizedProductManager component.

1.	Open CategorizedProductManager.mxml from your flexGrocer/managers directory. Alternately, you can open CategorizedProductManager_dispatch.mxml from Lesson09/intermediate/ and save it as CategorizedProductManager.mxml in your flexGrocer/managers directory.
2.	Before the <mx:Script> block, add a metadata block to declare the catDataLoaded event. <mx:Metadata> [Event(name="catDataLoaded")] </mx:Metadata> Because the type has been omitted, the event must be an instance of the flash.events. Event class.
3.	Save CategorizedProductManager.mxml. Run the DataEntry application. The errors should now be gone, and the DataEntry application should run as it always did.
4.	Open EComm.mxml from your flexGrocer directory.
5.	Find the instantiation of the CategorizedProductManager component. Listen for the catDataLoadedEvent and call the categorizedProductDataLoaded() method to handle the event. <m:CategorizedProductManager catDataLoaded="categorizedProductDataLoaded()" />
6.	Open ecomm.as from your flexGrocer/as directory. If you prefer, you can open this file from your Lesson09/start/as directory, and save it in your flexGrocer/as directory. If you recall, in the previous lesson, you moved the ActionScript for EComm.mxml into an external script file.
7.	Find the categorizedProductDataLoaded() method. Make the function private and remove the argument from it. Change the line setting of the categories property so that it's set to an ArrayCollection based on catProds.getCats() instead of on the argument you removed. private function categorizedProductDataLoaded():void{ categories=new ArrayCollection(catProds.getCats()); }
8.	Save both ecomm.as and EComm.mxml. Run the EComm application. It should continue to run as it did at the end of the last lesson, although now uses a better, loosely coupled architecture.