Adobe Flex component events

Question

I have a component I wrote that display a filename, a thumbnail, and has a button to click on to load/play the file. The component is databound to a repeater. How can I make it so the button event fires to the main application and tells it which file to play?

Answer 1

Figured it out (finally)

Custom Component

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" x="0" y="0" width="215" height="102" styleName="leftListItemPanel" backgroundColor="#ECECEC" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
    <![CDATA[
        [Bindable] public var Title:String = "";
        [Bindable] public var Description:String = "";
        [Bindable] public var Icon:String = ""; 
        [Bindable] public var FileID:String = "";
        private function viewClickHandler():void{
            dispatchEvent(new Event("viewClick", true));// bubble to parent
        }
    ]]>
</mx:Script>
<mx:Metadata>
    [Event(name="viewClick", type="flash.events.Event")]
</mx:Metadata>
<mx:Label x="11" y="9" text="{String(Title)}" styleName="listItemLabel"/>
<mx:TextArea x="11" y="25" height="36" width="170" backgroundAlpha="0.0" alpha="0.0" styleName="listItemDesc" wordWrap="true" editable="false" text="{String(Description)}"/>
<mx:Button x="20" y="65" label="View" click="viewClickHandler();" styleName="listItemButton" height="22" width="60"/>
<mx:LinkButton x="106" y="68" label="Details..." styleName="listItemLink" height="18"/>
<mx:HRule x="0" y="101" width="215"/>

The Repeater

<mx:Canvas id="pnlSpotlight" label="SPOTLIGHT" height="100%" width="100%" horizontalScrollPolicy="off">
    <mx:VBox width="100%" height="80%" paddingTop="2" paddingBottom="1"  verticalGap="1">
        <mx:Repeater id="rptrSpotlight" dataProvider="{aSpotlight}">            
            <sm:SmallCourseListItem 
                viewClick="PlayFile(event.currentTarget.getRepeaterItem().fileName);"
                Description="{rptrSpotlight.currentItem.fileDescription}"
                FileID = "{rptrRecentlyViewed.currentItem.fileName}"    
                Title="{rptrSpotlight.currentItem.fileTitle}" />
        </mx:Repeater>
    </mx:VBox>
</mx:Canvas>

Handling function

private function PlayFile(fileName:String):void{
    Alert.show(fileName.toString());
}

Answer 2

Hi,

On your custom component you can listen to the button click event and then generate a custom event that holds information about the file you want to play. You can then set the bubbles property to true on the event and dispatch the custom event from your custom component. The bubbles property will make your event float up the display list and reach your main application. Now on your main application you can listen to that event and play the correct file. Hope this helps.