コンポーネントの作り方

ActionScriptは

>|actionscript|
hogehoge
｜｜＜

で認識されないらしい．orz

Flexで新しいコンポーネントを1から作る場合は，すべてActionScriptで記述するみたい(みたいと言うのは確証がないから)．ここ，勘違いしていてよく分からなかったけど，実際に書いて見るととても簡単．

要所は次のとおり

1. 新しいコンポーネントを一から作る場合には，UIComponentを継承する．
2. createChildrenメソッドをoverrideする．
3. createChildren内でヴィジュアルコンポーネントをthis.addChildする

だけ．注意点としては，ヴィジュアルコンポーネントはちゃんと高さと幅を設定してあげないと，表示されなかったりすること．

画像とラベルを表示するだけのサンプル．

//test/ImageComp.as
package test
{
  import mx.core.UIComponent;
  import mx.controls.Image;
  import mx.controls.Label;
  import flash.display.Bitmap;
  import flash.events.MouseEvent;

  public class ImageComp extends UIComponent{
    [Embed(source="assets/image.gif")]
    private var LabelImage:Class;
    private var labelBitmap:Bitmap;
    private var labelText:Label;
    
    [inspectable]
    private var _label:String;

    public function ImageComp(){
      super();
    }

    override protected function createChildren():void{
      //add childs
      super.createChildren();
      this.labelBitmap = Bitmap(new LabelImage());

      this.labelText = new Label();
      this.labelText.text = this.label;

      this.labelBitmap.x = 0;
      this.labelBitmap.y = 0;
      this.labelText.x = 2;
      this.labelText.y = 2;
    
      this.addChild(this.labelBitmap);
      this.addChild(this.labelText);
    }
    
    public function get label():String{
      return this._label;
    }
    public function set label(str:String):void{
      this._label = str;
    }
  }
}

の様に定義して，

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:test="test.*" layout="absolute">
  <test:ImageComp label="Hello Component!" x="0" y="0" />
</mx:Application>

とすると，きっと表示されるはず．
ポイントは，createChildrenでaddChildすることくらい．あとはgetter/setterを定義するときは，privateメンバを_ではじめるのが慣習のよう．すなわち

package test
{
  public class ImageComp extends UIComponent{
    private var _label:String;
 
    public function get label():String{
      return this._label;
    }
    public function set label(str:String):void{
      this._label = str;
    }
  }
}

のようにする．
あとは，テック煮とかを参考にすべし．