Extend the MX Tree

Some of the things I would like to do is extend the mx:Tree in flex 2, I would like custom images, or font… or anything to just customize this tree. The main purpose of why i want to do this is to show an icon by each tree node, that represents a certain thing about it…

For example we are using a tree to represent States, Cities, and Neighborhoods for a real estate application. The tree looks similar to this…

-Alabama

–Birmingham

—-Cherry Heights (neigborhoods)

—-Thomas Villa

—-Elkridge View

—-etc…

–Mobile

—-Cherry Heights

—-Thomas Villa

—-Elkridge View

—-etc…

–Montgomery

—-Cherry Heights

—-Thomas Villa

—-Elkridge View

—-etc…

Imagine this neighborhoods having attributes, things like

(isActive,priceRange)

I want to put a custom icon by the neighborhoods that are inactive, to display they are inactive, without the user having to click on the neighborhood to find out if they are… the same applies for the price range…

I found an Item rendering example on adobe Live docs, but I hate when they dont show examples of work… so i created this example to view.

MY EXAMPLE CLICK HERE

the real adobe post on live docs is this LINK

—————–2nd part of the post—————–

——-a few days Later… and now i feel ignorant—-

http://members.cox.net/midian/tutorials/flextree.htm

this was a post posted in 2004, and I had no clue that there was a defaultLeafIcon attribute that I could set in the mx:Tree…

I’m going to attempt to make this example a little more complicated that the original members.cox.net example…

CLICK HERE FOR FLEX DOCUMENTATION ON THE TREE CONTROL

My Icon has to change depending on what the data is. How can I accomplish this? I’m attempting to use the ItemRenderer right now, and so I believe for the most power, I’m going to stick with that. Here is another fantastic example of extending the tree…

CLICK HERE TO SEE FILE

=================3rd edition 1/29/07=============================

This extending of the mx:Tree is unnecessary there is a “iconField” that all you have to do is add an attribute into your xml node….

[Embed(source=“assets/images/leafNodes/defaultLeafIcon.png”)]

[Bindable]

public var defaultLeafIcon:Class;

[Embed(source=“assets/images/leafNodes/inActive.png”)]

[Bindable]

public var inActiveIcon:Class;

[Embed(source=“assets/images/leafNodes/noMapPos.png”)]

[Bindable]

public var noMapPosIcon:Class; <node label=“BoxDivider” data=“BoxDivider.as” icon=“inActiveIcon”/>

<node label=“GridRow” data=“GridRow.as” icon=“noMapPosIcon”/>

<node label=“GridItem” data=“GridItem.as” icon=“defaultLeafIcon”/>

Please check out the code (this is the same link as the first link showing the example up above)

MY EXAMPLE CLICK HERE

THE MORAL OF THE STORE IS:

don’t ever give up… no matter how stupid you may feel, each obstacle is something to overcome, no matter the difficulty. When you overcome these things, it makes you feel good, and it keeps you going without getting bored… so just keep plugging away and try to conquer new things.

Leave a comment