Skip to main content

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 :)


Comments

MOI said…
Do I need to create a separate FormatHelpEvent.as file that extends this event?

My tree mxml:
c:SpringLoadedTree id="navTree"
autoCloseOpenNodes="true"
autoCloseOnDrop="true"
width="100%" height="100%"
autoOpenTimerMS="700"
autoCloseTimerMS="100"
showOpeningIndication="true"
autoCloseOnExit="true"
dataProvider="{navTreeXMLList}"
mouseDown="treeChanged(event)"
showRoot="false"
dragDrop="onDragDrop(event)"
dragEnter="onDragEnter(event)"
dragOver="onDragOver(event)"
dragMoveEnabled="true"
dropEnabled="true"
labelField="@label"
iconField="@icon"
itemRenderer="com.med.ui.controls.TreeRender"
creationComplete="navTree.addEventListener('formatHelp',showFormatHelp,true,0,true)"
styleName="navigationTree" / >

Then what you have in previous post would be in TreeRenderer. Not sure about the showFormatHelp method. Can you assist?

Also will I be able to still utilize drag drop to either the custom item tree renderer or to the tree nodes themselves? Thanks in advance I will try some things.
MOI said…
So I got it working. However I still get both method calls when I click on the new Image Item Renderer. Any ideas why? It acts as if I am clicking on both image and row index of tree.
Thanks in advance,
MOI
Arslan said…
I dont have the solution to your problem yet but it is an interesting case. What currently will be happening is if you click on the image the imageClickHandler is called also the nodeClickHandler(let me know if i am right here so we are on the same page) but when you click on the node the imageHandler is not called. I suspect this has something to do with your design because logically image is a part of the tree node so clicking on it HAS to invoke tree node click as well. Are you sure tree control is the right control for your scenario. I will look for a solution for your problem though.
MOI said…
Clicking on a tree node triggers the correct method call (treeChanged).

Implementing the item renderer, if I click on the image it calls both the (treeChanged) and FormatHelpEvent.

I am trying to get it where if you click on the image item renderer it calls method 1, and if you click on the node to the left of image item renderer it calls method 2. I am still working on it let me know if you can think of anything.

-MOI