Web, Dev, Etc

Flex 4で、メインのMXML内の要素を他のクラスから参照する方法です。

「Flexアプリケーション」を作り始めると、まるでMXMLの中にコードを書くのがデフォかのようになりますが、<fx:Script>の中にコードが増えていくのはあまり気持ちよくないですね。そこで別のクラスにエントリポイントを作ることになります。これはApplicationCompleteイベントにハンドラをつけるだけです。

MyFlexApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    applicationComplete="MyEntryPointClass.main()">
    <!--UI要素とかの定義...-->
</s:WindowedApplication>

さて、MyEntryPointClassからこのMXMLを参照する方法です。

このMyFlexApp.mxmlは

• 実行時にはMyFlexAppクラスのインスタンスとして存在する。
• クラス名はアプリごとに違う。MXMLのファイル名をクラス名として持つらしい。
• Applicationのサブクラス。
• mx.core.FlexGlobals.topLevelApplicationを使えばどこからでも参照できる。
• ただしtopLevelApplicationはObject型なので、MyFlexApp型へキャストしないと使えない。

というわけで、でき上がったコードはこんな感じ。

MyFlexApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    applicationComplete="MyEntryPointClass.main();">
    <s:Button label="Button" id="theButton" />
</s:WindowedApplication>

MyEntryPointClass.as

package{
  import flash.events.MouseEvent;
  import mx.core.FlexGlobals;
  import spark.components.Application;
  public class MyEntryPointClass{
    public static function main():void{
      var app:MyFlexApp = mx.core.FlexGlobals.topLevelApplication as MyFlexApp;
      app.theButton.addEventListener(MouseEvent.CLICK, theHandler);
    }
    private static function theHandler(e:MouseEvent):void{
      // yada yada yada...
    }
  }
}

やったね！

参考：mx.core.FlexGlobals – Adobe® Flex® 4 リファレンスガイド (Flex 4)