Adobe
製品
Creative Suiteファミリー
Photoshopファミリー
Acrobatファミリー
Flash Platform
Digital Marketing Suite
Digital Enterprise Platform
Digital Publishing Suite
その他の製品一覧
ソリューション
コンテンツオーサリング
教育
金融機関
デジタルマーケティングソリューション
その他のソリューション
ラーニング サポート ダウンロード 会社情報
ご購入
アドビストア安心のサポート& サービス
アカデミック版のご購入学生、教職員、個人
ライセンスのご購入企業、教育機関、官公庁
販売パートナー
検索
 
情報 サインイン
ようこそ、 カート 注文状況 ユーザー登録
マイアカウント
サインアウト
サインインの目的 お客様のアカウントや体験版ダウンロード、製品の拡張機能、コミュニティエリアへのアクセスなどを管理するため
Adobe
製品 セクション   検索  
ソリューション 会社情報
サポート ラーニング
サインイン ようこそ、 注文状況 ユーザー登録
Qty:
Subtotal
Checkout
Adobe Developer Connection / Flexデベロッパーセンター /

Adobe Flash Builder 4 ベータ版とAdobe LiveCycle Data Services 3ベータ版でモデル駆動開発

著者 徳山 禎男氏

徳山 禎男氏

Content

  • 使用するツール類のダウンロードとインストール
  • 開発環境の構築
  • データモデルと連動したサンプルアプリケーションの作成
  • 最後に

作成日

22 October 2009

ページ ツール

Facebookでシェア
Twitterでツイート
LinkedInでシェア
ブックマーク
印刷

Tags

必要条件

ユーザーレベル

中級

はじめに

Flash Builder 4 Beta 2とAdobe Live Cycle Data Services 3 Beta3 (以降、LCDS3 Beta3) を使用してモデル駆動開発を行います。
今回は、以下の手順を踏みながら説明していきます。

  1. 使用するツール類のダウンロードとインストール
  2. 開発環境の構築
  3. サンプルアプリケーションの開発と実行

(Beta版を対象にした構築内容になっていますので、今後リリースされる正式版と手順等が異なる場合があります。Beta版での構築から稼働確認までを行うことを目的としている点、ご了承ください。)

注意:
執筆時点では、Mac版のLCDS3 Beta3をインストール時にアプリケーションサーバの選択が行えない不具合がありました。(今回はTomcatを使用する為、Windowsユーザーが対象となります。)
最終リリースまでには、対応される予定です。

必要なソフトウェア

  • Eclipse
  • Flash Builder 4 Beta 2 (Plugin for Eclipse)
  • LCDS 3 Beta 3
  • Live Cycle Data Services 3 Modeler Plugin
  • PostgreSQL

用語解説

  • Fiber

    Flexアプリケーションのモデル駆動開発を可能にする、スイートなテクノロジーの事を「Fiber(コードネーム)」と呼びます。

    Fiberは、以下の3つの特徴があります。

    1. Adobe Data Model
    2. モデルと関連づけして、コードをジェネレート作業するツール
    3. Adobe Data Modelのランタイム環境
  • Adobe Data Model
    Adobe Data Modelとは、モデル駆動開発時に使用するモデル言語の事を指します。Adobe Data ModelはXMLベースの言語です。開発者は、Adobe Data Modelを使用して、エンティティの定義を行う事ができます。拡張子は.fmlになります。

使用するツール類のダウンロードとインストール

Eclipse

Eclipseは統合開発環境(IDE)の1つです。JavaやFlex、PHPといった様々な言語の開発を、プラグインの拡張で容易に行えるのが特徴です。

1. Eclipseをダウンロードします。

以下のURLにアクセスします。

http://download.eclipse.org/eclipse/downloads/

Eclipse SDKまで移動します。
Windows(Supported Versions)のEclipseをダウンロードします。

2. Eclipseを解凍して保存します。

ファイル圧縮をしているeclipseを解凍します。解凍先は任意です。

図1. EclipseSDKのダウンロード一覧(Windows)
図1. EclipseSDKのダウンロード一覧(Windows)

