Flex Examples

I was looking through the Tree class today and was a little curious about what the disclosureOpenIcon and disclosureClosedIcon styles were, and ended up making the following little sample.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/26/displaying-the-default-icons-from-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.List;
            import mx.controls.Tree;

            private var arrColl:ArrayCollection;
            private var list:List;
            private var tree:Tree;

            private function init():void {
                arrColl = new ArrayCollection();
                arrColl.addItem({label:"defaultLeafIcon"});
                arrColl.addItem({label:"disclosureClosedIcon"});
                arrColl.addItem({label:"disclosureOpenIcon"});
                arrColl.addItem({label:"folderClosedIcon"});
                arrColl.addItem({label:"folderOpenIcon"});

                tree = new Tree();
                tree.visible = false;
                tree.includeInLayout = false;
                /* Add the Tree to the display list, but hide it. */
                addChild(tree);

                list = new List();
                list.dataProvider = arrColl;
                list.rowCount = arrColl.length;
                list.iconFunction = list_iconFunc;
                addChild(list);
            }

            private function list_iconFunc(item:Object):Class {
                return tree.getStyle(item.label);
            }
        ]]>
    </mx:Script>

</mx:Application>

View source is enabled in the following example.

Sure, the code is more than you really need if all you want is to display a single icon at a time, but I thought it may be a bit easier to just display them all at once in a nice easy to see format. Of course, if you only want to display a single icon, you could use the following snippet:

&lt!-- Add the Tree to the display list, but hide it. -->
<mx:Tree id="tree" includeInLayout="false" visible="false" />
<mx:Image id="img" source="{tree.getStyle('defaultLeafIcon')}" />