Flex Tree Control - How can I reference icons by URL?

I have a collection of objects that are displ开发者_运维百科ayed in two places - spatially as icons on a map, and in a tree control. I'd like to know if it's possible to use the image URLs that I use for displaying the icons elsewhere in a tree control.

I've tried simply using the name of the field that contains the URL as the iconField on the tree control, but apparently when the flex framework sees a string field as the icon field it looks for a property on the mxml file containing the tree with a name that's the same as the string value for the field on the tree item(!?!). Since my layout documents don't have any fields with names like "assets/well.png", this throws an error.

I need to reference the icons using the URL of the images rather than through embedding, because the client will need to be able to change the image without a recompile.

Tree setItemIcon function (or itemIcons property) takes two Class objects as parameters. A possible solution would be to add this class to your project, and then use the following code to dynamically load your assets:

yourTree.itemIcons = {iconID: IconUtility.getClass(icon1, 'path/icon1.jpg'), iconID2: IconUtility.getClass(icon2, 'path/icon2.jpg')};

Edit:
Original post about the IconUtility class : http://blog.benstucki.net/?p=42

I tried to build a complete working example and want to share my experience here. This is my test code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">

<mx:Script>
    <![CDATA[
    import mx.controls.listClasses.IListItemRenderer;

    private function tree_iconFunc(item:Object):Class
    {
        var iconClass:Class;
        var renderer:IListItemRenderer = myTree.itemToItemRenderer(item);
        switch (XML(item).@label.toString().charAt(0))
        {
            case "B":
                iconClass = IconUtility.getClass(renderer, 'http://onair.adobe.com/images/lynch.jpg', 16, 16);
                break;
            case "C":
                iconClass = IconUtility.getClass(renderer, 'http://onair.adobe.com/images/downey.jpg', 16, 16);
                break;
            case "K":
                iconClass = IconUtility.getClass(renderer, 'http://onair.adobe.com/images/mesh.jpg', 16, 16);
                break;
        }

        return iconClass;
    }
    ]]>
</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="myTree"
         dataProvider="{dp.league}"
         labelField="@label"
         showRoot="true"
         iconFunction="tree_iconFunc"
         fontSize="12"
         width="500"
         height="400"/>

</mx:Application>

It is based on this example: http://blog.flexexamples.com/2007/11/15/creating-a-custom-icon-function-on-a-flex-tree-control/

This is the IconUtility class I use with it:

package
{
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.geom.Matrix;
import flash.net.URLRequest;
import flash.system.LoaderContext;
import flash.utils.Dictionary;

import mx.containers.accordionClasses.AccordionHeader;
import mx.controls.tabBarClasses.Tab;
import mx.core.BitmapAsset;
import mx.core.UIComponent;

/**
 * Provides a workaround for using run-time loaded graphics in styles and properties which require a Class reference
 */
public class IconUtility extends BitmapAsset
{

    private static var dictionary:Dictionary;

    /**
     * Used to associate run-time graphics with a target
     * @param target A reference to the component associated with this icon
     * @param source A url to a JPG, PNG or GIF file you wish to be loaded and displayed
     * @param width Defines the width of the graphic when displayed
     * @param height Defines the height of the graphic when displayed
     * @return A reference to the IconUtility class which may be treated as a BitmapAsset
     * @example <mx:Button id="button" icon="{IconUtility.getClass(button, 'http://www.yourdomain.com/images/test.jpg')}" />
     */
    public static function getClass( target:*, source:String, width:Number = NaN, height:Number = NaN ):Class {
        if(!dictionary) {
            dictionary = new Dictionary(false);
        }
        //if(source is String) {
            var loader:Loader = new Loader();
            loader.load(new URLRequest(source as String), new LoaderContext(true));
            //source = loader;
        //}
        dictionary[target] = { source:loader, width:width, height:height };

        return IconUtility;
    }

    /**
     * @private
     */
    public function IconUtility():void {
        addEventListener(Event.ADDED, addedHandler, false, 0, true)
    }

    private function addedHandler(event:Event):void {
        if(parent) {
            if(parent is AccordionHeader) {
                var header:AccordionHeader = parent as AccordionHeader;
                getData(header.data);
            } else if(parent is Tab) {
                var tab:Tab = parent as Tab;
                getData(tab.data);
            } else {
                getData(parent);
            }
        }
    }

    private function getData(object:Object):void {
        var data:Object = dictionary[object];
        if(data) {
            var source:Object = data.source;
            if(data.width > 0 && data.height > 0) {
                bitmapData = new BitmapData(data.width, data.height, true, 0x00FFFFFF);
            }
            if(source is Loader) {
                var loader:Loader = source as Loader;
                if(!loader.content) {
                    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler, false, 0, true);
                } else {
                    displayLoader(loader);
                }
            }
        }
    }

    private function displayLoader( loader:Loader ):void {
        if(!bitmapData) {
            bitmapData = new BitmapData(loader.content.width, loader.content.height, true, 0x00FFFFFF);
        }
        bitmapData.draw(loader, new Matrix(bitmapData.width/loader.width, 0, 0, bitmapData.height/loader.height, 0, 0));
        if(parent is UIComponent) {
            var component:UIComponent = parent as UIComponent;
            component.invalidateSize();
        }
    }

    private function completeHandler(event:Event):void {
        if(event && event.target && event.target is LoaderInfo) {
            displayLoader(event.target.loader as Loader);
        }
    }

}
}

This is complete copy from Ben Stucki, except for the target argument of the getClass function where I changed the type from UIComponent to * as adviced in the comments of this blog.

Problems left:

1. Icons flicker: There is a lot of flickering going on if you open and/or close branches. (Tested on Firefox 3 and flashplayer 10.2)
2. You see the text in the tree 'jump' to the right when the icons load if you open a branch for the first time
3. In my "real" program, the icon seems to only appear when I mouse over the tree node and also disappears when I open another branch. I was unable to reproduce this in my simple test program, but it is clearly a problem since others have also reported that problem.

I would be most grateful if somebody could shed some light on those issues and how to fix them.