The following example shows how you can specify a custom label function on a Tree control in Flex where the returned label is specific to the node name.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/29/defining-a-custom-label-function-on-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function tree_labelFunc(item:XML):String {
var label:String;
switch (item.localName()) {
case "league":
label = item.@title;
break;
case "team":
label = item.@name;
break;
case "stadium":
label = item.name;
}
return label;
}
]]>
</mx:Script>
<mx:XML id="mlb" source="mlb.xml" />
<mx:Tree id="tree"
dataProvider="{mlb.league}"
labelFunction="tree_labelFunc"
width="300"
rowCount="8" />
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/29/defining-a-custom-label-function-on-a-flex-tree-control/ -->
<mlb>
<league id="al" title="American League">
<team name="Baltimore Orioles" />
<team name="Boston Red Sox" />
<team name="Chicago White Sox" />
<team name="Cleveland Indians" />
<team name="Detroit Tigers" />
<team name="Kansas City Royals" />
<team name="Los Angeles Angels of Anaheim" />
<team name="Minnesota Twins" />
<team name="New York Yankees" />
<team name="Oakland Athletics" />
<team name="Seattle Mariners" />
<team name="Tampa Bay Devil Rays" />
<team name="Texas Rangers" />
<team name="Toronto Blue Jays" />
</league>
<league id="nl" title="National League">
<team name="Arizona Diamondbacks" />
<team name="Atlanta Braves" />
<team name="Chicago Cubs" />
<team name="Cincinnati Reds" />
<team name="Colorado Rockies" />
<team name="Florida Marlins" />
<team name="Houston Astros" />
<team name="Los Angeles Dodgers" />
<team name="Milwaukee Brewers" />
<team name="New York Mets" />
<team name="Philadelphia Phillies" />
<team name="Pittsburgh Pirates" />
<team name="San Diego Padres" />
<team name="San Francisco Giants" />
<team name="St. Louis Cardinals" />
<team name="Washington Nationals" />
</league>
</mlb>
View source is enabled in the following example.
That’s a good example. You had me psyched out there for a minute. I found this page doing a search for the Orioles, but I do some programming on the side too so this is good to know.
Thanks for all of the great examples.
Is there a way to hide or display a customized Arrow Icon, instead of using the default gray arrow?
thx.
Hey, thank you for the neat introduction into custom node/leaf labeling of the Tree component. Btw. do you, or does anyone know how to hide CDATA sections within the tree? When I have such sections in the Tree dataprovider, those leafs will be displayed, but I don’t know how to hide ‘em. When I click onto such a leaf and I continue navigation through the tree, arbitrary nodes get hidden and show up again. This issue drives me nuts!
Manuel,
I’m not sure I’ve seen that, but if you think it is a bug, can you please file a bug at http://bugs.adobe.com/flex/ and include some sample code and somebody can investigate it.
Thanks,
Peter
Yes, the randomly hidden node issue is certainly a bug and I will file it as soon I’ll get the time for that.
Regarding the unwanted display of CDATA tags, I think it is more a missing feature than a bug. Can you perhaps tell me how I could circumvent that odd behavior, e.g. by subclassing the tree item renderer? I just want to exclude the CDATA sections from the tree display, while keeping them in the data provider and being able to access and change them.
Thank you for any hints on how to achieve this!
YEAH! I got it done by myself :) Here’s the code of the overridden DefaultDataDescriptor class. Works great :)
[snip /]
Noooo :( too much characters, please delete the code in the post…
It’s just the following:
I subclassed the DefaultDataDescriptor, overrode the isBranch() method, iterated through the childList and returned false if child node’s localName() was null (e.g. is a CDATA section). Period.
Manuel,
There shouldn’t be a character limit that I know of (certainly none that I’ve reached). If you want to post code blocks though, you need to convert your < characters to < and your > characters to >, otherwise, “bad things happen”.
But I can delete the partial code block if you want…
Peter
It’s okay, I used the HTML entities as suggested, but something went wrong. I think my description of the workaround should be sufficient for most of you ;) Thanks for your efforts!
It’s very nice tutorial for seperating the node and subnode value in tree component using lable function