Flash Builder 4 Beta 2

Eclipseを使用して、Flex4フレームワークを使用したRIA開発が可能です。今回はEclipseのプラグインにインストールするため、プラグイン版をダウンロードします。

1. Adobe LabsのFlash Builder 4ダウンロードページに行きます。

http://labs.adobe.com/technologies/flashbuilder4/ ページで、Get the Flash Builder 4 beta 2 releaseをクリックします。

図2. Flash Builder 4 Beta 2のダウンロードリンク

図2. Flash Builder 4 Beta 2のダウンロードリンク
注意:ダウンロードには、Adobe IDが必要です。お持ちでない方はこちらから取得してください。

2. Flash Builder4(Plugin for Eclipse)をダウンロードします。

Adobe Labs Downloadsにて、Flash Builder 4 Plugin for Eclipseまで移動します。
Windows版をダウンロードしてください。

図3. Download Flash Builder 4 Plugin for Windows をクリックします。
図3. Download Flash Builder 4 Plugin for Windows をクリックします。
3. Flash Builder 4(Plugin for Eclipse)をインストールします。

ダウンロードしたFlash Builder 4を実行するとFlash Builder 4 インストールのスタート画面が起動します。
OKボタンをクリックします。

図4. Flash Builder 4インストールのスタート画面
図4. Flash Builder 4インストールのスタート画面

「はじめに」では、次へボタンをクリックします。

「使用許諾契約」では、同意した上で、「使用許諾契約の条項に同意する」をチェック後、次へボタンをクリックします。

「インストールフォルダを選択」では、次へボタンをクリックすると、C:\Program Files\Adobe直下にインストールします。問題がなければ、デフォルトのまま進めてください。
プラグインのインストール先となるEclipseフォルダを選択します。
ここでは「別のEclipseにプラグインをインストール」を選択し、解凍して保存したeclipseフォルダを選択します。
選択完了後、次へボタンをクリックします。

図5. Flash Builder 4 Beta for Eclipse Pluginのインストール先の指定
図5. Flash Builder 4 Beta for Eclipse Pluginのインストール先の指定

インストールの要約画面で内容に問題がなければ、インストールボタンをクリックしてください。インストール作業が開始されます。

注意:インストール時にブラウザを起動しているとインストールできません。ブラウザを全て閉じた上で、インストール作業を行ってください。

インストールが、完了すると指定した場所に Flash Builder 4 Beta 2がインストールされます。

図6.インストールされた Flash Builder 4 Beta 2のファイル一覧
図6.インストールされた Flash Builder 4 Beta 2のファイル一覧

LCDS 3 Beta 3

Adobe FlexおよびAdobe AIR®を使用したリッチインターネットアプリケーション(RIA)開発 を効率化する、拡張性と柔軟性に優れた高性能フレームワークです。

1. Adobe LabsのLCDS3 Beta 3ダウンロードページに行きます。

http://labs.adobe.com/technologies/livecycle_dataservices3/ ページで、Get the LiveCycle Data Services 3 beta now をクリックします。

図7. LCDS 3 Beta 3のダウンロードリンク
図7. LCDS 3 Beta 3のダウンロードリンク
2. LCDS 3 Beta 3インストーラのダウンロードを行います。

LiveCycle Data Services 3 Beta 3 Installer から、Windows版をダウンロードしてください。
Additional Downloads の Download the LiveCycle Data Services 3 Modeler Plugin も必ずダウンロードしてください。

図8. LCDS 3 Beta for WindowsとModeler Pluginのダウンロードを行います。
図8. LCDS 3 Beta for WindowsとModeler Pluginのダウンロードを行います。
3. LCDS 3 Beta 3 をインストールします。

ダウンロードしたLiveCycleDataServicesES2 version3 Beta3の実行ファイルをダブルクリックしてください。
Welcome画面では、Nextボタンをクリックします。

図9. LCDS 3 Beta 3のインストーラWelcome画面
図9. LCDS 3 Beta 3のインストーラWelcome画面

