Apollo でブラウザを作る の続き

back() 関数内では一つ前の URL を HTML コンポーネントの location プロパティ、すなわち html.location に設定することになります。（HTML コンポーネントの詳しい使い方は別の機会に説明します） そうすると以前のURLを覚えている必要がありますので、履歴を保持するための配列も一つ定義します。スクリプトの箇所は、以下のようになります。

  <mx:Script>
    <![CDATA[
      // この配列に現在表示中の URL までが記録されている
      private var history:Array = new Array();
 
      private function back():void {
        if (history.length > 1) {
          history.pop();  // 現在の URL を廃棄
          var prevURL:String = history[history.length - 1]; // 最終エントリを取得
          html.location = prevURL;  // HTML コンポーネントに URL を設定
          inputTF.text = prevURL;   // 入力テキストフィールドの表示も変更
        }
      }
    ]]>
  </mx:Script>
 

あとは URL が変更される毎に history 配列に URL を追加する仕組みを作れば出来上がりです。HTML コンポーネントは、指定された URL からリソースの読み込みが完了すると complete というイベントを発生しますので、これを使ってみることにします。

まず、HTML コンポーネントのタグを使ってイベントハンドラを設定します。

  <mx:HTML id="html" width="100%" height="100%" complete="pushURL(event)"/>
 

今回は pushURL() という関数を呼ぶように指定しました。pushURL() の中身はこんな感じです。

  private function pushURL(e:Event):void {
    // 現在の location を配列に記録
    history.push(html.location);
    // あわせて入力テキストフィールドの表示も変更
    inputTF.text = html.location;
  }
 

以上で "戻る" ボタンらしきものが出来たと思います。以下は全体のコードです。

<?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 function back():void {
        if (history.length > 1) {
          history.pop();  // 現在の URL を廃棄
          var prevURL:String = history[history.length - 1]; // 最終エントリを取得
          html.location = prevURL;  // HTML コンポーネントに URL を設定
          inputTF.text = prevURL;   // 入力テキストフィールドの表示も変更
        }
      }
      private function pushURL(e:Event):void {
        // 現在の location を配列に記録
        history.push(html.location);
        // あわせて入力テキストフィールドの表示も変更
        inputTF.text = html.location;
      }
    ]]>
  </mx:Script>
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://"/>
    <mx:Button label="移動" click="html.location = inputTF.text;"/>
    <mx:Button label="戻る" click="back()"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%" complete="pushURL(event)"/>
</mx:ApolloApplication>
 

Apollo アプリケーションの配布

作成したアプリケーションを配布するには air パッケージを作成します。Flex Builder の場合は、まずメニューバーから File -> Export と選択します。そうすると Flex Builder は以下のパネルを表示します。

Deployable AIR File を選択して Next ボタンを押します。今度は下図のように Apollo Deployment Export Wizard が表示されます。MyBrowser-app.xml ファイルを選んで Wizard 下部の Finish ボタンを押します。これで air ファイルが作成され、Navigator パネル内の MyBrowser.mxml の上あたりに表示されます。

今回作成した air ファイルに含まれるのは上で指定した xml ファイルと MyBrowser.swf の2つのみです。上記のパネルが表示された状態で、Finish の代わりに Next を押すと他に air ファイルに含めたいファイルを指定することもできます。

air ファイルをダブルクリックするとインストーラが起動されます。