mxmlをほとんど書かずに,ActionScript3でflexアプリを書くには

俺,大体Javaは理解してるし,ActionScript2.0の頃からasファイル書いてたぜ!

mxml?何だよそれ!わかんねーよ!

書き方勉強するの今はめんどくさいし,コードでインスタンス作って,ボタンやリストの位置指定したり,プロパティの設定をしたいんだよ!


ってな欲求がふつふつと湧いたので,どうやったらそれができるか調べてた。


Flex Builderでやってりゃ,mxmlでレイアウトしていく方が俄然早いし,保守性やらフレームワークの設計思想的には良いんだろうけど,エディタで細々とmxmlを書いてはコンパイルして,レイアウトをしていく作業はめんどくさすぎました。特に,アイデアをさっそくプロトタイプで実装したいこの状況においては。

Flexでは,

package {
    import mx.controls.Button;
    import flash.display.Sprite;

    public class Hoge extends Sprash {
        private btn:Button;

        public function Hoge()
        {
            btn = new Button();
            btn.label = "hogehogehoge";
            addChild(btn);
        }
    }
}


というように,Pure ActionScript でButtonやListなどのコントロールを表示するようなコードを書いても,ちゃんと表示することができない。


flash.*パッケージのクラスは自由自在に扱えるんだけど,mx.*パッケージのクラスがどうも上手く行かないのだ。上手くこの問題を解決する方法はないか調べていたら,同じ問題で悩んでいる方を発見。

ActionScriptでmxパッケージ
http://blog.livedoor.jp/oidemon/archives/51109819.html


んで,英語圏でこの問題は扱われていないか調べていたら,海外でも同じ問題で悩んでいる人を発見(こちらの情報は古いようだが)。

■helpQLODhelp: ActionScript 3 - First Steps XIV:

http://www.helpqlodhelp.com/blog/archives/000140.html


このサイトでは,Pure ActionScript ではできないみたいなところで話題が終わっていた。けれども,最小限のmxmlで,ほとんどをActionScriptで書くという方法については触れられていた。


その方法で書いたのが以下のコード。flvファイルを再生するVideoDisplayというコントロールを置いて,それをButtonで再生したり,停止したりする簡単なサンプルだ。

■確認URL

http://masutaro.jp/hoby/onlyas/

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
import mx.controls.*;
import mx.events.*;

private var player:VideoDisplay;
private var btn:Button;

private var uri:String = "flv/1.flv";

private function init():void
{
    /* btn の初期化 */
    btn = new Button();
    btn.label = "停止する";
    btn.x = 110;
    btn.y = 250;
    btn.setStyle('fontSize', 16);
    btn.addEventListener(FlexEvent.BUTTON_DOWN, btn_event);
    
    /* player の初期化 */
    player = new VideoDisplay();
    player.source = uri;
    player.autoRewind = false;

    /* 表示オブジェクトコンテナに各表示オブジェクトを追加 */
    addChild(player);
    addChild(btn);
}

private function btn_event(e:Event):void
{
    if (player.playing == true) {
        player.stop();
        btn.label = "再生する";
    } else {
        player.play();
        btn.label = "停止する";
    }
}
</mx:Script>
</mx:Application>


コードで全てレイアウトしてると,何だか Visual StudioC# を書いてたころを思い出します。ミソは


の creationComplete で init() を呼び出すところですかね。で,init() の方で本処理を定義してます。


「でも,これだとmxmlにコードごちゃごちゃ書かないといけないの!??」って感じだけど,別でasファイル書いてxmlnsで自作パッケージ読み込む方法など駆使すれば,構造的にコードを書くこともできるはず(すみません。これはまだ検証してません)。


これで,Flexのリファレンス(http://livedocs.adobe.com/flex/2_jp/langref/index.html)で mx.controlsパッケージのコントロールを確認しては,コードをガリガリ書いて動作を確認するという作業ができるようになります♪