License Agreement画面では、I accept the terms of the License Agreementを選択。Nextボタンをクリックします。

図10. LCDS 3 Beta 3 License Agreement画面
図10. LCDS 3 Beta 3 License Agreement画面

Serial Number画面では、シリアル番号入力欄は未入力のままNextボタンをクリックします。

Install Location画面でNextボタンをクリックすると、デフォルトでは「C:¥」にインストールされます。

Installation Options画面では、Live Cycle Data Services with Tomcat にチェック後、Nextボタンをクリックします。

図11. アプリケーションサーバの選択(Tomcatを選択)
図11. アプリケーションサーバの選択(Tomcatを選択)

Pre-Installation Summary画面で、内容に問題がなければ、Installをクリックしてください。インストール作業が開始されます。

インストールが完了すると、指定した場所に LCDS 3 Beta 3がインストールされます。

図12. LCDS 3 Beta 3のインストールが完了しました。
図12. LCDS 3 Beta 3のインストールが完了しました。
4. Live Cycle Data Services 3 Beta Modeler Pluginをインストールします。

Flexアプリケーションのモデル駆動開発(Fiber)をEclipse上で行える追加機能のプラグインです。

ダウンロードした Modeler Plugin を解凍すると、pluginsフォルダが出現します。pluginsフォルダの中には、様々なファイルがあります。

図13. Live Cycle Data Serivces 3 Beta Modeler Pluginの中身(ファイル一覧の一部)
図13. Live Cycle Data Serivces 3 Beta Modeler Pluginの中身(ファイル一覧の一部)

pluginsフォルダの中にある全てのファイルを、インストールしたFlash Builder 4 Beta 2 のフォルダにあるeclipseのplugins に移動します。

注意:ダウンロードしたeclipse直下のpluginsではありませんので、ご注意ください。

これで、Modeler Pluginのインストールは完了しました。

図14. Modeler Pluginのインストール先
図14. Modeler Pluginのインストール先

PostgreSQL

PostgreSQLはフリー(料金、ライセンス、2次配布)で利用できる、オープンソースのオブジェクトリレーショナルデータベース管理システム(ORDBMS)です。
PostgeSQLを使用して、モデル駆動開発を行います。

1. PostgreSQLのインストーラをダウンロードします。

EnterpriseDB 社が提供する「ワン・クリック」インストーラを使って、PostgreSQLをインストールします。

注意:インストール前に、管理者権限のpostgresユーザを作成し、postgresユーザーで、インストール作業を行ってください。
(インターネットは、接続している状態にしてください。)

以下のページにてVersion8.4.1-1をダウンロードします。
http://www.enterprisedb.com/products/pgdownload.do

図15. PostgreSQLインストーラのダウンロードページ
図15. PostgreSQLインストーラのダウンロードページ
2. まずは、インストーラを任意の場所に保存します。
図16. PostgreSQLのインストーラの保存ダイアログ
図16. PostgreSQLのインストーラの保存ダイアログ

ダウンロードしたpostgresql8.4.1-1-windows.exeを、ダブルクリックします。

図17. PostgreSQLのインストーラを起動します。
図17. PostgreSQLのインストーラを起動します。
3. PostgreSQLをインストールします。

Set Up画面が起動します。Nextボタン>をクリックします。

図18. PostgreSQLのインストーラSetUp画面
図18. PostgreSQLのインストーラSetUp画面

Installation Directoryでも、そのままNextボタン>をクリックします。
保存先は、C:¥Program Files¥PostgreSQL¥8.4になります。

図19. PostgreSQLのインストール先を指定します。
図19. PostgreSQLのインストール先を指定します。

Data Directoryでも、そのままNextボタン>をクリックします。
保存先は、C:¥Program Files:¥PostgreSQL:¥8.4:¥dataになります。

図20. PostgreSQLデータの格納先を指定します。
図20. PostgreSQLデータの格納先を指定します。

Passwordは、postgresと入力してください。Retype passwordもpostgresと入力してください。入力しましたら、Nextボタン>をクリックします。

