MXML からスクリプトを分離する方法まとめ（4種類）

flash actionscript flex flashdevelop

ここ数日 Flex をいじっていて、 MXML からスクリプトを分離する方法を調べてたらいろいろ出てきたのでまとめ*1。使用環境は FlashDevelop 4.0.1 RTM + Flex SDK 4.6.0 + Windows XP Pro 32bit 。

以下で紹介するのは以下の4種類。結論を先に書くと mx.core.IMXMLObject インターフェースを実装する方法がおすすめ。

  1. <fx:Script> の source 属性を使う or include する方法
  2. mx.core.IMXMLObject インターフェース実装を使う方法
  3. mx.core.FlexGlobals.topLevelApplication を参照する方法
  4. mx.core.Application の継承クラスを使う方法

分離する前の状態

まず <fx:Script><![CDATA[ ... ]]></fx:Script> 内に処理を書いている状態を想定。ここからロジックを分離していく。

プロパティをビューにバインドしてコントロールにイベントをアタッチできれば大概のことはできるだろう、ということで処理的なものはバインドとイベントアタッチのみ。

HelloWorld/
├── bin/
├── lib/
└── src/
    └── HelloWorld/
        └── Main.mxml
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               creationComplete="onCreationComplete()">

    <fx:Script>
        <![CDATA[

        [Bindable] private var statusMsg:String = "initialized.";

        private function onCreationComplete():void
        {
            statusMsg = "Creation complete.";
        }

        private function onButtonClick():void
        {
            statusMsg = "Clicked!";
        }

        ]]>
    </fx:Script>

    <s:HGroup>
        <s:Label text="Status: {statusMsg}"/>
        <s:Button label="Click me" click="onButtonClick()"/>
    </s:HGroup>

</s:Application>

*1:こういうのは Flash Builder 使うとバシバシ自動生成してくれるのかもしれないけど使ったことないのでわかりません＞＜

続きを読む