Apollo ブラウザのコードの見直しの続き

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
 
</mx:HBox>
 

ここに MyBrowser.mxml ファイルから TextInput タグと２つの Button タグをコピーしてきます。Hbox タグの間にそのままペーストするだけです。

履歴管理の機能もこちらのコンポーネントに持たせた方がよさそうですので、PreviousLocations タグもコピーします。その際ルートの HBox タグに xmlns:local="*" の追加を忘れないようにしましょう。local 名前空間の宣言が必要ですので。

以上で下のようなファイルができたと思います。 これで、タグの部分の移動は完了です。

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <local:PreviousLocations id="prevLocations"/>
  <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>
 

次に、スクリプトの記述を始めます。

HTMLControlBar からはユーザの操作に応じて HTML コンポーネントの location を設定できなければなりません。そこで、HTML コンポーネントへの参照を属性として持つことにします。名前は target とします。

import mx.controls.HTML;
public var target:HTML;
 

HTMLControlBar 内３つの UI コンポーネントから呼び出される back() と setLocation() はそのままコピーしてもよさそうです。直接 HTML コンポーネントを参照していた箇所 （html と記述された部分） だけ target と置き換えます。

private function back():void {
  var prevURL:String = prevLocations.popLocation();
  if (prevURL != null) {
    setLocation(prevURL);
  }
}
private function setLocation(url:String):void {
  target.location = url;
}
 

同様に onDomInitialize() もそのままコピーしてきます。こちらも html → target の変換のみ行います。

public function onDomInitialize():void {
  prevLocations.pushLocation(target.location);
  inputTF.text = target.location;
}
 

とりあえずこれで HTMLControlBar に必要な機能はひととおりそろいました。

MXML コンポーネントの利用

MyBrowser.mxml ファイル側では、これまで HBox タグで囲まれていた箇所全体を、上で作成した HTMLControlBar のタグで置き換えます。

<local:HTMLControlBar id="htmlControl" target="{html}"/>
 

この際 HTMLControlBar の target 属性に html を指定します。これで HTMLControlBar コンポーネントに HTML コンポーネントへの参照が設定されます。

MyBrowser.mxml 内のスクリプトブロックに関しては、back() と setLocation() は HTMLControlBar に移したのでそのまま削除して構いませんが、onDomInitialize() はちょっと配慮が必要です。単純に削除すると HTMLControlBar 側の onDomInitialize() を呼び出す手段がなくなってしまうからです。

なので、ここでは onDomInitialize() は残すことにしてその中で HTMLControlBar コンポーネント側の onDomInitialize() を呼び出すように変更してみます。

private function onDomInitialize(e:Event):void {
  htmlControl.onDomInitialize(e);
}
 

以上で MyBrowser から外部コンポーネント化した HTMLControlBar を使えるようになりました。

あと少し変更したい箇所がありますが、とりあえずここまでのまとめです。まずは、HTMLControlBar.mxml ファイルから。

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      import mx.controls.HTML;
      public var target:HTML;
 
      public function onDomInitialize(e:Event):void {
        prevLocations.pushLocation(target.location);
        inputTF.text = target.location;
      }
      private function back():void {
        var prevURL:String = prevLocations.popLocation();
        if (prevURL != null) {
          setLocation(prevURL);
        }
      }
      private function setLocation(url:String):void {
        target.location = url;
      }
    ]]>
  </mx:Script>
  <local:PreviousLocations id="prevLocations"/>
  <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>
 

それから 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 onLocationChange(e:Event):void {
        html.alpha=0
      }
      private function onDomInitialize(e:Event):void {
        htmlControl.onDomInitialize(e);
      }
      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:HTMLControlBar id="htmlControl" target="{html}"/>
  <mx:HTML id="html" width="100%" height="100%" locationChange="onLocationChange(event)"
    domInitialize="onDomInitialize(event)" complete="onComplete(event)"/>
</mx:ApolloApplication>
 

PreviousLocation.as は前回のものが使用できます。