簡單的虛線Components

這是一個簡單的虛線元件，還未做記憶體管理效率化以及點的大小動態更改處理。

<?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:view="ut.view.*">
 <s:VGroup width="100%" paddingTop="5" paddingLeft="5" paddingRight="5">
  <view:DottedLine width="100%" dotteLineMode="line" color="0x0000FF"/>
  <view:DottedLine width="100%" dotteLineMode="dot" color="0x0000FF"/>
  <view:DottedLine width="100" dotteLineMode="line" color="0xFF0000"/>
  <view:DottedLine width="100" dotteLineMode="dot" color="0xFF0000"/> 
 
  <s:HGroup>
   <view:DottedLine width="100" dotteLineMode="dot" color="0xFF0000" rotation="90"/>
   <view:DottedLine width="100" dotteLineMode="line" color="0xFF0000" rotation="90"/>
   <view:DottedLine width="100" dotteLineMode="line" color="0xFF0000" rotation="90"/>
   <view:DottedLine width="100"  dotteLineMode="dot" color="0xFF0000" rotation="90"/>
  </s:HGroup>
 </s:VGroup>
</s:Application>

package ut.view
{
 import flash.display.Bitmap;
 import flash.display.BitmapData;
 import flash.display.DisplayObject;
 import flash.display.Graphics;
 import flash.display.Shape;
 import flash.utils.getTimer;
 
 import mx.graphics.BitmapFillMode;
 
 import spark.primitives.BitmapImage;
 
 import ut.enum.DottedLineMode;
 
 public class DottedLine extends BitmapImage
 {  
  public function DottedLine(color:uint = 0xD4D4D4 , dotteLineMode:String=DottedLineMode.DOT)
  {  
   this.color = color
   this.dotteLineMode = dotteLineMode;
    
  }  
    
  private var _color:uint;
  /**虛線的顏色*/
  public function get color():uint
  {
   return _color;
  }
  public function set color(value:uint):void
  { 
   if(_color != value)
   {
    _color = value;
    changeSource();
   }
  }
  
  
  private var _dotteLineMode:String;
  /**選則點或線的虛線，可由DottedLineMode選擇輸入參數*/ 
  [Inspectable(category="General", enumeration="dot,line", defaultValue="stretch")]
  public function get dotteLineMode():String 
  {
   return  _dotteLineMode;
  }  
  public function set dotteLineMode(dottedLineMode:String):void
  {  
   if(dottedLineMode == DottedLineMode.DOT || dottedLineMode == DottedLineMode.LINE)
   {  
    if(_dotteLineMode != dottedLineMode)
    {
     _dotteLineMode = dottedLineMode; 
     changeSource();
    }
   }
  }  
 
  
  /**bitmapImage所要填入source*/
  private function changeSource():void
  {
   switch(dotteLineMode)
   {
    case DottedLineMode.DOT:
     setSource(createDotDotted);
     break;
    case DottedLineMode.LINE:
     setSource(createLineDotteed);
     break;
    default:
     
   }
  }
  
  /**預設為點狀態的虛線*/
  private function setSource(createMethod:Function):void
  { 
   this.source = null;
   this.source = getBitmap(createMethod(color));
   this.fillMode = BitmapFillMode.REPEAT;
  }  
  
 
  /**將畫好的圖轉換成bitmap  (displayObject to bitmap)*/
  private function getBitmap(target:DisplayObject):Bitmap
  {
   var _bitMapData:BitmapData = new BitmapData(target.width , target.height , true  , 0x000000);
    _bitMapData.draw(target);   
   var _bitMap:Bitmap = new Bitmap(_bitMapData);
   return _bitMap;   
  }
  
  
  /**畫兩個圓依照color,其中一個是看不見,如此bitmap在repeat時方有間隔*/
  protected function createDotDotted(color:uint=0xD4D4D4 ,  ellipseX:Number=0 , ellipseY:Number=0 , ellipseWidth:Number=2 , ellipseHeight:Number=2):DisplayObject
  {   
   var grapgics:Shape = new Shape();
    //first ellipse alpha is 1
    grapgics.graphics.beginFill(color);
    grapgics.graphics.drawEllipse(ellipseX , ellipseY , ellipseWidth , ellipseHeight);     
    //second ellipse alpha is 0 
    grapgics.graphics.beginFill(0xFFFFFF , 0);
    grapgics.graphics.drawEllipse(ellipseX+ellipseWidth , ellipseY , ellipseWidth , ellipseHeight);
    //end fill
    grapgics.graphics.endFill();
   return grapgics;
  }
  
  /**畫兩個線段*/
  protected function createLineDotteed(color:uint=0xD4D4D4 ,  rectX:Number=0 , rectY:Number=0 , rectWidth:Number=3 , rectHeight:Number=1):DisplayObject
  {
   var grapgics:Shape = new Shape();
   //first line
   grapgics.graphics.beginFill(color);
   grapgics.graphics.drawRect(rectX , rectY , rectWidth , rectHeight);   
   //second line
   grapgics.graphics.beginFill(0xFFFFFF , 0);
   grapgics.graphics.drawRect( rectX + rectWidth , rectY , rectWidth , rectHeight);
   //end fill 
   grapgics.graphics.endFill();
   return grapgics; 
  }
 }
}

