MXMLからSpriteクラスを継承したActionScriptクラスの使用方法のサンプル

先日作成したLabelコントロールを楕円で囲むをプロジェクトで使用したところ処理速度が想定より遅かった。ループ処理の最内部で呼ばれるので、最適化をすれば効果絶大なのでActionScript化することにしました。とりあえず今は動作確認をしたばかりですが、処理がどれだけ早くなるかはループ処理部のActionScript化が完成した段階で行ないます。MXMLからSpriteクラスを継承したActionScriptクラスの使用方法のサンプルとして使えそうなのでFlex備忘録に登録します。

・MindNodeLabel コントロール (Sprite)

package {
  import flash.display.Sprite;
  import flash.display.Graphics;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;
  import flash.events.MouseEvent;

  public class MindNodeLabel extends Sprite {

    public var nodetype:String;

    private var txt:TextField;
    private var tf:TextFormat;
    private var vgap:Number;
    private var cmwidth:Number;
    private var cmheight:Number;

    private const dgap:Number = 5;          // 楕円用隙間
    private const sgap:Number = 2;          // 矩形用隙間
    private const ofcolor:uint = 0xEBEBE9;  // マウスがいない時の色
    private const oncolor:uint = 0xE68701;  // マウスが乗った時の色
    private const bdcolor:uint = 0x939A9D;  // 枠の色
    private const alnum:Number = 0.75;      // アルファ透明度

    public function MindNodeLabel() {
      trace("MindNodeLabelクラス作成！");
      addEventListener(MouseEvent.MOUSE_OVER, mouseovertext);
      addEventListener(MouseEvent.MOUSE_OUT, mouseouttext);
    }

    // ラベル文字列設定
    public function LabelTextSet(ctxt:String):void {
      txt = new TextField();
      tf = new TextFormat();
      tf.size = 11;
      txt.defaultTextFormat = tf;
      txt.mouseEnabled = false;
      txt.autoSize = TextFieldAutoSize.LEFT;
      if (nodetype == "center") vgap = dgap; // 楕円
      else                      vgap = sgap; // 矩形
      txt.x = vgap;
      txt.y = vgap;
      txt.text = ctxt;
      //trace("txt w,h="+txt.width+","+txt.height);
      //trace("text w,h="+txt.textWidth+","+txt.textHeight);
      cmwidth  = txt.width  + (vgap * 2);
      cmheight = txt.height + (vgap * 2)

      // 子登録
      addChild(txt);

      centercircle(ofcolor);   // センターサークル表示
    }

    // センターサークル表示
    private function centercircle(color:uint):void {
      //trace("x,y,w,h=["+x+","+y+","+width+","+height+"]");
      graphics.clear();
      var x1:Number = 0;
      var y1:Number = 0;
      var x2:Number = cmwidth;
      var y2:Number = cmheight;
      var g:Graphics = graphics;
      // 塗りつぶし
      g.beginFill(color, alnum);
      if (nodetype == "center") g.drawEllipse(x1,y1,x2,y2); // 楕円
      else                      g.drawRect(x1,y1,x2,y2);    // 矩形
      g.endFill();
      // 枠
      g.lineStyle(1, bdcolor);
      if (nodetype == "center") g.drawEllipse(x1,y1,x2,y2); // 楕円
      else                      g.drawRect(x1,y1,x2,y2);    // 矩形
    }

    // マウスがテキスト部に乗った
    private function mouseovertext(ev:MouseEvent):void {
      //trace("mouseovertext()実行！");
      centercircle(oncolor);   // センターサークル表示
    }

    // マウスがテキスト部から離れた
    private function mouseouttext(ev:MouseEvent):void {
      //trace("mouseouttext()実行！");
      centercircle(ofcolor);   // センターサークル表示
    }
  }
}


・MindCenterTopView コントロール (UIComponent)
（MindNodeLabelは直接MXMLから使えません！）

package {
  import flash.display.Graphics;
  import mx.core.UIComponent;

  public class MindCenterTopView extends UIComponent {

    private const gap:Number = 2;  // 調整用隙間

    private var uw:Number;
    private var uh:Number;

    public function MindCenterTopView() {
      trace("MindCenterTopViewクラス作成！");
    }

    public function setnodetext(mmxml:XML):void {
      //
      // ここでは１個だけ処理、全XMLノード数分処理される
      //
      var ctxt:String = mmxml.@TEXT;
      var centext:MindNodeLabel = new MindNodeLabel();
      centext.nodetype = "center";
      centext.LabelTextSet(ctxt);
      addChild(centext);
      uw = centext.width + gap;
      uh = centext.height + gap;
      width  = uw;
      height = uh;
    }
  }
}

・ＭＸＭＬ定義から抜粋

  <mx:Script>
    <![CDATA[
      // ここからコールする
      ccan.setnodetext(mmxml);
    ]]>
  </mx:Script>

    <mx:VBox height="100%">
      <mx:Spacer height="100%" />
      <MyComp:MindCenterTopView id="ccan" />
      <mx:Spacer height="100%" />
    </mx:VBox>