図21. パスワードは「postgres」で、設定をします。
図21. パスワードは「postgres」で、設定をします。

ポート番号は、5432と入力します。Nextボタン>をクリックします。

図22. ポート番号は5432で指定します。
図22. ポート番号は5432で指定します。

Localeは、Japanese,Japanを選択します。あとは、デフォルト値のままにします。
Nextボタン>をクリックします。

Ready to Installは、そのまま「Next」ボタンをクリックすると、インストール作業が始まります。

図23. Localeを日本語に変更します。
図23. Localeを日本語に変更します。

インストールが完了しましたら、Launch Stack Builder at exit? のチェックボックスにチェック後、Finishボタンをクリックします。

図24. Finishボタンをクリックを行う前に、必ず、Launch Stack Builder at exit? にチェックしてください。
図24. Finishボタンをクリックを行う前に、必ず、Launch Stack Builder at exit? にチェックしてください。
4. PostgreSQLの JDBCドライバをインストールします。

スタックビルダが起動しますので、インストールした PostgreSQLを選択して、次へボタンをクリックします。

図25. スタックビルダの起動画面
図25. スタックビルダの起動画面

サーバから、JDBC経由で、PostgreSQLに接続します。
ここでは、PostgreSQLのJDBCドライバをインストールする為、pgJDBCにチェックを入れ、次へボタンをクリックします。

図26. pgJDBC v8.4.701-1にチェックを入れます。
図26. pgJDBC v8.4.701-1にチェックを入れます。

「次へ」ボタンをクリックすると、確認画面が表示します。ここでも「次へ」ボタンをクリックします。すると、インストールが開始します。
(インストールフォルダのデフォルトは、C:¥Program Files:¥PostgreSQL:¥pgJDBCです。)

全てのインストールが完了しましたら、一度、マシンを再起動してください。PostgreSQLのインストール作業は完了した為、また初めにログインしていたユーザーに切り替え、作業を続行します。

5. データベースのサンプルデータを作成します。

PostgreSQLをインストール時にpgAdmin3というアプリケーションを使用して作成します。

図27. 一番上に位置するアイコンがpgAdmin3です。
図27. 一番上に位置するアイコンがpgAdmin3です。

pgAdmin3をダブルクリックで起動します。

図28. pgAdmin3を起動します。
図28. pgAdmin3を起動します。

起動後の「サーバー(1)」→ 「PostgreSQL 8.4」をクリック後、右クリックでメニューを表示します。

接続を選択すると、pgAdmin3が、パスワードを要求します。パスワードは、PostgreSQLセットアップ時に設定したパスワード(postgres)を入力し、OKボタンをクリックします。

次は、データベース → postgres をマウスクリックで選択します。
選択後、pgAdmin3の上部にあるSQLの文字が書かれたアイコン(図29の右上にあるアイコン)をクリックします。

図29. postgresデータベースを選択後、一番上のSQLアイコンをクリックします。
図29. postgresデータベースを選択後、一番上のSQLアイコンをクリックします。

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は実際の実行時間です。)

上記のメッセージが表示されれば、データが作成されました。

6. JDBCドライバを、Tomcatのライブラリに追加します。

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.開発環境の構築作業に移ります。

開発環境の構築

サーバ側のアプリケーションを作成

今回のモデル駆動開発用に、サーバ側のアプリケーションを作成します。

1. サーバアプリケーションのフォルダ内に移動します。

インストールしたLCDS 3 Beta 3のフォルダlcdsのtomcat/webappsまで移動します。(lcds/tomcat/webapps)

2. 既存サーバアプリケーションから複製して作成します。

lcds/tomcat/webappsまで移動できましたら、lcdsという名称のフォルダがあります。そのlcdsのフォルダを一度複製します。複製したlcdsのフォルダ名を、adcに変更します。今回作成したadcが、サーバ側サンプルアプリケーションになります。

図30. サーバ側アプリケーションを作成したadcのイメージ
図30. サーバ側アプリケーションを作成したadcのイメージ
3. 日本語のロケールを設定します。

