Customizing folder and leaf icons in the Flex Tree control using the folderOpenIcon, folderClosedIcon, and defaultLeafIcon styles

The following example shows how you can change the default folder and leaf node icons in a Flex Tree control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/14/customizing-folder-and-leaf-icons-in-the-flex-tree-control-using-the-folderopenicon-folderclosedicon-and-defaultleaficon-styles/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed("assets/folder.png")]
            private var myFolderClosedIcon:Class;

            [Bindable]
            [Embed("assets/folder_page.png")]
            private var myFolderOpenIcon:Class;

            [Bindable]
            [Embed("assets/arrow_right.png")]
            private var myDefaultLeafIcon:Class;
        ]]>
    </mx:Script>

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

    <mx:Tree id="TreeProject"
            dataProvider="{dp.league}"
            labelField="@label"
            showRoot="true"
            defaultLeafIcon="{myDefaultLeafIcon}"
            folderOpenIcon="{myFolderOpenIcon}"
            folderClosedIcon="{myFolderClosedIcon}"
            width="320"
            height="240" />

</mx:Application>

View source is enabled in the following example.

You can also set the defaultLeafIcon, folderClosedIcon, folderOpenIcon styles in a style sheet, as seen in the following snippet:

<mx:Style>
    Tree {
        defaultLeafIcon: Embed("assets/arrow_right.png");
        folderOpenIcon: Embed("assets/folder_page.png");
        folderClosedIcon: Embed("assets/folder.png");
    }
</mx:Style>

Tagged as: defaultLeafIcon, folderClosedIcon, folderOpenIcon