package ut.enum
{
 public class DottedLineMode
 {
  static public const DOT:String =  "dot";
  static public const LINE:String = "line";
  public function DottedLineMode()
  {
  }
 }
}

Flex4 Rect and Style Metadata

有時候Layout時只是想用到border或是只想要用到BackgroundColor的時候可以考慮在Group中使用Rect，並加上Style Medatata就可以達到而不用使用到SkinnableContner或是BorderContainer，用法如下。

<?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:itemrenderers="itemrenderers.*"
      >
 <fx:Style source="css/Test.css"/>
 <s:HGroup paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5">  
  <itemrenderers:Rect_Style_BackgroundColor width="200" height="200"/>
  <itemrenderers:Rect_Style_Border width="200" height="200"/>  
 </s:HGroup> 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx"
   >
 <fx:Metadata>
  [Style(name="backgroundColors", inherit="no", type="uint" ,  theme="spark")]
 </fx:Metadata>
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   override public function styleChanged(styleProp:String):void
   {
    super.styleChanged(styleProp);
    if(styleProp == "backgroundColors")
    {
     invalidateDisplayList();
    }
   }
   
   override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
   {
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    myBackgroundColor.color = getStyle("backgroundColors");
   }
    
  ]]>
 </fx:Script>
 <s:Rect left="0" right="0" top="0" bottom="0">
  <s:fill>
   <s:SolidColor id="myBackgroundColor" color="0x00ff00"/>
  </s:fill>
 </s:Rect>
</s:Group>

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100%"
   >
 <fx:Metadata>
  [Style(name="borders", inherit="no", type="uint")]
 </fx:Metadata>
 
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   override public function styleChanged(styleProp:String):void
   {
    super.styleChanged(styleProp);
    if(styleProp == "borders")
    {
     invalidateDisplayList();
    }
   }
   
   override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
   {
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    myBorder.color = getStyle("borders");
   }
   
  ]]>
 </fx:Script> 
 <s:Rect 
   left="0" right="0" top="0" bottom="0"
   radiusX="5" radiusY="5">
  <s:stroke>   
   <s:SolidColorStroke id="myBorder"  weight="2" color="0x00ff00"/>
  </s:stroke>
 </s:Rect> 
</s:Group>

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace itemrenderers "itemrenderers.*";
@namespace spark "spark.skins.spark.*";


itemrenderers|Rect_Style_BackgroundColor
{
 backgroundColors:#f63b5e;
}

itemrenderers|Rect_Style_Border
{
 borders:#3e95ef;
}

SWF在google瀏覽器下無法切換輸入法

問題:Flash / Flex SWF在google瀏覽器下無法做輸入法切換
平台: Windows7
瀏覽器:chrome 15.0.874.106 m

解決方法:
1.在chrome網址列中輸入chrome://plugins/打開plugins頁面。
2.點擊詳細資訊
3.在flashPlayer項目中將gcswf32.dll項目關閉，留下NPSWF32.dll啟動。
PS.若你有手動安裝過flashPlayer會有NPSWF32.dll，若沒有到Adobe下載安裝即可。

亂數round

亂數數值範圍：
(Math.round( Math.random() * ( maxValue - minValue )) + minValue);

//產生1 ~ 10之間的亂數
var num:uint = Math.round( Math.random() * ( 10 - 1 )) + 1; 

亂數色彩：

//產生隨機色彩
var color:uint = Math.random() * 0xFFFFFF;

除了R其餘使用亂數：

0xff << 24 | 0xff * Math.random() << 16 | 0xff * Math.random() << 8 | 0xff

new Object VS { } 與 new Array( ) VS [ ]

測試程式碼：

