読者です 読者をやめる 読者になる 読者になる

Paradigm Shift Design

ISHITOYA Kentaro's blog.

コンポーネントの作り方

Flex

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;
    }
  }
}

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