こんばんは、最近Flex/AIRの勉強をはじめたセイジです。
FLexを使った画面作りにも少しは慣れ、ようやく基礎の基礎の超基礎くらいは身に付いてきたかなぁと思う今日この頃。
そろそろサーバ側とつなげて遊んでよう！と思い立ち、S2BlazeDSを使ってみました。
1ヶ月くらい経ったらまた同じポイントでハマリそうな予感がするので、備忘録も兼ねてエントリーしてみます。
事前にインストールしておくもの
・Java 6
・Eclipse 3.4 （＋Doltengプラグイン、DbLauncherプラグイン）
・Tomcat 6.0 （Turnkey 3-0-0-544)
・Adobe Flex Builder 3
まずはサーバ側の準備から。
・サーバ側プロジェクトの作成
Eclipseのメニューから、[File] > [New] > [Other...] > [Dolteng] > [Dolteng Project]を選択してNext。
Project name、Root Package Name に「example」と入力し、Presentationに「S2BlazeDS」、Persistenceに「S2JDBC」、Server Managementに「WTP(Servlet 2.4)」を選択してFinish。
・データ準備
パッケージエクスプローラから、上で作成したexampleプロジェクトを選んで右クリック > [H2] > [Start H2 Server]を選択。
もう一回exampleプロジェクトで右クリック > [H2] > [View Database Manager]を選択。
ブラウザが立ち上がり、「H2コンソール」ページが開くので、「接続」ボタンを押下。
マスタメンテナンスの画面に遷移します。
exampleプロジェクト内のsrc/main/resources/data/demo.sqlを開いて内容をコピーし、マスタメンテ画面のテキストエリアに貼っ付けて「実行」ボタン押下。
データ作成完了！
・Javaクラス（Entity、Service)の生成
exampleプロジェクト内のs2jdbc-gen-build.xmlを開いて、Antビューから「gen-entity」タスクをダブルクリックして実行。
exampleプロジェクトを右クリック > [Reflesh]して、EntityやらServiceやらTestCaseやらがワラワラ作成されていることを確認します。
JUnitを実行してちゃんとグリーンバーが出ることを確認。
・サーバ起動
Eclipseのメニューから[Window] > [Preferences] > [Server] > [Runtime Environment]を選択して「Add...」ボタンを押下。
一覧の中から「Apache Tomcat v6.0」を選択してNext。
Tomcat installation directoryにTomcat（Turnkey)のインストールディレクトリを指定してFinish。
EclipseのServersビューを開いて、任意の場所で右クリック > [New] > [Server] を選択し、一覧から「Tomcat v6.0 Server」を選択してNext。
Available projectsからexampleを選んで「Add > 」ボタン押下でコンテキストパスを追加。
Serversビューの三角ボタンを押してTomcatを起動しておきます。
サーバ側の準備はこれで完了！
続いてFlex側。
・Flexプロジェクトの作成
Eclipseのメニューから、[File] > [New] > [Other...] > [Flex Builder] > [Flexプロジェクト]を選択し、Next。
プロジェクト名に「example-flex」と入力し、アプリケーションサーバーの種類に「J2EE」を選択、「リモートオブジェクトアクセスサービスを使用」にチェックを入れてNext。
ルートフォルダに「${DOCUMENTS}\example\src\main\webapp」、ルートURLに「http://localhost:8080/example/」、コンテキストルートに「/example」と入力。
「設定を検証」ボタンを押下すると、「Webサーバーにアクセスできません。サーバーが(ry」と注意されますが、耳を貸さずにFinish。
・設定の確認
example-flexプロジェクトを右クリック > [Properties] > [Flexコンパイラ]を選択。
追加コンパイラ引数に「-services "${DOCUMENTS}\example\src\main\webapp\WEB-INF\flex\services-config.xml" -locale ja_JP」と入力されていることを確認。
「-locale ja_JP」しか入力されていない場合は上記のとおりに入力して「Apply」。
左側の一覧から[Flexサーバー]を選択。ルートフォルダ、ルートURL、コンテキストルートに、Flexプロジェクト特性を追加した際に入力した値が設定されているか確認。
違う値が設定されている場合は正しく修正して「Apply」。
一覧から[Flexビルドパス]を選択。出力フォルダに「${DOCUMENTS}\example\src\main\webapp\example-flex-debug」と設定されていることを確認。
違う値が設定されている場合は上記のとおりに入力して「Apply」。
・MXMLの作成。
main.mxmlを開き、<mx:Application>のlayout属性の値を"vertical"に修正。
<mx:Applicationタグの間に以下の３行を追加。
<mx:RemoteObject id="srv" destination="empService" />
<mx:DataGrid dataProvider="{srv.findAll.lastResult}" width="100%" height="100%" />
<mx:Button label="従業員一覧を取得" click="srv.findAll();" />
・コンパイル
コンパイルを行うと「内部ビルドエラーが発生しました。」というエラーが出るので、おもむろにexample-flexをクリーンビルド。
「HTMLラッパーを生成できません。」というエラーに変わるので、エラーメッセージを右クリックして[HTMLテンプレートの再作成]を選択。
これでコンパイルが通るようになりました。
・実行
main.mxmlを右クリック > [Run as] > [Flex Application]を選択して、ブラウザ上で開く。
「従業員一覧」ボタンを押下して、従業員一覧が表示されれば成功！
最後にAIRプロジェクト。
・AIRプロジェクトの作成
Eclipseのメニューから、[File] > [New] > [Other...] > [Flex Builder] > [Flexプロジェクト]を選択し、Next。
アプリケーションの種類で「デスクトップアプリケーション」を選択すること以外はFlexと一緒です。
プロジェクト名は「example-air」。
・設定の確認
Flexと同じです。
・MXMLの作成
main.mxmlを開き、<mx:WindowedApplication>のlayout属性の値を"vertical"に修正。
<mx:WindowedApplicationタグの間に以下の４行を追加。
<mx:RemoteObject id="srv" destination="empService"
endpoint="http://localhost:8080/example/messagebroker/amf" />
<mx:DataGrid dataProvider="{srv.findAll.lastResult}" width="100%" height="100%" />
<mx:Button label="従業員一覧を取得" click="srv.findAll();" />
・コンパイル、実行
Flexと同じ。
これで実行できるはず。
AIRアプリケーションの場合、endpoint属性を指定しないとhttp://ain.swfという謎のホストにアクセスしにいきます。
最初、これを知らずにちょっとハマってしまいました。
S2BlazeDSを使ったFlex－Java間の接続は、設定ファイルを書かなくて良いので楽チンです。
MXMLにコンポーネント名・メソッド名が記述してあるので、ソース解析の際にあっちゃこっちゃのファイルを見て回る必要もありません。
SAStrutsやTeedaもそうですが、もっとも関連の強い箇所に設定が記述してあるっていうのは手と目と脳にやさしいですね！
・・・遊ぶ時間がなくなってしまった；；
セイジ
FLexを使った画面作りにも少しは慣れ、ようやく基礎の基礎の超基礎くらいは身に付いてきたかなぁと思う今日この頃。
そろそろサーバ側とつなげて遊んでよう！と思い立ち、S2BlazeDSを使ってみました。
1ヶ月くらい経ったらまた同じポイントでハマリそうな予感がするので、備忘録も兼ねてエントリーしてみます。
事前にインストールしておくもの
・Java 6
・Eclipse 3.4 （＋Doltengプラグイン、DbLauncherプラグイン）
・Tomcat 6.0 （Turnkey 3-0-0-544)
・Adobe Flex Builder 3
まずはサーバ側の準備から。
・サーバ側プロジェクトの作成
Eclipseのメニューから、[File] > [New] > [Other...] > [Dolteng] > [Dolteng Project]を選択してNext。
Project name、Root Package Name に「example」と入力し、Presentationに「S2BlazeDS」、Persistenceに「S2JDBC」、Server Managementに「WTP(Servlet 2.4)」を選択してFinish。
・データ準備
パッケージエクスプローラから、上で作成したexampleプロジェクトを選んで右クリック > [H2] > [Start H2 Server]を選択。
もう一回exampleプロジェクトで右クリック > [H2] > [View Database Manager]を選択。
ブラウザが立ち上がり、「H2コンソール」ページが開くので、「接続」ボタンを押下。
マスタメンテナンスの画面に遷移します。
exampleプロジェクト内のsrc/main/resources/data/demo.sqlを開いて内容をコピーし、マスタメンテ画面のテキストエリアに貼っ付けて「実行」ボタン押下。
データ作成完了！
・Javaクラス（Entity、Service)の生成
exampleプロジェクト内のs2jdbc-gen-build.xmlを開いて、Antビューから「gen-entity」タスクをダブルクリックして実行。
exampleプロジェクトを右クリック > [Reflesh]して、EntityやらServiceやらTestCaseやらがワラワラ作成されていることを確認します。
JUnitを実行してちゃんとグリーンバーが出ることを確認。
・サーバ起動
Eclipseのメニューから[Window] > [Preferences] > [Server] > [Runtime Environment]を選択して「Add...」ボタンを押下。
一覧の中から「Apache Tomcat v6.0」を選択してNext。
Tomcat installation directoryにTomcat（Turnkey)のインストールディレクトリを指定してFinish。
EclipseのServersビューを開いて、任意の場所で右クリック > [New] > [Server] を選択し、一覧から「Tomcat v6.0 Server」を選択してNext。
Available projectsからexampleを選んで「Add > 」ボタン押下でコンテキストパスを追加。
Serversビューの三角ボタンを押してTomcatを起動しておきます。
サーバ側の準備はこれで完了！
続いてFlex側。
・Flexプロジェクトの作成
Eclipseのメニューから、[File] > [New] > [Other...] > [Flex Builder] > [Flexプロジェクト]を選択し、Next。
プロジェクト名に「example-flex」と入力し、アプリケーションサーバーの種類に「J2EE」を選択、「リモートオブジェクトアクセスサービスを使用」にチェックを入れてNext。
ルートフォルダに「${DOCUMENTS}\example\src\main\webapp」、ルートURLに「http://localhost:8080/example/」、コンテキストルートに「/example」と入力。
「設定を検証」ボタンを押下すると、「Webサーバーにアクセスできません。サーバーが(ry」と注意されますが、耳を貸さずにFinish。
・設定の確認
example-flexプロジェクトを右クリック > [Properties] > [Flexコンパイラ]を選択。
追加コンパイラ引数に「-services "${DOCUMENTS}\example\src\main\webapp\WEB-INF\flex\services-config.xml" -locale ja_JP」と入力されていることを確認。
「-locale ja_JP」しか入力されていない場合は上記のとおりに入力して「Apply」。
左側の一覧から[Flexサーバー]を選択。ルートフォルダ、ルートURL、コンテキストルートに、Flexプロジェクト特性を追加した際に入力した値が設定されているか確認。
違う値が設定されている場合は正しく修正して「Apply」。
一覧から[Flexビルドパス]を選択。出力フォルダに「${DOCUMENTS}\example\src\main\webapp\example-flex-debug」と設定されていることを確認。
違う値が設定されている場合は上記のとおりに入力して「Apply」。
・MXMLの作成。
main.mxmlを開き、<mx:Application>のlayout属性の値を"vertical"に修正。
<mx:Applicationタグの間に以下の３行を追加。
<mx:RemoteObject id="srv" destination="empService" />
<mx:DataGrid dataProvider="{srv.findAll.lastResult}" width="100%" height="100%" />
<mx:Button label="従業員一覧を取得" click="srv.findAll();" />
・コンパイル
コンパイルを行うと「内部ビルドエラーが発生しました。」というエラーが出るので、おもむろにexample-flexをクリーンビルド。
「HTMLラッパーを生成できません。」というエラーに変わるので、エラーメッセージを右クリックして[HTMLテンプレートの再作成]を選択。
これでコンパイルが通るようになりました。
・実行
main.mxmlを右クリック > [Run as] > [Flex Application]を選択して、ブラウザ上で開く。
「従業員一覧」ボタンを押下して、従業員一覧が表示されれば成功！
最後にAIRプロジェクト。
・AIRプロジェクトの作成
Eclipseのメニューから、[File] > [New] > [Other...] > [Flex Builder] > [Flexプロジェクト]を選択し、Next。
アプリケーションの種類で「デスクトップアプリケーション」を選択すること以外はFlexと一緒です。
プロジェクト名は「example-air」。
・設定の確認
Flexと同じです。
・MXMLの作成
main.mxmlを開き、<mx:WindowedApplication>のlayout属性の値を"vertical"に修正。
<mx:WindowedApplicationタグの間に以下の４行を追加。
<mx:RemoteObject id="srv" destination="empService"
endpoint="http://localhost:8080/example/messagebroker/amf" />
<mx:DataGrid dataProvider="{srv.findAll.lastResult}" width="100%" height="100%" />
<mx:Button label="従業員一覧を取得" click="srv.findAll();" />
・コンパイル、実行
Flexと同じ。
これで実行できるはず。
AIRアプリケーションの場合、endpoint属性を指定しないとhttp://ain.swfという謎のホストにアクセスしにいきます。
最初、これを知らずにちょっとハマってしまいました。
S2BlazeDSを使ったFlex－Java間の接続は、設定ファイルを書かなくて良いので楽チンです。
MXMLにコンポーネント名・メソッド名が記述してあるので、ソース解析の際にあっちゃこっちゃのファイルを見て回る必要もありません。
SAStrutsやTeedaもそうですが、もっとも関連の強い箇所に設定が記述してあるっていうのは手と目と脳にやさしいですね！
・・・遊ぶ時間がなくなってしまった；；
セイジ
| ホーム |
