Flex Tree Control - URL로 아이콘을 참조하려면 어떻게해야합니까?

Question

공간적으로지도의 아이콘과 트리 컨트롤의 두 위치에 표시되는 개체 모음이 있습니다. 트리 컨트롤의 다른 곳에 아이콘을 표시하는 데 사용하는 이미지 URL을 사용할 수 있는지 알고 싶습니다.

나는 단지 트리 컨트롤의 iconField와 같은 URL을 포함하는 필드의 이름을 사용하려고했지만, 플렉스 프레임 워크가 아이콘 필드로 문자열 필드를 볼 때 그것은 에있는 mxml tree 항목 (!?!)의 필드에 대한 문자열 값과 동일한 이름을 가진 트리를 포함하는 파일. 내 레이아웃 문서에는 "assets/well.png"와 같은 이름의 필드가 없기 때문에 오류가 발생합니다.

이미지를 다시 컴파일하지 않고도 이미지를 변경할 수 있어야하므로 삽입하는 대신 이미지의 URL을 사용하여 아이콘을 참조해야합니다.

Answer 1

트리 setItemIcon 함수 (또는 itemIcons 속성)는 Class 개체를 매개 변수로 사용합니다. 가능한 솔루션은 동적 자산을로드 프로젝트에 this class를 추가하고 다음 코드를 사용하는 것입니다 :

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

편집 : http://blog.benstucki.net/?p=42

Answer 2

다음 IconUtility 클래스에 대한
원래의 게시물 나는 완전한 작업 예제를 만들고 경험을 공유하려고합니다. 그것은이 예제를 기반으로

<?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> 

:

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에서 전체 사본은 제외입니다 : http://blog.flexexamples.com/2007/11/15/creating-a-custom-icon-function-on-a-flex-tree-control/

이 내가 함께 사용하는 IconUtility 클래스입니다 이건 내 테스트 코드입니다 인수에 대해 에서 *으로 유형을 변경 한 getClass 함수의 설명에 대한 설명은 this blog입니다.

문제가 남아

1. 아이콘 깜박임 :을 열 및/또는 가까운 나뭇 가지 경우 계속 깜박 거림이 많이 있습니다. (Firefox 3 및 플래시 플레이어 10.2에서 테스트 됨)
2. 분기를 처음 열면 아이콘이로드 될 때 오른쪽의 'jump'텍스트가 표시됩니다.
3. "실제"프로그램에서 아이콘 트리 노드 위에 마우스를 올려 놓고 다른 브랜치를 열면 사라지는 것처럼 보입니다. 내 간단한 테스트 프로그램에서 이것을 재현 할 수 없었지만, 분명히 문제가 있습니다. others도 그 문제를보고했습니다.

누군가가 이러한 문제에 대해 밝히고 문제를 해결할 수 있다면 매우 감사 할 것입니다.