custom events from custom item renderer in flex

In my previous post "Custom Item Renderer for Tree Control in Flex" I demonstrated how you can modify the default flex Tree control appearance. Now with the appearance changed we need to modify the default behavior of the tree control as well. Suppose you want to throw some custom event from the custom item renderer. One example will be to bubble a click event to the parent application from the custom item renderer telling that it was generated from the customized object we added in the item renderer i.e. in our case an image which we added to the default tree nodes.


For example i want something to happen when a user click on the image (the blue question mark) and not when he clicks on the node.
If you look at the code in method createChildren()

override protected function createChildren():void

{

super.createChildren();

customItem=new Image();

customItem.source = 'Images/helpIcon.jpg';

customItem.addEventListener(MouseEvent.CLICK,helpEvent,true);

this.addChild(customItem);

}

createChildren() is the method responsible for adding the image control with the tree nodes, so what we are doing is that we are adding an event listener with this code
customItem.addEventListener(MouseEvent.CLICK,helpEvent,true);
and telling the compiler to run the method helpEvent() when the image control is clicked.
In the method we will fire an actual custom event, please see the code below for the method firing the custom event.

private function helpEvent(event:Event):void

{

var e:FormatHelpEvent = new FormatHelpEvent("formatHelp");

dispatchEvent(e);

}

Now what will happen is that if a user clicks on the image control the runtime environment will call this method and this method will dispatch an event of the type "formatHelp". Now if the application has subscribed to this event exposed by our custom control then the application will be able to capture this click event on the image. You can subscribe to the "formatHelp" event by this line of code in the declaration of the component.

creationComplete="myTree.addEventListener('formatHelp',showFormatHelp,true,0,true)"

With this code we are subscribing the method showFormatHelp() to be called when our custom component fires a "formatHelp" event. In the method showFormatHelp() you can do anything you want in response when the user clicks on the image against every node.

private function showFormatHelp(event:Event):void
{
var node:XML = XML(myTree.selectedItem);

Alert.show(node.@label);

}

Since the click on the image will also select the tree node so know at runtime which node is selected and you can perform accordingly.

[EDIT] Thank you "MOI" for reminding this, i ommited the part where you have to make a custom FormatHelpEvent.as file for this code to work. The code is given below

package events

{

import flash.events.Event;

public class FormatHelpEvent extends Event {

public var formatSelected:String;

public function FormatHelpEvent(type:String){

super(type);

} } }

I really hope this helps you, please ask any questions if you have or if you have any suggestions you are more than welcome :)