作成した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に配置します。

サーバ設定


1. RDSサーバの設定を行います。

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 -->
2. ポート番号の変更を行います。

ポート番号が複製元のポート番号な為、新しくポート番号を、変更します。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"/>
3. TomcatユーザーにRDSユーザーを追加します。

インストールした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>
4. Tomcatからデータベースに接続するためのJDBC設定を追加します。

インストールした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"/>

サーバ稼働確認


5. Tomcatを起動します。

環境設定の作業は、完了しました。Tomcatが正常に起動することを確認します。インストールしたlcds/tomcat/bin/startup.batをダブルクリックしてください。
http://localhost:8400/adc/にアクセスします。
「Welcome to Adobe LiveCycle Data Serivce ES!」画面が表示されている事を確認してください。

図31. 作成したadcの起動確認の表示結果
図31. 作成したadcの起動確認の表示結果

2.開発開発環境の構築作業は完了しました。次は3. サンプルアプリケーションの開発と実行に移ります。

データモデルと連動したサンプルアプリケーションの作成

サンプルアプリケーションの開発と実行

Flexプロジェクト作成


1. eclipseを起動。Flexプロジェクトを作成します。

パースペクティブを開きます。Other…を選択します。

図32.パースペクティブを開きOtherを選択。
図32.パースペクティブを開きOtherを選択。
2. Flashを選択後、OKボタンをクリックし、Flash Builderパースペクティブに変更します。
図33. Flashを選択して、OKボタンをクリック。
図33. Flashを選択して、OKボタンをクリック。
3. Flexプロジェクトを選択します。

パッケージエクスプローラーにて、右クリックでメニューを表示。
New → Flexプロジェクトを選択します。

図34. Flexプロジェクトを作成します。
図34. Flexプロジェクトを作成します。
4. Flexプロジェクトの情報を入力します。

以下の設定通りに入力と選択を行います。(他はデフォルトのまま)

  • プロジェクト名:adc
  • アプリケーション種類:Web
  • サーバテクノロジ

アプリケーションサーバの種類:J2EE
リモートオブジェクトアクセスサービスを使用:チェックON
LiveCycle Data Services:選択

Nextボタンをクリックします。

図35. Flexプロジェクト新規作成時の登録情報
図35. Flexプロジェクト新規作成時の登録情報
5. J2EEサーバの接続設定の入力と接続確認を行います。

以下の設定通りに入力と選択を行います。(他はデフォルトのまま)

  • ルートフォルダ:インストールしたlcds/tomcat/webapps/adc
  • ルートURL:http://localhost:8400/adc/
  • コンテキストルート:/adc

「設定を検証」ボタン(図36参照)をクリックします。(サーバの接続の確認を行います。)

図36. J2EEサーバの接続設定の入力と接続の確認
図36. J2EEサーバの接続設定の入力と接続の確認

設定が有効である場合は、「WebルートフォルダとルートURLは有効です。」とメッセージが表示されます。(図37を参照)Finishボタンをクリックします。

図37. J2EEサーバ設定(J2EEサーバのアクセスに成功した場合)
図37. J2EEサーバ設定(J2EEサーバのアクセスに成功した場合)

RDS Server の設定

データベースのテーブルからAdobe Data Modelの作成やAdobe Data Modelから LCDSへデプロイを行う為のRDS Serverの設定を行います。

1. Adobe Data Modelの パースペクティブを開きます。
図38. Adobe Data Modelを選択します。
図38. Adobe Data Modelを選択します。
2. RDS DataviewからRDS構成を開きます。

Adobe Data Modelのパースペクティブに変更するとRDS Dataviewが表示されます。RDS Dataview内にあるLCDS (localhost)を右クリックでメニューを表示します。
メニュー内にある「RDS構成」を選択します。

図39. RDS Dataview から RDS構成を選択します。
図39. RDS Dataview から RDS構成を選択します。
3. RDS構成を設定します。

