FLEX静态和动态加载图标

1.静态加载图标
嵌入资源的优势：
   1、比起在运行时访问资源，对嵌入资源的访问速度更加快速；
   2、可以用简单的变量访问方式，在多个地方引用所嵌入的资源。这是变量就代表资源，提高写代码的效率；
嵌入资源的弊处：
   1、增大了SWF文件的大小，因为是将资源直接包含；
   2、由于SWF文件增大，将使得初始化的速度变慢；
   3、当资源改变后，需要重新编译SWF文件；

2.静态加载图标方法

例子1：一个简单的嵌入资源的例子：





   以上粗体部分，使用了@ Embed ()指令，将logo.gif这个图片直接嵌入到程序中，作为Button按钮的Icon图标。

例子2：用变量引用嵌入的资源




    [ Embed (source="logo.gif")]
    [ Bindable ]
    public var imgCls:Class;
]]>

  
  
   以上粗体部分，表示将logo.gif图片嵌入，并让变量imgCls可以引用该资源。[ Bindable ]表示该变量imgCls是可以被数据绑定的。之后，就可以在多个地方引用该嵌入资源的变量（见红色粗体）。

例3：通过 Embed ()指令， 在样式表中嵌入资源 ，这通常是在设置UI组件的皮肤时候使用。
如下代码：



 
   .myCustomButton {
      overSkin : Embed (source="overIconImage.gif");
      upSkin : Embed (source="upIconImage.gif");
      downSkin : Embed (source="downIconImage.gif");
    }

    


例4：给控件属性icon赋值

   [ Embed (source="join.GIF")]
   [ Bindable ]
   public var imgCls:Class;
]]>

    然后就可以这样来设置Panel的icon属性了。
    Panel.icon=imgCls;

2.动态加载图标
(1)编写一个动态加载icon类
   代码见附件1
(2)主程序调用该类动态加载图标

               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               minWidth="1024" minHeight="768">
   
       
   
 
   
                    import utility.IconUtility;
        ]]>
   
        button1" label="Kevin Lynch" icon="{IconUtility.getClass(button1, '', 32, 32)}"/>


注意：
   这种方法用于mx:panel时，由于Panel.titleBar不是公共属性而不保护属性，我们不能调用，只能通过继承Panel才能使用。因此我们在继承Panel类后新增一个新属性：titileIcoSrc:String，代码如下：
              creationComplete="onCreationComplete()" titleIcon="{ico}">
   
                   import com.benstucki.utilities.IconUtility;
           
            [Inspectable]
            [Bindable]
            public var titleIconSrc:String;
 
            [Bindable]
            private var ico:Class;
 
            private function onCreationComplete():void {
                ico = IconUtility.getClass(this.titleBar, titleIconSrc, 16, 16);
            }
      ]]>
  


在主程序中调用代码如下：
        titleIconSrc="http://www.pavlasek.sk/devel/ico2.png">
    



附件1：IconUtility.as
package utility
{
    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;
   
    /**
     * 动态加载控件图标的工具类
     * 代码 Copyright (c) 2007 Ben Stucki，http://blog.benstucki.net/?p=42
     */
    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:UIComponent, 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);
            }
        }
       
    }
}


参考文献：
1.乜野空间. flex Embed. http://hi.baidu.com/razr1/blog/item/1d456b96db7d1f6754fb9673.html
2.Ben Stucki. IconUtility Component for Dynamic Run-Time Icons . http://blog.benstucki.net/?p=42
3.Devel. Flex: Dynamic titleIcon for Panel. http://www.pavlasek.sk/devel/?p=11