Binding を使った Flex コンポーネント連携

[Bindable]
public var isPopEnabled:Boolean = false;
 

上のように変数の宣言の上の行に [Bindable] と記述すると isPopEnabled の値が変わったらそれを通知するイベントを発生させるというコンパイラに対する指示になります。この指定によってコンパイル時にイベント生成に必要なコードが勝手に追加されます。

このときに発生するイベント名は propertyChange という名前です。イベント名を指定することも可能です。

[Bindable(event="changePopEnabled")]
public var isPopEnabled:Boolean = false;
 

Binding

さて、MyBrowser.mxml 側では PreviousLocations からのイベントを受け取るためにイベントリスナが必要になります。が、Flex はここでも便利な機能を提供しています。タグの属性に中括弧で囲んだ変数を代入する式があるとイベントリスナがコンパイル時に自動的に生成されるというものです。この機能をバインディングと呼んでいます。

<mx:Button label="戻る" enabled="{prevLocations.isPopEnabled}"/>
 

上のように記述することを enabled 属性に prevLocations.isPopEnabled をバインドすると言ったりします。これだけで対象 （ここでは prevLocations.isPopEnabled） の値が変更されたイベントで enabled 属性の値を再設定する仕組みまで記述したことになります。

以上で ”PreviousLocations の側から履歴の状況が変わったら通知” という目的は達成されました。あとはこの変更にあわせていくつかの修正です。

MyBrowser.mxml 内では isPopEnabled() を呼び出している２つの行を削除します。

代わりに PreviousLocations.as 内では、履歴を保持している配列の中身を変更したら setPopEnabled() の呼び出しを行うように直します。これにより popLocation() と pushLocation() で一箇所ずつ修正されることになります。

下が新しい PreviousLocations.as ファイルです。

package
{
  public class PreviousLocations
  {
    private var history:Array = new Array();
    private var isPop:int = 0;
 
    [Bindable]
    public var isPopEnabled:Boolean = false;
    private function setPopEnabled():void {
      isPopEnabled = history.length > 1;
    }
 
    public function popLocation():String {
      var prevLocation:String = null;
      if (history.length > 1) {
        history.pop();
        setPopEnabled();
        prevLocation = history[history.length - 1];
        isPop++;
      }
      return prevLocation;
    }
    public function pushLocation(location:String):void {
      if (isPop > 0) {
        isPop--;
      } else {
        history.push(location);
        setPopEnabled();
      }
    }
  }
}
 

こちらは MyBrowser.mxml です。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      private function back():void {
        var prevURL:String = prevLocations.popLocation();
        if (prevURL != null) {
          setLocation(prevURL);
        }
      }
      private function setLocation(location:String):void {
        html.location = location;
      }
 
      private function onLocationChange(e:Event):void {
        html.alpha=0
      }
      private function onDomInitialize(e:Event):void {
        prevLocations.pushLocation(html.location);
        inputTF.text = html.location;
      }
      private function onComplete(e:Event):void {
        fadeIn.target = html;
        fadeIn.play();
      }
    ]]>
  </mx:Script>
  <mx:Style source="MyBrowser.css"/>
  <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
  <local:PreviousLocations id="prevLocations"/>
 
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/>
    <mx:Button label="移動" click="setLocation(inputTF.text)"/>
    <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%"
    locationChange="onLocationChange(event)" domInitialize="onDomInitialize(event)" complete="onComplete(event)"/>
</mx:ApolloApplication>