RDS構成の入力値は以下の通りに入力します。(他はデフォルト値のまま)入力後、接続のテストボタンをクリックします。

  • 説明:Adobe Developer Connection RDS Server
  • コンテキストルート:adc
  • ユーザー名:rdsuser
  • パスワード:rdspassword
図40. RDS構成の設定と接続テストを行います。
図40. RDS構成の設定と接続テストを行います。

接続のテストに成功しました。」メッセージの表示が確認できましたら、「OKボタンをクリックします(RDS構成のOKボタンもクリックします。)

図41.接続のテストに成功しました。
図41.接続のテストに成功しました。

Adobe Data Model の作成

データベースのテーブルからAdobe Data Modelを作成します。

1. Adobe Data Modelの新規ファイルを作成します。

adcの Flexプロジェクトをマウスでクリックして選択状態にします。
右クリックでメニューを表示します。New → データモデルを選択します。

図42.データモデルを選択します。
図42.データモデルを選択します。

新規FMLファイルを作成します。ファイル名は、AccountModel.fmlとします。入力が完了したら、finishボタンをクリックします。

図43. 新規のFMLファイルを作成します。
図43. 新規のFMLファイルを作成します。
図44. FMLファイルが作成されました。
図44. FMLファイルが作成されました。

RDSサーバに接続して、テーブル情報を取得します。
RDS Dataview のAdobe Developer Connection RDS Serverを開き、java:/comp/env/jdbc/postgres → テーブルまで開きます。accountテーブルの情報を、取得できていることが、確認できます。

図45. テーブル情報がRDSサーバで取得できていることが確認できます。
図45. テーブル情報がRDSサーバで取得できていることが確認できます。
2. テーブル情報をFMLファイルに反映させます。

public.accountを一度選択します。選択したaccountを作成したFMLファイルにドラッグ&ドロップします。
FMLファイルにテーブル情報が反映されます。反映された状態で、FMLファイルを保存します。これでAdobe Data Modelの作成は完了です。

図46. FMLファイルにテーブル情報が、反映されます。
図46. FMLファイルにテーブル情報が、反映されます。
3. 作成したAdobe Data ModelをLCDSにデプロイします。

LCDSへAdobe Data Modelをデプロイするボタン(図47の左上のアイコン)をクリックします。

図47. LCDSへデプロイするためのボタンをクリックします。
図47. LCDSへデプロイするためのボタンをクリックします。

LCDSへデプロイ実行前の設定画面が起動します。ここでは、そのままFinishボタンをクリックします。
デプロイに成功するとThe model “AccountModel was successfully deployed to the server” のメッセージが表示されます。OKボタンをクリックします。

次は、データモデルと連動したサンプルアプリケーションの作成に移ります。

図48. データモデルをLCDSに展開します。このままFinishボタンをクリックします。
図48. データモデルをLCDSに展開します。このままFinishボタンをクリックします。

データモデルと連動したサンプルアプリケーションの作成

データモデルをDataGridに表示処理と更新処理を行う、簡単なアプリケーションを作成します。

1. Flash Builder のパースペクティブに変更します。

Adobe Data Modelのパースペクティブに変更したアイコンの右横に、FBと書かれたボタン(図49の赤丸で括っているアイコン)をクリックします。Flash Builderのパースペクティブに変更できました。

図49. Flash Builder の パースペクティブに変更するアイコンをクリックします。
図49. Flash Builder の パースペクティブに変更するアイコンをクリックします。
2. データとサービスに接続します。

データとサービスタブ(図50の赤丸で括っているタブ)をクリックします。次にデータとサービスに接続…をクリックします。

図50. データとサービスのタブをクリックします。
図50. データとサービスのタブをクリックします。

「データとサービスに接続」にて、サービスタイプを選択する画面が表示されます。ここではLCDSを選択し、Nextボタンをクリックします。

図51. LCDSを選択します。
図51. LCDSを選択します。

認証情報を求められます。ここでは以下の通りに入力後、OKボタンをクリックします。

  • ユーザー名:rdsuser
  • パスワード:rdspassword
