FlashデザイナだってFlex！

ブラウザを作る

　実際にFlexを使ってAIRアプリケーションを作成していきましょう。今回は、本連載の第1回で紹介したFlex Builder 3を使って説明していきます。まだインストールをしていない場合は、ぜひ体験版（https://www.adobe.com/cfusion/tdrc/index.cfm?loc=ja&product=flex）をインストールして体験してください。

　Flex BuilderでAIRアプリケーションを作成する流れは3ステップで紹介します。

　ステップ1では、プロジェクトを作成します。「ファイル→新規→Flexプロジェクト」と選択し、プロジェクト名を入力し、「アプリケーションの種類」を「デスクトップアプリケーション」を選択します。

　ステップ2では、コンポーネントのレイアウト、アクションの編集をします。

　ステップ3では、AIRアプリケーションのパブリッシュをします。「ファイル→書き出し→リリースビルド」と選択し、対象となるプロジェクトを選択して「次へ」、AIRアプリケーションに付与する証明書を選択して「終了」を選択します。証明書はその場で自己証明書として作成することも可能です。

　Flexアプリケーションはブラウザ上で実行されますが、AIRアプリケーションは単体のアプリケーションとして動作します。今回はFlexでWebブラウザを作成してみましょう。

　まずは、単純に固定のURLを表示するだけのブラウザを作成します。

　プロジェクト名を「MyBrowser」として新規Flexプロジェクトを作成します。デフォルトではリスト1のような構成になっています。

　MyBrowser.mxmlを開くと、AIRアプリケーションとしてのひな形が用意されています。このままでは単純にウィンドウが表示されるだけなので、HTMLコンポーネントを追加します。HTMLコンポーネントはlocation属性に指定したURLのページを表示するコンポーネントです。HTMLコンポーネントはAIRランタイムに含まれるコンポーネントです。

　簡単にコンポーネントを配置するには、編集モードをデザインモードに切り替えます。デザインモードでは、実際のアプリケーションのGUIが表示されます。デザインモードに切り替えるには、中央コンソールの「デザイン」ボタンをクリックします。

　「コンポーネントパネル」の中にある「Adobe AIR→HTML」をドラッグして、適当な位置に配置します。続いて、「Flexプロパティ」パネルで配置したHTMLコンポーネントの属性を調整します（リスト2）。

　これだけで単純に表示するだけのブラウザが完成しました。動作確認をするには、「実行→MyBrowserを実行」と選択するとアプリケーションが起動します。ここまでのソースはこちらからダウンロード（http://www.thinkit.co.jp/images/article/88/3/8831.zip）できます（8831.zip/0.303 KB）。

アクションの割り当て

　一般的なブラウザには、戻る、進む、更新ボタンやアドレスバーなどが用意されています。これをHTMLコンポーネントと同様の手順で、ButtonコンポーネントやTextInputコンポーネントを配置していきます。

　続いて、ボタンをクリックしたときのアクションを定義していきます。コンポーネントを識別するためのIDとイベントを「Flexプロパティ」に記述します。続いて、イベントに定義したイベントハンドラをActionScriptで記述していきます。

　MXMLファイルにActionScriptを記述するには、