22 October 2009
ページ ツール |
中級
Flash Builder 4 Beta 2とAdobe Live Cycle Data Services 3 Beta3 (以降、LCDS3 Beta3) を使用してモデル駆動開発を行います。
今回は、以下の手順を踏みながら説明していきます。
(Beta版を対象にした構築内容になっていますので、今後リリースされる正式版と手順等が異なる場合があります。Beta版での構築から稼働確認までを行うことを目的としている点、ご了承ください。)
注意:
執筆時点では、Mac版のLCDS3 Beta3をインストール時にアプリケーションサーバの選択が行えない不具合がありました。(今回はTomcatを使用する為、Windowsユーザーが対象となります。)
最終リリースまでには、対応される予定です。
Flexアプリケーションのモデル駆動開発を可能にする、スイートなテクノロジーの事を「Fiber(コードネーム)」と呼びます。
Fiberは、以下の3つの特徴があります。
Eclipseは統合開発環境(IDE)の1つです。JavaやFlex、PHPといった様々な言語の開発を、プラグインの拡張で容易に行えるのが特徴です。
以下のURLにアクセスします。
http://download.eclipse.org/eclipse/downloads/
Eclipse SDKまで移動します。
Windows(Supported Versions)のEclipseをダウンロードします。
ファイル圧縮をしているeclipseを解凍します。解凍先は任意です。
Eclipseを使用して、Flex4フレームワークを使用したRIA開発が可能です。今回はEclipseのプラグインにインストールするため、プラグイン版をダウンロードします。
http://labs.adobe.com/technologies/flashbuilder4/ ページで、Get the Flash Builder 4 beta 2 releaseをクリックします。
図2. Flash Builder 4 Beta 2のダウンロードリンク
注意:ダウンロードには、Adobe IDが必要です。お持ちでない方はこちらから取得してください。
Adobe Labs Downloadsにて、Flash Builder 4 Plugin for Eclipseまで移動します。
Windows版をダウンロードしてください。
ダウンロードしたFlash Builder 4を実行するとFlash Builder 4 インストールのスタート画面が起動します。
OKボタンをクリックします。
「はじめに」では、次へボタンをクリックします。
「使用許諾契約」では、同意した上で、「使用許諾契約の条項に同意する」をチェック後、次へボタンをクリックします。
「インストールフォルダを選択」では、次へボタンをクリックすると、C:\Program Files\Adobe直下にインストールします。問題がなければ、デフォルトのまま進めてください。
プラグインのインストール先となるEclipseフォルダを選択します。
ここでは「別のEclipseにプラグインをインストール」を選択し、解凍して保存したeclipseフォルダを選択します。
選択完了後、次へボタンをクリックします。
インストールの要約画面で内容に問題がなければ、インストールボタンをクリックしてください。インストール作業が開始されます。
注意:インストール時にブラウザを起動しているとインストールできません。ブラウザを全て閉じた上で、インストール作業を行ってください。
インストールが、完了すると指定した場所に Flash Builder 4 Beta 2がインストールされます。
Adobe FlexおよびAdobe AIR®を使用したリッチインターネットアプリケーション(RIA)開発 を効率化する、拡張性と柔軟性に優れた高性能フレームワークです。
http://labs.adobe.com/technologies/livecycle_dataservices3/ ページで、Get the LiveCycle Data Services 3 beta now をクリックします。
LiveCycle Data Services 3 Beta 3 Installer から、Windows版をダウンロードしてください。
Additional Downloads の Download the LiveCycle Data Services 3 Modeler Plugin も必ずダウンロードしてください。
ダウンロードしたLiveCycleDataServicesES2 version3 Beta3の実行ファイルをダブルクリックしてください。
Welcome画面では、Nextボタンをクリックします。
License Agreement画面では、I accept the terms of the License Agreementを選択。Nextボタンをクリックします。
Serial Number画面では、シリアル番号入力欄は未入力のままNextボタンをクリックします。
Install Location画面でNextボタンをクリックすると、デフォルトでは「C:¥」にインストールされます。
Installation Options画面では、Live Cycle Data Services with Tomcat にチェック後、Nextボタンをクリックします。
Pre-Installation Summary画面で、内容に問題がなければ、Installをクリックしてください。インストール作業が開始されます。
インストールが完了すると、指定した場所に LCDS 3 Beta 3がインストールされます。
Flexアプリケーションのモデル駆動開発(Fiber)をEclipse上で行える追加機能のプラグインです。
ダウンロードした Modeler Plugin を解凍すると、pluginsフォルダが出現します。pluginsフォルダの中には、様々なファイルがあります。
pluginsフォルダの中にある全てのファイルを、インストールしたFlash Builder 4 Beta 2 のフォルダにあるeclipseのplugins に移動します。
注意:ダウンロードしたeclipse直下のpluginsではありませんので、ご注意ください。
これで、Modeler Pluginのインストールは完了しました。
PostgreSQLはフリー(料金、ライセンス、2次配布)で利用できる、オープンソースのオブジェクトリレーショナルデータベース管理システム(ORDBMS)です。
PostgeSQLを使用して、モデル駆動開発を行います。
EnterpriseDB 社が提供する「ワン・クリック」インストーラを使って、PostgreSQLをインストールします。
注意:インストール前に、管理者権限のpostgresユーザを作成し、postgresユーザーで、インストール作業を行ってください。
(インターネットは、接続している状態にしてください。)
以下のページにてVersion8.4.1-1をダウンロードします。
http://www.enterprisedb.com/products/pgdownload.do
ダウンロードしたpostgresql8.4.1-1-windows.exeを、ダブルクリックします。
Set Up画面が起動します。Nextボタン>をクリックします。
Installation Directoryでも、そのままNextボタン>をクリックします。
保存先は、C:¥Program Files¥PostgreSQL¥8.4になります。
Data Directoryでも、そのままNextボタン>をクリックします。
保存先は、C:¥Program Files:¥PostgreSQL:¥8.4:¥dataになります。
Passwordは、postgresと入力してください。Retype passwordもpostgresと入力してください。入力しましたら、Nextボタン>をクリックします。
ポート番号は、5432と入力します。Nextボタン>をクリックします。
Localeは、Japanese,Japanを選択します。あとは、デフォルト値のままにします。
Nextボタン>をクリックします。
Ready to Installは、そのまま「Next」ボタンをクリックすると、インストール作業が始まります。
インストールが完了しましたら、Launch Stack Builder at exit? のチェックボックスにチェック後、Finishボタンをクリックします。
スタックビルダが起動しますので、インストールした PostgreSQLを選択して、次へボタンをクリックします。
サーバから、JDBC経由で、PostgreSQLに接続します。
ここでは、PostgreSQLのJDBCドライバをインストールする為、pgJDBCにチェックを入れ、次へボタンをクリックします。
「次へ」ボタンをクリックすると、確認画面が表示します。ここでも「次へ」ボタンをクリックします。すると、インストールが開始します。
(インストールフォルダのデフォルトは、C:¥Program Files:¥PostgreSQL:¥pgJDBCです。)
全てのインストールが完了しましたら、一度、マシンを再起動してください。PostgreSQLのインストール作業は完了した為、また初めにログインしていたユーザーに切り替え、作業を続行します。
PostgreSQLをインストール時にpgAdmin3というアプリケーションを使用して作成します。
pgAdmin3をダブルクリックで起動します。
起動後の「サーバー(1)」→ 「PostgreSQL 8.4」をクリック後、右クリックでメニューを表示します。
接続を選択すると、pgAdmin3が、パスワードを要求します。パスワードは、PostgreSQLセットアップ時に設定したパスワード(postgres)を入力し、OKボタンをクリックします。
次は、データベース → postgres をマウスクリックで選択します。
選択後、pgAdmin3の上部にあるSQLの文字が書かれたアイコン(図29の右上にあるアイコン)をクリックします。
SQLの実行ウィンドウが表示します。SQLエディタタブを選択し、エディタ内にあるSQLを削除後、以下のSQLを実行してください。
CREATE SEQUENCE hibernate_sequence
INCREMENT 1
MINVALUE 1
MAXVALUE 9223372036854775807
START 6;
CREATE TABLE account
(
"name" character varying(255),
address character varying(500),
tel character varying(20),
postcd character(8),
entrydate date,
empid bigint,
id serial NOT NULL,
CONSTRAINT pri_key PRIMARY KEY (id)
);
INSERT INTO account("name", address, tel, postcd, entrydate, empid)
VALUES ('徳山禎男','東京','090-9999-9999','111-2222','2009-09-19',1);
INSERT INTO account("name", address, tel, postcd, entrydate, empid)
VALUES ('Flash Professional CS5 太郎','埼玉','090-1111-3333','222-2222','2009-09-19',2);
INSERT INTO account("name", address, tel, postcd, entrydate, empid)
VALUES ('Flash Player 10.1 次郎','北海道','090-2222-3333','333-2222','2009-09-26',3);
INSERT INTO account("name", address, tel, postcd, entrydate, empid)
VALUES ('Slider 三郎','沖縄','090-3333-4444','444-2223','2009-09-30',4);
INSERT INTO account("name", address, tel, postcd, entrydate, empid)
VALUES ('Catalyst 四郎','京都','090-3333-4444','444-2223','2009-01-30',5);
クエリーは、成功しました: 1 行の影響があり, 実行時間は、 xxミリ秒でした。
(xxは実際の実行時間です。)
上記のメッセージが表示されれば、データが作成されました。
PostgreSQL と LCDS 3 Beta 3 と接続するための JDBCドライバを設定します。インストールしたPostgreSQL→pgJDBCにある「postgresql-8.4-701.jdbc3.jar」をインストールしたLCDS 3 Beta 3 のフォルダ( /lcds/tomcat/lib )に移動します。これで、JDBCが、Tomcatのライブラリとして追加できました。
1. 使用するツール類のダウンロードとインストールは完了しました。
次は、2.開発環境の構築作業に移ります。
今回のモデル駆動開発用に、サーバ側のアプリケーションを作成します。
インストールしたLCDS 3 Beta 3のフォルダlcdsのtomcat/webappsまで移動します。(lcds/tomcat/webapps)
lcds/tomcat/webappsまで移動できましたら、lcdsという名称のフォルダがあります。そのlcdsのフォルダを一度複製します。複製したlcdsのフォルダ名を、adcに変更します。今回作成したadcが、サーバ側サンプルアプリケーションになります。
作成したadcフォルダ内のWEB-INF/flex/locale内にja_jpフォルダを作成します。
次にインストールしたFlash Builder 4 Beta 2のフォルダ内にあるeclipse/plugins/com.adobe.flexbuilder.dcrad.nl1_4.0.0.253292/nl/
ja_JP/dcradSwcs/4.0/localeまで移動します。
このフォルダ内にあるfds_rb.swcとfiber_rb.swcをコピーします。コピーしたファイルをadc/WEB-INF/flex/locale/ ja_jpに配置します。
RDSサーバの初期設定は、使用しない設定となっています。先ほど作成したadcのフォルダの中にWEB-INF/web.xmlファイルがあります。このファイルがRDSサーバの設定情報を書かれています。
設定を有効にするようにコメントを外します。26行目~42 行目useAppserverSecurityのparam-valueはtrueからfalseに変更します。
<!-- begin rds -->
<servlet>
<servlet-name>RDSDispatchServlet</servlet-name>
<display-name>RDSDispatchServlet</display-name>
<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
<init-param>
<param-name>useAppserverSecurity</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>10</load-on-startup>
</servlet>
<servlet-mapping id="RDS_DISPATCH_MAPPING">
<servlet-name>RDSDispatchServlet</servlet-name>
<url-pattern>/CFIDE/main/ide.cfm</url-pattern>
</servlet-mapping>
<!-- end rds -->
ポート番号が複製元のポート番号な為、新しくポート番号を、変更します。adcのフォルダの中にWEB-INF/flex/service-config.xmlファイルがあります。ファイルを開き、ポート番号を変更します。
96行目のポート番号を、2038から2039に変更します。
106, 114, 123行目のポート番号を、2880から2881 に変更します。
96: <endpoint url="rtmp://{server.name}:2039 " class="flex.messaging.endpoints.RTMPEndpoint"/>
106: <endpoint url="http://{server.name}:2881/nioamf" class="flex.messaging.endpoints.NIOAMFEndpoint"/>
114: <endpoint url="http://{server.name}:2881/nioamfpoll" class="flex.messaging.endpoints.NIOAMFEndpoint"/>
123: <endpoint url="http://{server.name}:2881/niohttp" class="flex.messaging.endpoints.NIOHTTPEndpoint"/>
インストールしたlcdsのフォルダの中にあるtomcat/conf/tomcat-users.xmlを開きます。
tomcat-usersのタグ内にRDSユーザーを追加します。ユーザー名は「rdsuser」、パスワードはrdspasswordにします。
<tomcat-users>
<!--
<role rolename="tomcat"/>
<role rolename="role1"/>
<user username="tomcat" password="tomcat" roles="tomcat"/>
<user username="both" password="tomcat" roles="tomcat,role1"/>
<user username="role1" password="tomcat" roles="role1"/>
-->
<!-- ↓ 追加 -->
<role rolename="rds" />
<user username="rdsuser" passoword="rdspassword" roles="rds" />
<!-- ↑ 追加 -->
</tomcat-users>
インストールしたlcdsのtomcat/conf/Catalina/localhost/lcds.xmlのXMLファイルを複製します。複製したファイル名をadc.xmlに変更後、ファイルを開きます。
PostgreSQLの接続を設定します。Contextタグ内に以下の情報を追加します。
<Resource name="jdbc/postgres" auth="Container" type="javax.sql.DataSource"
maxActive="100" maxIdle="30" maxWait="10000"
username="postgres"
password="postgres"
driverClassName="org.postgresql.Driver"
url="jdbc:postgresql://localhost/postgres"/>
環境設定の作業は、完了しました。Tomcatが正常に起動することを確認します。インストールしたlcds/tomcat/bin/startup.batをダブルクリックしてください。
http://localhost:8400/adc/にアクセスします。
「Welcome to Adobe LiveCycle Data Serivce ES!」画面が表示されている事を確認してください。
2.開発開発環境の構築作業は完了しました。次は3. サンプルアプリケーションの開発と実行に移ります。
パースペクティブを開きます。Other…を選択します。
パッケージエクスプローラーにて、右クリックでメニューを表示。
New → Flexプロジェクトを選択します。
以下の設定通りに入力と選択を行います。(他はデフォルトのまま)
アプリケーションサーバの種類:J2EE
リモートオブジェクトアクセスサービスを使用:チェックON
LiveCycle Data Services:選択
Nextボタンをクリックします。
以下の設定通りに入力と選択を行います。(他はデフォルトのまま)
「設定を検証」ボタン(図36参照)をクリックします。(サーバの接続の確認を行います。)
設定が有効である場合は、「WebルートフォルダとルートURLは有効です。」とメッセージが表示されます。(図37を参照)Finishボタンをクリックします。
データベースのテーブルからAdobe Data Modelの作成やAdobe Data Modelから LCDSへデプロイを行う為のRDS Serverの設定を行います。
Adobe Data Modelのパースペクティブに変更するとRDS Dataviewが表示されます。RDS Dataview内にあるLCDS (localhost)を右クリックでメニューを表示します。
メニュー内にある「RDS構成」を選択します。
RDS構成の入力値は以下の通りに入力します。(他はデフォルト値のまま)入力後、接続のテストボタンをクリックします。
接続のテストに成功しました。」メッセージの表示が確認できましたら、「OKボタンをクリックします(RDS構成のOKボタンもクリックします。)
データベースのテーブルからAdobe Data Modelを作成します。
adcの Flexプロジェクトをマウスでクリックして選択状態にします。
右クリックでメニューを表示します。New → データモデルを選択します。
新規FMLファイルを作成します。ファイル名は、AccountModel.fmlとします。入力が完了したら、finishボタンをクリックします。
RDSサーバに接続して、テーブル情報を取得します。
RDS Dataview のAdobe Developer Connection RDS Serverを開き、java:/comp/env/jdbc/postgres → テーブルまで開きます。accountテーブルの情報を、取得できていることが、確認できます。
public.accountを一度選択します。選択したaccountを作成したFMLファイルにドラッグ&ドロップします。
FMLファイルにテーブル情報が反映されます。反映された状態で、FMLファイルを保存します。これでAdobe Data Modelの作成は完了です。
LCDSへAdobe Data Modelをデプロイするボタン(図47の左上のアイコン)をクリックします。
LCDSへデプロイ実行前の設定画面が起動します。ここでは、そのままFinishボタンをクリックします。
デプロイに成功するとThe model “AccountModel was successfully deployed to the server” のメッセージが表示されます。OKボタンをクリックします。
次は、データモデルと連動したサンプルアプリケーションの作成に移ります。
データモデルをDataGridに表示処理と更新処理を行う、簡単なアプリケーションを作成します。
Adobe Data Modelのパースペクティブに変更したアイコンの右横に、FBと書かれたボタン(図49の赤丸で括っているアイコン)をクリックします。Flash Builderのパースペクティブに変更できました。
データとサービスタブ(図50の赤丸で括っているタブ)をクリックします。次にデータとサービスに接続…をクリックします。
「データとサービスに接続」にて、サービスタイプを選択する画面が表示されます。ここではLCDSを選択し、Nextボタンをクリックします。
認証情報を求められます。ここでは以下の通りに入力後、OKボタンをクリックします。
サービスの読み込み先を指定します。
読み込み先のAccountModel.Accountのチェックボックスを入にします。サービス名、サービスパッケージ、データ型パッケージは自動的に入力されます。この状態でFinishボタンをクリックします。
データとサービスでは、AccountServiceが作成され、ActionScriptのソースも自動作成されました。
MXMLファイルを編集する為、adc.mxmlタブを選択状態にします。デザインモードに切り替え、コンポーネントのDataGridをadc.mxmlへドラッグ&ドロップします。
DataGrid設定で、共通の編集可を、trueに設定します。DataGridのレイアウトは、以下のように設定します。
データとサービスで作成したAccountServiceのgetAll()メソッドをDataGridにドラッグ&ドロップすると、DataGridのカラム名がAccountModelと同じカラム名に更新されます。
連携作業は完了しました。編集中のMXMLファイルを保存します。
Run As ボタンをクリックすると、FlexUnitテストもしくはWebアプリケーションの実行選択画面が起動します。ここでは、Webアプリケーションを選択してOKボタンをクリックします。
ブラウザの起動時にテーブル情報を取得し、DataGridに反映していることが確認できました。
LCDSの機能の1つにデータの同期化があります。データ更新が発生した場合、他で利用している画面にも更新状態が自動的に反映される機能です。
同じURLで、2つの画面からアクセスします。
一番上にあたるaddressのデータを「東京」から「大阪」に変更します。
編集したDataGridの更新処理が行われます。もう1つの画面にも反映されているのがわかります。
このようなアプリケーションをコーディングを行わず完成させることができました。
現時点では表示と更新処理のみ可能です。次は新規登録と削除処理も行える入力フォームを追加します。
データとサービス内にあるAccountService → データ型 → Accountを選択します。右クリックでメニューを表示し、メニュー内の「フォームを生成」を選択します。
フォームタイプの選択画面が起動します。
モデル駆動型フォームを選択し、OKボタンをクリックします。
このモデル用の入力フォームが作成されました。
Applicationのレイアウトは、spark.layouts.VerticalLayout(図64の赤線箇所)を選択します。(デザインモードで、DataGridや入力フォーム以外の箇所をクリックすることでApplicationを選択する事ができます。)
今のままではコンパイルエラーが発生します。
ソースの修正を行います。
80 // import valueObjects.AccountService;
81 import services.accountmodelaccount.AccountService
10 import mx.events.FlexEvent;
11 import mx.controls.Alert;
23行目あたりの以下のコードをコメントアウトにします。
<!-- <valueObjects:Account id="account"/> -->
37行目あたりのコードにあるvalueObjectの設定値を以下のコードのように書き換えます。
<forms:AccountForm id="AccountForm1"
valueObject="{dataGrid.selectedItem as Account}">
Run As ボタンをクリックします。(前回、起動している分は事前に終了してください。)また、同じURLで2つの画面からアクセスします。
選択したデータがフォームに表示していることが確認できます。
削除処理:一番上のデータを選択後、Deleteボタンを、クリックします。
確認ダイアログでは「はい」をクリックします。
削除確認:一番上のデータが削除されました。データの同期化も正常に行われています。
新規登録:新規登録を行います。
Addボタンをクリックすると、入力フォームの編集が可能になります。
Saveボタンをクリックすると、新規登録情報がDataGridに反映されます。
今回はデータベースと連携した簡単なアプリケーションの作成方法について説明しました。このようなアプリケーションを、ほとんどコーディングを行わず完成させることができます。
LCDS3では、Fiber以外にも様々な機能があります。以下のURLにてご確認ください。
http://www.adobe.com/jp/devnet/livecycle/articles/lcdses3_whatsnew.html
Adobe Labs には、ドキュメントから構築までの動画も掲載しておりますのでLCDS3の最新のテクノロジーに触れてみてください。
http://labs.adobe.com/technologies/livecycle_dataservices3/
今回の構築時に参考にしたサイトも掲載しますので参考にしてみてください。
私もまだまだ勉強中ですが、今回の構築時に疑問や質問がございましたら、tokufxug@gmail.com までご連絡ください。
ありがとうございました。