図52. RDSサーバ接続時に認証情報を入力します。
図52. RDSサーバ接続時に認証情報を入力します。

サービスの読み込み先を指定します。
読み込み先のAccountModel.Accountのチェックボックスを入にします。サービス名、サービスパッケージ、データ型パッケージは自動的に入力されます。この状態でFinishボタンをクリックします。

図53. サービスの読み込み先を選択します。
図53. サービスの読み込み先を選択します。

データとサービスでは、AccountServiceが作成され、ActionScriptのソースも自動作成されました。

図54. サービスが作成されました。
図54. サービスが作成されました。
3. テーブル情報の表示と編集を行うDataGridを作成します。

MXMLファイルを編集する為、adc.mxmlタブを選択状態にします。デザインモードに切り替え、コンポーネントのDataGridをadc.mxmlへドラッグ&ドロップします。
DataGrid設定で、共通の編集可を、trueに設定します。DataGridのレイアウトは、以下のように設定します。

  • 横:100%
  • 縦:50%
  • X:0
  • Y:0
図55.コンポーネントのDataGridをドラッグ&ドロップします。
図55.コンポーネントのDataGridをドラッグ&ドロップします。
4. DataGridとデータとサービスに連携させます。

データとサービスで作成したAccountServiceのgetAll()メソッドをDataGridにドラッグ&ドロップすると、DataGridのカラム名がAccountModelと同じカラム名に更新されます。
連携作業は完了しました。編集中のMXMLファイルを保存します。

図56. AccountServiceのgetAllメソッドをDataGridにドラッグ&ドロップします。
図56. AccountServiceのgetAllメソッドをDataGridにドラッグ&ドロップします。
5. アプリケーションを実行します。

Run As ボタンをクリックすると、FlexUnitテストもしくはWebアプリケーションの実行選択画面が起動します。ここでは、Webアプリケーションを選択してOKボタンをクリックします。

図57. Run Asボタンをクリック後、Webアプリケーションを、選択して実行します。
図57. Run Asボタンをクリック後、Webアプリケーションを、選択して実行します。

ブラウザの起動時にテーブル情報を取得し、DataGridに反映していることが確認できました。

図58. アプリケーションの起動画面
図58. アプリケーションの起動画面
6. データ同期化の動作確認を行います。

LCDSの機能の1つにデータの同期化があります。データ更新が発生した場合、他で利用している画面にも更新状態が自動的に反映される機能です。

同じURLで、2つの画面からアクセスします。

図59. 2つの画面から、同じWebアプリケーションのURLにアクセスします。
図59. 2つの画面から、同じWebアプリケーションのURLにアクセスします。

一番上にあたるaddressのデータを「東京」から「大阪」に変更します。

図60.「東京」から「大阪」に変更します。
図60.「東京」から「大阪」に変更します。
7. マウスカーソルをDataGrid外に持っていき、クリックします。

編集したDataGridの更新処理が行われます。もう1つの画面にも反映されているのがわかります。

このようなアプリケーションをコーディングを行わず完成させることができました。

図61.2つの画面共に「東京」から「大阪」に変更されました。
図61.2つの画面共に「東京」から「大阪」に変更されました。
8. モデルの入力フォームを追加します。

現時点では表示と更新処理のみ可能です。次は新規登録と削除処理も行える入力フォームを追加します。

データとサービス内にあるAccountService → データ型 → Accountを選択します。右クリックでメニューを表示し、メニュー内の「フォームを生成」を選択します。

図62.「フォームを生成」を、選択します。
図62.「フォームを生成」を、選択します。

フォームタイプの選択画面が起動します。
モデル駆動型フォームを選択し、OKボタンをクリックします。

図63.フォームタイプをモデル駆動型フォームを選択します。
図63.フォームタイプをモデル駆動型フォームを選択します。

このモデル用の入力フォームが作成されました。
Applicationのレイアウトは、spark.layouts.VerticalLayout(図64の赤線箇所)を選択します。(デザインモードで、DataGridや入力フォーム以外の箇所をクリックすることでApplicationを選択する事ができます。)