<?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"
      applicationComplete="completeHandler()"
      >
 <fx:Script>
  <![CDATA[
    
   private var count:int;
   private var beforeTime:int;
   private var afterTime:int;
   private var object:Object;
   private var array:Array;
   private const REPS:int = 1000000;
   
   private var enableBtn:Boolean;
   protected function completeHandler():void
   {    
    enableBtn = true;    
   }
   
   protected function get executionTime():String
   {
    return (afterTime-beforeTime).toString();
   }

   
   protected function button1_mouseDownHandler(event:MouseEvent):void
   { 
    if(!enableBtn)return;
    enableBtn = false; 
    beforeTime = getTimer();
    for (count = 0; count < REPS; count++)
    {
     object = {};
    }
    afterTime = getTimer();
    log0.text = executionTime;
    enableBtn = true; 
   }
   
   protected function button2_mouseDownHandler(event:MouseEvent):void
   { 
    if(!enableBtn)return;
    enableBtn = false; 
    beforeTime = getTimer();
    for (count = 0; count < REPS; count++)
    {
     object = new Object();
    }
    afterTime = getTimer();
    log1.text = executionTime;
    enableBtn = true; 
   }
   
   protected function button3_mouseDownHandler(event:MouseEvent):void
   { 
    if(!enableBtn)return;
    enableBtn = false; 
    beforeTime = getTimer();
    for (count = 0; count < REPS; count++)
    {
     array = [1,2,3];
    }
    afterTime = getTimer();
    log2.text = executionTime;
    enableBtn = true; 
   }
   
   protected function button4_mouseDownHandler(event:MouseEvent):void
   { 
    if(!enableBtn)return;
    enableBtn = false; 
    beforeTime = getTimer();
    for (count = 0; count < REPS; count++)
    {
     array = new Array(1,2,3);
    }
    afterTime = getTimer();
    log3.text = executionTime;
    enableBtn = true; 
   }
   
  ]]>
 </fx:Script> 
 <s:HGroup>
  <s:Panel width="200" height="150" title="\{\}"> 
   <s:layout>
    <s:VerticalLayout/>
   </s:layout>
   <s:TextArea id="log0" width="100%" height="100%"/> 
   <s:Button label="start" mouseDown="button1_mouseDownHandler(event)"/>
  </s:Panel>
  <s:Panel width="200" height="150" title="new Object">   
   <s:layout>
    <s:VerticalLayout/>
   </s:layout>
   <s:TextArea id="log1" width="100%" height="100%"/>
   <s:Button label="start" mouseDown="button2_mouseDownHandler(event)"/&gt;
  </s:Panel>
  <s:Panel width="200" height="150" title="[1,2,3]">   
   <s:layout>
    <s:VerticalLayout/>
   </s:layout>
   <s:TextArea id="log2" width="100%" height="100%"/>
   <s:Button label="start" mouseDown="button3_mouseDownHandler(event)"/>
  </s:Panel>
  <s:Panel width="200" height="150" title="new Array(1,2,3)">   
   <s:layout>
    <s:VerticalLayout/>
   </s:layout>
   <s:TextArea id="log3" width="100%" height="100%"/>
   <s:Button label="start" mouseDown="button4_mouseDownHandler(event)"/>
  </s:Panel>
 </s:HGroup> 
</s:Application>

//結果



new Object( )   < {}

new Array(1,2,3)   >  [1,2,3]

//性能概要分析

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。

Alternative metadata tag

原文引用自Adobe Flex4.5_help手冊：
原文：

If you want to replace one class with another, mark the class to be replaced with the  [Alternative]  metadata tag. The
[Alternative]  metadata tag specifies the replacement class, and a version number that indicates when the
replacement occurred.

功用說明：
[Alternative]這個metadata標籤用於建議替代的類別與版本，如mx的Button會出現建議使用spark的Button，而在FlashBulider選用Class時可以看到如下圖訊息。

使用範例：
//舊的Cat Class

package com.jef
{
 [Alternative(replacement="com.jt.Cat", since="1.0")]
 /***/ //使用asDoc的註解,說明的asDoc才會出現
 public class Cat
 {
  public function Cat()
  {
  }
 }
}

//新的Cat Class

package com.jt
{
 public class Cat
 {
  public function Cat()
  {
  }
 }
}

//Flex mxml

<?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"
      applicationComplete="completeHandler(event)"
      >
 <fx:Script>
  <![CDATA[
   import com.jef.Cat;   
   import mx.events.FlexEvent;   
   protected function completeHandler(event:FlexEvent):void
   { 
    var cat:Cat;
   }   
  ]]>
 </fx:Script> 
</s:Application>

出現提示如下：

Alternative與Deprecated不同，Alternative原本的Class還可使用，只是有更新版本建議使用，而Deprecated則是說明該Class已經廢棄不要再使用。