Flex BuilderとApolloエクステンションのインストール
前回はApolloアプリケーションの開発環境としてSDKを紹介しました。もう1つの開発環境がFlex Builderです。Flex BuilderはもともとFlashベースのWebアプリケーションを開発するためのツールですが、Flex Builder 2.0.1にApolloエクステンション(機能拡張)をインストールすることでApolloアプリケーションの開発が可能になります。統合開発環境なのでSDKと比べて開発効率も良く、扱いも簡単です。トライアル版 がダウンロードできるので試してみましょう。
残念ながらFlex Builder 日本語版はApolloエクステンションとの動作確認が行われていないため、現時点では英語版を使ったほうが無難です(ただし自己責任の範囲であれば、アドビの上条さんのブログ で日本語版を使用する手順が紹介されています) 。Flex Builderをインストールしたら、Adobe Labs からApolloエクステンション(Apollo Extension for Adobe Flex Builder 2.0.1)をダウンロードしてインストールしましょう。
プロジェクトの作成
Flex BuilderでApolloアプリケーションを開発するには、まず新規プロジェクトを作成します。
[ File]メニューの[New]から[Apollo Project]を選びます。新規プロジェクトウィザードが表示されます。
アプリケーションのデータへのアクセス方法は[Basic]のまま[Next]をクリックします。
プロジェクト名を入力します。ここではTestAppとしました。[ Next]をクリックします。
ソースファイルやコンパイル先のパス等を指定できますが、デフォルトのままで構いません。[ Next]をクリックします。
アプリケーションの情報を入力します。この情報はアプリケーションのインストール時に使われます。IDはApolloアプリケーションを識別するためのもので、ユニークな値が求められます。ドメイン名を逆にした反転ドメインを利用するとよいでしょう。以下、順番にアプリケーション名、発行元、アプリケーションの説明、コピーライトを入力したら[Finish]をクリックします。
アプリケーションの制作とテスト
Flex Builderでは、各種コンポーネントをMXMLというタグ言語でレイアウトしてアプリケーションを組み立てます。プロジェクトを作成した直後は数行のMXMLが表示された状態になっており、最初からアプリケーションの土台となる部分が用意されているわけです。そのまま実行すればApolloアプリケーションのウィンドウのみが表示されますが、それでは寂しいのでテキストを入れてみましょう。
TestApp.mxmlと書かれたタブの下にある[Design]ボタンをクリックしてデザインモードに切り替えます。これはMXMLを直接編集することなくコンポーネントを視覚的にレイアウトできるモードです。
デザインモードではコンポーネントの配置やプロパティの変更が楽に行える
画面左下の[Components]ビューからLabelコンポーネントを配置して「Hello again !」と入力します。フォントサイズ等のプロパティは画面右の[Flex Properties]ビューで変更可能です。[ Source]ボタンをクリックしてソースモードに戻れば、今配置したコンポーネントがMXMLに反映されていることが分かるでしょう。作業が終わったら保存して[Run]ボタンまたは[Debug]ボタンをクリックしてみましょう。すると作成中のアプリケーションが起動して動作チェックができます。
[Run]ボタン(左)と[Debug]ボタン(右) 。trace()やブレイクポイントを使ってデバッグを行うときは[Debug]ボタンを使う
実行中のアプリケーション
アプリケーションのパッケージング
アプリケーションが完成したら、Flex BuilderからAIRファイルとして書き出すことができます。
[File]メニューから[Export...]を選ぶと書き出しウィザードが表示されます。
[Deployable AIR file]を選択し、[ Next]をクリックします。
AIRファイルの書き出し先を指定し、[ Finish]をクリックするとAIRファイルが作成されます。
以上がFlex Builderを使ったApolloアプリケーション開発の流れです。