図64. 入力フォームが作成され、縦に揃えるようにレイアウト調整を行います。
図64. 入力フォームが作成され、縦に揃えるようにレイアウト調整を行います。

今のままではコンパイルエラーが発生します。
ソースの修正を行います。

  • adc.form.AccountForm.mxml
    80行目をコメントアウトし、81行目を追加します。
80 // import valueObjects.AccountService; 81 import services.accountmodelaccount.AccountService
  • adc.form.AccountForm.mxml
    10行~12行目のスクリプトのimport文にimport mx.controls.Alert;を追加します。
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}">
9. 入力フォーム版のアプリケーションを実行します。

Run As ボタンをクリックします。(前回、起動している分は事前に終了してください。)また、同じURLで2つの画面からアクセスします。

選択したデータがフォームに表示していることが確認できます。

図65. DataGridで選択した情報は入力フォームにも表示されます。
図65. DataGridで選択した情報は入力フォームにも表示されます。

削除処理:一番上のデータを選択後、Deleteボタンを、クリックします。
確認ダイアログでは「はい」をクリックします。

図66. 選択したデータの削除確認にて、「はい」をクリックします。
図66. 選択したデータの削除確認にて、「はい」をクリックします。

削除確認:一番上のデータが削除されました。データの同期化も正常に行われています。

図67.削除結果がDataGridに反映されました。
図67.削除結果がDataGridに反映されました。

新規登録:新規登録を行います。
Addボタンをクリックすると、入力フォームの編集が可能になります。

図68. 新規登録の場合は、Addボタンクリックしてから、入力します。
図68. 新規登録の場合は、Addボタンクリックしてから、入力します。

Saveボタンをクリックすると、新規登録情報がDataGridに反映されます。

図69. Saveボタンをクリックすると新規登録情報がDataGridに反映されます。
図69. 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/

今回の構築時に参考にしたサイトも掲載しますので参考にしてみてください。

  • The Pixel Code
    http://www.thepixelcode.com/
  • Christophe Coenraets
    http://coenraets.org/blog/
  • Sujit Reddy G – The Evangelist
    http://sujitreddyg.wordpress.com/

私もまだまだ勉強中ですが、今回の構築時に疑問や質問がございましたら、tokufxug@gmail.com までご連絡ください。

ありがとうございました。

製品

  • Creative Suiteファミリー
  • Photoshopファミリー
  • Acrobatファミリー
  • Flashプラットフォーム
  • Digital Marketing Suite
  • Digital Enterprise Suite
  • Digital Publishing Suite
  • モバイルアプリ

ソリューション

  • カスタマーエクスペリエンスマネジメント
  • コンテンツオーサリング
  • デジタルマーケティング

業種別ソリューション

  • 教育
  • 金融機関

サポート

  • ヘルプ&サポート
  • 注文と返品
  • ダウンロードに関するヘルプ
  • ユーザー登録に関するヘルプ

ラーニング

  • ADC: Adobe Developer Center
  • Adobe TV
  • Design Magazine
  • Photoshop Magazine
  • Focus In

ご購入方法

  • アドビストア
  • アカデミック版のご購入
  • ライセンスのご購入

ダウンロード

  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR
  • Adobe Shockwave Player

会社情報

  • プレスルーム
  • パートナープログラム
  • 企業の社会的責任(英語)
  • 採用情報
  • 投資家の皆様へ(英語)
  • イベント&セミナー
  • Legal(英語)
  • お問い合わせ
国・地域および言語の選択 日本(変更)
国・地域および言語の選択 閉じる

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • España
  • France
  • Deutschland
  • Hrvatska
  • Ireland
  • Israel - English
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • Magyarország
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Österreich - Deutsch
  • Polska
  • Portugal
  • România
  • Россия
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Slovenija
  • Slovensko
  • Srbija
  • Suomi
  • Sverige
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • Pacific - English
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2011年9月30日更新)にご同意いただいたものとみなされます。

Reviewed by TRUSTe: site privacy statement