我有一组显示在两个地方的对象 - 空间上作为地图上的图标和树形控件。我想知道是否可以使用我用来在树控件中的其他位置显示图标的图像URL。
我尝试过简单地使用包含URL的字段名称作为树控件上的iconField，但显然当flex框架将字符串字段视为图标字段时，它会在上查找属性包含树的mxml文件，其名称与树项上字段的字符串值相同（！？！）。由于我的布局文档没有任何名称为“assets / well.png”的字段，因此会抛出错误。
我需要使用图片的网址而不是通过嵌入来引用图标，因为客户端需要能够在不重新编译的情况下更改图像。
答案 0 :(得分：1)
树setItemIcon函数（或itemIcons属性）将两个Class对象作为参数。
一种可能的解决方案是将this class添加到您的项目中，然后使用以下代码动态加载您的资产：
yourTree.itemIcons = {iconID: IconUtility.getClass(icon1, 'path/icon1.jpg'), iconID2: IconUtility.getClass(icon2, 'path/icon2.jpg')};
编辑：
有关IconUtility类的原始帖子：http://blog.benstucki.net/?p=42
答案 1 :(得分：0)
我试图建立一个完整的工作示例，并希望在此分享我的经验。这是我的测试代码：
<?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>
它基于这个例子：http://blog.flexexamples.com/2007/11/15/creating-a-custom-icon-function-on-a-flex-tree-control/
这是我用它的IconUtility类：
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);
}
}
}
}
这是来自Ben Stucki的完整副本，但target函数的getClass参数除外，其中我将类型从UIComponent更改为*作为建议在this blog的评论中。
剩下的问题：
如果有人能够解释这些问题以及如何解决这些问题，我将非常感激。