Flex 2: 2006年9月アーカイブ

flash.external.ExternalInterface クラスを使用する

flash.external.ExternalInterface は Flash Player とそのコンテナ(ブラウザなど)間で通信する為のクラス。ブラウザの HTML ドキュメントに Flash Player からちょっかいだしたり出されたりできる。

使い道

例えばシステムのフォントを列挙して JavaScript で利用する。サンプルはこちらscreenshot.png

使用した MXML ファイル

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="this.applicationCompleteEventHandler(event);" layout="absolute" width="400" height="200" fontSize="12">
    <mx:Script>
        <![CDATA[
            import flash.external.ExternalInterface;
            import mx.events.FlexEvent;

            protected function applicationCompleteEventHandler(event:FlexEvent):void
            {
                var available:Boolean = ExternalInterface.available;
                this.availableLabel.text = "外部インターフェイス: "
                    + (available ? "利用可能" : "利用不可");

                if (available)
                {
                    ExternalInterface.addCallback("enumerateFont", this.enumerateFont);
                }
            }
            
            public function enumerateFont():Array
            {
                if (ExternalInterface.available)
                {
                    var fontNames:Array = new Array();
                    var fonts:Array = Font.enumerateFonts(true);
                    
                    for each (var font:Font in fonts)
                    {
                        fontNames.push(font.fontName);
                    }

                    return fontNames;
                }
                
                return null;
            }
        ]]>
    </mx:Script>
    
    <mx:Panel layout="vertical" title="フォント列挙" x="10" y="10" horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
        <mx:Label id="availableLabel"/>
    </mx:Panel>
</mx:Application>

イベントの流れ

| | コメント(0)

イベントの発生順序

Flex ではイベントは DOM Level3 Event Model に沿った実装になっており、イベントの流れを3つの段階に分けて考えられます。発生順序もこの通り。

  1. キャプチャ段階
  2. ターゲット段階
  3. バブリング段階

それぞれの段階の違い

Flex アプリケーションでは全ての視覚オブジェクト (DisplayObject) は木構造になっています。イベントは親要素から子要素、またはその逆を辿り伝わっていきます。

キャプチャ段階
ルート要素から子要素へイベントが発生していく。イベント発生要素に辿り付くまでの段階
ターゲット段階
イベント発生要素でイベントが発生した段階。
バブリング段階
イベント発生要素の親要素からルート要素へ、キャプチャ段階の逆の順序で発生して行く。

tree.jpg

このアプリケーションの Button オブジェクトで click イベントが発生した場合、イベントは次のように発生します。

  1. キャプチャ段階
    1. Application
    2. Panel
    3. TitleWindow
    4. Accordion
    5. Canvas
  2. ターゲット段階
    1. Button
  3. キャプチャ段階
    1. Canvas
    2. Accordion
    3. TitleWindow
    4. Panel
    5. Application

実例

Panel コンテナ内をクリックすると、イベントを発生順に表示します。(要 Flash Player 9 以降)

使用した MXML コード

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="this.creationCompleteEventHandler(event);" layout="absolute" >
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;

      private var eventCount:int;
      private var eventPhaseTextTable:Object;
      
      protected function creationCompleteEventHandler(event:Event):void
      {
        // イベント ハンドラを登録する。
        this.panel.addEventListener(MouseEvent.CLICK, this.clickEventHandler);
        this.titleWindow.addEventListener(MouseEvent.CLICK, this.clickEventHandler);
        this.accordion.addEventListener(MouseEvent.CLICK, this.clickEventHandler);
        this.canvas.addEventListener(MouseEvent.CLICK, this.clickEventHandler);
        this.button.addEventListener(MouseEvent.CLICK, this.clickEventHandler);

        // キャプチャ段階のイベント ハンドラを登録する。
        this.panel.addEventListener(MouseEvent.CLICK, this.clickEventHandler, true);
        this.titleWindow.addEventListener(MouseEvent.CLICK, this.clickEventHandler, true);
        this.accordion.addEventListener(MouseEvent.CLICK, this.clickEventHandler, true);
        this.canvas.addEventListener(MouseEvent.CLICK, this.clickEventHandler, true);
        this.button.addEventListener(MouseEvent.CLICK, this.clickEventHandler, true);

        // イベントの結果表示を初期化する為のハンドラ。
        this.panel.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDownEventHandler);
        
        // イベント フェーズの文字列変換テーブル。
        this.eventPhaseTextTable = {
          (EventPhase.AT_TARGET.toString()) : "Target",
          (EventPhase.BUBBLING_PHASE.toString()) : "Bubbling",
          (EventPhase.CAPTURING_PHASE.toString()) : "Capturing"
        };
      }
      
      protected function mouseDownEventHandler(event:MouseEvent):void
      {
        this.eventCount = 1;
        this.dataGrid.dataProvider = new ArrayCollection();
      }
      
      protected function clickEventHandler(event:Event):void
      {
        var dataProvider:ArrayCollection = this.dataGrid.dataProvider as ArrayCollection;
        var item:Object = {
            "no" : this.eventCount,
            "target" : event.currentTarget.className,
            "phase" : this.eventPhaseTextTable[event.eventPhase]
        };
        dataProvider.addItem(item);
        this.eventCount++;
      }
    ]]>
  </mx:Script>

  <mx:Panel layout="absolute" title="Panel" top="10" left="10" right="10" id="panel" height="182">
    <mx:TitleWindow layout="absolute" left="10" top="10" bottom="10" right="10" showCloseButton="true" title="TitleWindow" id="titleWindow">
      <mx:Accordion id="accordion" left="10" top="10" bottom="10" right="10">
        <mx:Canvas label="Canvas" width="100%" height="100%" id="canvas">
          <mx:Button x="10" y="10" label="Click this" id="button"/>
        </mx:Canvas>

      </mx:Accordion>
    </mx:TitleWindow>
  </mx:Panel>
  <mx:Panel layout="absolute" left="10" top="200" bottom="10" right="10" title="Events">
    <mx:DataGrid id="dataGrid" top="10" left="10" right="10" bottom="10">
      <mx:columns>

        <mx:DataGridColumn width="50" dataField="no" headerText="No"/>
        <mx:DataGridColumn dataField="target" headerText="Target"/>
        <mx:DataGridColumn dataField="phase" headerText="Phase"/>
      </mx:columns>
    </mx:DataGrid>
  </mx:Panel>

</mx:Application>

このアーカイブについて

このページには、2006年9月以降に書かれたブログ記事のうちFlex 2カテゴリに属しているものが含まれています。

次のアーカイブはFlex 2: 2006年10月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 4.12