Apollo HTML コンポーネントのイベント

以下が、HTML コンポーネントの描画に関連するイベントです。

locationChange: HTML コンポーネントの location プロパティが変更された
domInitialize : HTML ドキュメントの読み込み開始に伴い DOM が初期化された
htmlRender    : HTML コンテンツの描画が完了した
complete      : 全てのコンテンツの読み込みと描画が完了した
 

このうち htmlRender は読み込むコンテンツが複数あるとそれぞれのコンテンツの描画完了に対して発生します。

今回は読み込み開始のタイミングで処理を行いたい訳ですから domInitialize を使うのがよさそうです。そこで complete イベントで呼び出している pushURL() メソッドから履歴操作に関連する分を取り分けます。

メソッドを分けたついでにそれぞれ onDomInitialize() と onComplete() という名前に変更します。そのまたついでに locationChange の処理も onLocationChange() というメソッドで行うことにします。

この変更で、呼び出されるメソッドの定義はそれぞれ以下のようになります。

private function onLocationChange(e:Event):void {
  html.alpha=0
}
private function onDomInitialize(e:Event):void {
  if (isBack > 0) {
    isBack--;
  } else {
    history.push(html.location); // 現在の location を配列に記録
  }
  inputTF.text = html.location;
}
private function onComplete(e:Event):void {
  fadeIn.target = html; // 効果のターゲットを設定したら開始
  fadeIn.play();
}
 

いままで back() の中でも入力テキストフィールドに読み込む対象の URL を設定していましたが、どうやら onComplete() のタイミングだけでよさそうです。ということで back() メソッドからはその行を削除することにします。

最後に HTML コンポーネントからこれらのメソッドが呼び出されるよう記述を変更します。

<mx:HTML id="html" width="100%" height="100%" locationChange="onLocationChange(event)" 
  domInitialize="onDomInitialize(event)" complete="onComplete(event)"/>
 

さて、これを実際に試してみましょう。描画完了前に ”戻る” を押しても2つ前には戻らなくなったかと思います。

UI コンポーネントの状態を変更する

問題その３： 履歴が無くても ”戻る” ボタンが押せる状態になっている

プログラムを起動した瞬間から ”戻る” ボタンがアクティブになっています。これも気になりますよね。

まず、初期表示時に ”戻る” ボタンを無効にしたいと思います。それには enabled プロパティを false にします。後でボタンを有効にするためこのプロパティを切り替える必要があるはずなので、id も指定しておきます。backBtn という名前にしてみました。

<mx:Button id="backBtn" label="戻る" click="back()" enabled="false"/>
 

ボタンを有効にできるのは履歴が2つ以上あるときです。履歴を追加したタイミングで履歴の数をチェックしてボタンの有効/無効を切り替えるようなロジックを追加します。

private function onDomInitialize(e:Event):void {
  if (isBack > 0) {
    isBack--;
  } else {
    history.push(html.location); // 現在の location を配列に記録
    if (history.length > 1) { // 履歴が１より多い
      backBtn.enabled = true;
    }
  }
  inputTF.text = html.location;
}
 

逆に ”戻る” を押したときは履歴の数が１以下になったら無効に戻す処理が必要です。

private function back():void {
  if (history.length > 1) {
	...
    if (history.length <= 1) { // 履歴が１以下
      backBtn.enabled = false;
    }
  }
}
 

これでボタンの表示が戻る先の有り無しで切り替わるようになったと思います。

以下が今回の修正を反映したコードです。50 行余りになりました。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      // この配列に現在表示中の URL までが記録されている
      private var history:Array = new Array();
      private var isBack:int = 0;
 
      private function back():void {
        if (history.length > 1) {
          history.pop();  // 現在の URL を廃棄
          var prevURL:String = history[history.length - 1]; // 最終エントリを取得
          html.location = prevURL;  // HTML コンポーネントに URL を設定
          isBack++;
          if (history.length <= 1) { // 履歴が１以下
            backBtn.enabled = false;
          }
        }
      }
      private function loadURL():void {
        html.location = inputTF.text;
      }
      private function onLocationChange(e:Event):void {
        html.alpha=0
      }
      private function onDomInitialize(e:Event):void {
        if (isBack > 0) {
          isBack--;
        } else {
          history.push(html.location); // 現在の location を配列に記録
          if (history.length > 1) { // 履歴が１より多い
            backBtn.enabled = true;
          }
        }
        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"/>
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://" enter="loadURL()"/>
    <mx:Button label="移動" click="loadURL()"/>
    <mx:Button id="backBtn" label="戻る" click="back()" enabled="false"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%" locationChange="onLocationChange(event)"
    domInitialize="onDomInitialize(event)" complete="onComplete(event)"/>
</mx:ApolloApplication>