[Flex] Custom treeicons without embedding them
On March 27, 2007, Flash / Flex - 11 CommentsSometime ago a wanted a tree with all different kinds of icons, depending on the type of the branch. Flex has some support for this, but only for embedded images. The problem was that I couldn’t use embedded images because the images are loaded dynamically from a database. So I had to find a way to fool flex, and the solution is quite simple.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | package nl.ik.renderer{ import flash.events.MouseEvent; import mx.collections.*; import mx.controls.treeClasses.*; import mx.controls.Image; import mx.core.IFlexDisplayObject; public class TreeitemRenderer extends TreeItemRenderer { //Create a new image component private var img:Image = new Image(); public function TreeitemRenderer() { super(); //Add the image to the renderer this.addChild(this.img as DisplayObject); } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); //The renderer is called multiple times, sometimes the ''data' property is unavailable, so check if it has data. if(data!=null) { this.label.text = data.label; //Because my icons are a bit bigger than the original icons, I have to move the label a bit. this.label.x += 5; //this.getChildAt(3) is the original icon, so I set my new image right on top of the original this.img.x = this.getChildAt(3).x; this.img.y = this.getChildAt(3).y - 5; this.img.width = 24; this.img.height = 24; //Set the source of the new image this.img.source = data.itemicon; //Hide the original icon this.getChildAt(3).visible = false; } } } } |
As you can see, I just create a new image component and place it over the original. Simple as that, and works perfectly:
What others have to say:
Hi,
Please explain how it works. I tried to use your code but i couldn’t. How do I override the default itemredenrer with this one?
thanks
You just set
<mx:Treeitemrenderer="nl.ik.renderer.TreeitemRenderer" />
That’s all. It should do the trick.
Hi!
using your code I managed to add another image (delete icon) at the end of the “row”, e.g. after the text.
but I can’t get it to listen to click events and then call a function in my parentDocument.
Can you help me?
Hmm… I just added
this.img.addEventListener(MouseEvent.CLICK, this.clickEv);at line 36 (just after setting the source), and added the clickEv function like this:
private function clickEv(event:Event):void {Alert.show("CLICK");
}
When I click the image it shows me the alert. Or do you want to call a function outside the renderer?
Yes, how do you call a function outside the renderer?
Replace the ‘Alert.show(“CLICK”)’ with this.parentDocument.FUNCTIONNAME() and you’re good to go! The function FUNCTIONNAME should be in the mxml where you place the tree.
Hmm … Almost there! But all of the code I want to call is in an as file, not the mxml where the tree is intially defined. Is there a way to call functions in that as file, or do I have to move the function I want to call?
In case anyone else wants to know, I ended up having to dispatch an event and just catch it in my as file. Thanks for your help here!
This article really helped, Thanks mate
Just for help,
this is the solution : http://blog.benstucki.net/?p=42
This really helped. Thank you!
Leave a Reply