Setting a custom icon field in a Flex Tree control

The following example shows how you can specify a custom icon field in a Flex Tree control to set an icon on a specific node.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/15/setting-a-custom-icon-field-in-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed("assets/bullet_star.png")]
            public var myBulletStarIcon:Class;
        ]]>
    </mx:Script>

    <mx:XML id="dp">
        <mlb>
            <league label="American League">
                <division label="East">
                    <team label="Boston" icon="myBulletStarIcon" />
                    <team label="New York" />
                    <team label="Toronto" />
                    <team label="Baltimore" />
                    <team label="Tampa Bay" />
                </division>
                <division label="Central">
                    <team label="Cleveland" icon="myBulletStarIcon" />
                    <team label="Detroit" />
                    <team label="Minnesota" />
                    <team label="Chicago" />
                    <team label="Kansas City" />
                </division>
                <division label="West">
                    <team label="Los Angeles" icon="myBulletStarIcon" />
                    <team label="Seattle" />
                    <team label="Oakland" />
                    <team label="Texas" />
                </division>
            </league>
        </mlb>
    </mx:XML>

    <mx:Tree id="TreeProject"
            dataProvider="{dp.league}"
            labelField="@label"
            iconField="@icon"
            showRoot="true"
            width="320"
            height="240" />

</mx:Application>

View source is enabled in the following example.

8 thoughts on “Setting a custom icon field in a Flex Tree control

  1. Any chance you’ve got an example that allows for setting a unique icon based on the level of nesting? I.e., I’d like to have one icon for the first level of hierarchy, a different one for the second, etc.

  2. Anon,

    Nope, it isn’t me, but I more or less gave up trying to stop people from stealing my code. This blog has always been released under a Creative Commons license, but that never matters at the end of the day.

    I guess it’s all good as long as people are finding the content useful (I hope) and maybe eventually they’ll come back here. I’ve also been trying to add my content to other sources such as the Adobe Flex Cookbook (http://www.adobe.com/go/flex_cookbook) and I’m hoping to get some content added to the Adobe Tour de Flex (http://www.adobe.com/devnet/flex/tourdeflex/).

    Peter

Comments are closed.