IconFile metadata tag

原文引用自adobe flex4.5 help手冊：
原文：

• Use the  [IconFile]  metadata tag to identify the filename for the icon that represents the component in the Insert bar of Flash Builder.

功用說明：

• 讓自己設計的組件使用指定的小圖示顯示於FlashBulider的Components View中。
• 可以使用的資源有PNG、GIF、JPG。

使用範例：
//測試的Class

package com.test.icon
{
 import spark.components.Button;
 import spark.components.Group;
 import spark.components.TextArea;
 import spark.layouts.VerticalLayout;
 import spark.layouts.supportClasses.LayoutBase;
 
 [IconFile("MyPanel.png")]
 public class MyPanel extends Group
 {  
  public function MyPanel()
  {
   super();
   this.layout = new  VerticalLayout();
  }
  
  override protected function createChildren():void
  {
   super.createChildren();
   if(button == null){
    this.button = new Button();
    this.button.label = "AS";
   }
   
   if(textArea == null){
    this.textArea = new TextArea();
   }   
   this.addElement(button);
   this.addElement(textArea);
  } 
  
  override protected function commitProperties():void
  {
   super.commitProperties();
   if(textAreaChanged==true && textArea!=null)
   {
    textArea.percentWidth = 100;
   }
   if(btnChanged == true && button!=null)
   {
    button.width = 80;  
   }
  }
  
  override protected function measure():void
  {
   super.measure();
  }
  
  override public function set layout(value:LayoutBase):void
  {
   if(super.layout != value)
   {
    super.layout = value;   
   }
  }
  
  private var textAreaChanged:Boolean;
  private var _textArea:TextArea;
  public function get textArea():TextArea
  {
   return _textArea;
  }
  public function set textArea(value:TextArea):void
  {
   if( _textArea != value)
   {
    _textArea = value;
    textAreaChanged = true;
    invalidateProperties();
   }
  }
  
  private var btnChanged:Boolean;
  private var _button:Button;
  public function get button():Button
  {
   return _button;
  }
  public function set button(value:Button):void
  {
   if( _button != value)
   {
    _button = value;
    btnChanged = true;
    invalidateProperties();
   }
  }  
 }
}

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
      xmlns:icon="com.test.icon.*"
      >
 
 <icon:MyPanel width="300">
  <icon:button>
   <s:Button label="MXML"/>
  </icon:button>
 </icon:MyPanel> 
</s:Application>

結果我怎麼試Icon他就是出不來，我懷疑是不是path錯誤，改了絕對路徑、相對路徑都不行，然後我找尋flex4.5 SDK內的Button.png來驗證Flex本身的Icon圖片放在哪，結果發現是與Class同目錄，因此我也照做，還是不行，最後開了一個獨立的lib庫項目，在專案中引入lib項目就OK了。

因此實際檔案結構如下：
//獨立的lib庫

//Flex測試用的專案

//Flex測試專案中，將將lib加入(使用添加項目)。

如此就可以在組件窗口看到設定的ICON

• 注意，使用IconFile必須將Class至於獨立的庫項目才能成功。
• 由查詢SDK中的Button.png得知，預設的圖片使用解析度是18 * 18。