MXMLでTextFieldクラス使用サンプルソース

現在開発中のプロジェクトで、MXMLでTextFieldクラスを使う必要があり、かなり戸惑ったのでFlex備忘録として残して置く事にします。肝なのはFlex3ではflashパッケージであるTextFieldクラスを直接addChildできない。(mxパッケージは直接addChildできます)必ずUIComponent でラップする必要があるということです。ちょっと動かせるまでに調べる時間が掛かったのでもう忘れてしまわないようね！

ＭＸＭＬからスクリプト部抜粋

      // 左右中のキャンバス作成(３分割)
      lcan = new Canvas();
      ccan = new Canvas();
      rcan = new Canvas();

      var ctxt:String = mmxml.node[0].@TEXT;
      trace("node[0].@TEXT="+ctxt);
      var txt:TextField = new TextField();
      var tf:TextFormat = new TextFormat();
      tf.size = 15;
      txt.defaultTextFormat = tf;
      txt.mouseEnabled = false;
      txt.autoSize = TextFieldAutoSize.LEFT;
      //txt.border = true;           // デバック時確認用
      txt.x = 0;
      txt.y = 0;
      txt.text = ctxt;
      trace("txt w,h="+txt.width+","+txt.height);
      trace("text w,h="+txt.textWidth+","+txt.textHeight);
      ccan.width = txt.width + gap;
      txt.y = (ccan.height - txt.height) / 2;

      // 子UIComponent登録
      var ui:UIComponent = new UIComponent();
      ui.addChild(txt);
      ccan.addChild(ui);

      // (省略)ここで子キャンバスサイズ設定処理
      // (省略)ここでキャンバス位置設定処理

      // コンテナに子キャンバスを追加
      mdmap.addChild(lcan);
      mdmap.addChild(ccan);
      mdmap.addChild(rcan);

・ＭＸＭＬ定義から抜粋

<!-- キャンバスコントロール -->
<mx:Canvas
    xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%" height="100%" styleName="mindBox"
    initialize ="initmindmap()"
    creationComplete="compmindmap()"
    mouseDown="mouseDownHandler(event)"
    mouseUp="mouseUpHandler(event)"
    mouseOut="mouseOutHandler(event)"
    horizontalScrollPolicy="auto"
    verticalScrollPolicy="auto">

  <mx:Canvas id="mdmap" />
</mx:Canvas>