CodeZine(コードジン)

特集ページ一覧

Adobe Flexのはじめの一歩を教えます(第2回)
~Flexを使ったアプリケーションを試す

「Adobe Flex Builder 3」と「Adobe LiveCycle」でRIA開発を体験

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

1からはじめる人は「Adobe Flex Builder 3」スタンドアローン版で

 「Adobe Flex Builder 3.0.2 Professionalのダウンロード」ページでは、インストールする環境に合わせて英語/日本語版や対象OSを選択できます。

 前回解説したように、Adobe Flex Builder 3にはスタンドアローン版Eclipseプラグイン版の2つがあります。このページからダウンロードできるのはスタンドアローン版なので、既に利用しているEclipseにプラグインを追加したい場合は、Webページの指示に従って「Flex Builder 3 Professional Eclipseプラグイン」をダウンロードしてください。

インストールしたFlex Builder 3の画面
インストールしたFlex Builder 3の画面

 スタンドアローン版とプラグイン版のどちらをダウンロードするかは、ユーザーの環境に合わせて選択します。なお、既にEclipseを使っていてもプラグインの追加によって起動が遅くなることから敢えてスタンドアローン版を使って環境を分けるという場合もあります。また大規模なSIerなどでは開発する箇所が細かく分割されていることからスタンドアローン版を、小規模な環境ではすべてを一括管理するためにプラグイン版をそれぞれ選ぶことが多いようです。

「Adobe LiveCycle」でFlexアプリケーションのデモを体験

 Adobe Flex Builder 3をインストールしてすぐに開発をはじめてもよいですが、その前にサーバサイドの環境を用意して実際にFlexフレームワークを使ったRIAを試してみましょう。Adobeのサーバサイドのソリューションの1つに「Adobe LiveCycle」があります。このAdobe LiveCycleの体験版には、Flexフレームワークを使ったサンプルアプリケーションが納められています。Adobe LiveCycleの体験版もAdobe Flex Builder 3と同じくAdobeのWebサイトのダウンロードページからダウンロード可能です。こちらも60日間、すべての機能を利用できます。

 ここではWindows版について解説します。Windows版のインストーラでは、インストール中に実行環境としてTomcatまたはJava EEを選択する画面が表示されます。今回紹介するデモンストレーションはTomcatを利用するため「LiveCycle Data Services with Tomcat」を選択してください。

 インストールが終了したら「C:\lcds\tomcat\bin」にある「startup.bat」をダブルクリックしてTomcatを起動します。続いて[スタートメニュー]-[プログラム]-[Adobe]-[LiveCycle Data Services ES 2.6.1]にある[Start Samples Database]を選択します。2つのコマンドライン画面が表示され、サンプルアプリケーションを利用できる状態になりました。

 この状態でWebブラウザを立ち上げて「http://localhost:8400/lcds-samples/」リンクを開きます。するといくつかのFlexアプリケーションを利用できるWebページが表示されます。その中から[30 Minute Test Drive]項目にある[Take the test drive]リンクをクリックしてみます。

 表示されたページの「Run the sample:」項目に従って[here]リンクを押してアプリケーションを起動します。画面下部に[Get Data]ボタンのあるページが表示されます。ボタンをクリックするとデータがグリッドに読み込まれ、ソートやカラムの並べ替えといった機能を実際に体験できます。

サンプルアプリケーション画面
サンプルアプリケーション画面

 なお、Tomcatおよびサンプルアプリケーションについては、それぞれのコマンドライン画面で[Ctrl]+[C]を押すことで終了できます。

サンプルアプリケーションのソースを「Adobe Flex Builder 3」で開く

 LiveCycleに用意されたサンプルアプリケーションにはソースも付属されており、実際にAdobe Flex Builder 3で開いて内容を確認できます。「http://localhost:8400/lcds-samples/」で表示されたページの[Source Code]欄の内容に沿って作業を行うことで、Adobe Flex Builder 3の新規プロジェクトとしてアプリケーションのソースを開くことができます。

実際に表示したソース画面
実際に表示したソース画面

 実際に前のページで表示したサンプルアプリケーションが、リッチなインターフェースを実装していながら、ごくシンプルなコードによって構成されていることが分かるでしょう。

 なお、ソースを開く際には、Adobe Flex Builder 3のワークスペースの場所(ドキュメントフォルダ内の「Flex Builder 3」)と、サンプルを動作させているコードが納められたフォルダやサーバの位置を指定する点に注意してください。解説は英語で書かれているため、一部機能については日本語への読み替えが必要になります。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • アドビ システムズ株式会社(アドビ システムズ カブシキガイシャ)

    アドビ システムズ社は、時間や場所、利用するメディアや機器を問わず、あらゆるユーザーの、アイデアや情報との関わり方に変革をもたらしています。アドビ システムズ 株式会社はその日本法人です。同社に関する詳細な情報は、Webサイト(http://www.adobe.com/jp)に掲載されています。...

バックナンバー

連載:Adobe Flexのはじめの一歩を教えます
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5