Download I B M

IBM Rational Application Developer V8.0
新機能ハンズオン資料
2010 年 10 月 ISE | Rational Solution Group
© Copyright 2010 IBM Corporation
IBM Rational Application Developer V8.0 新機能ハンズオン資料
•
この資料に含まれる情報は可能な限り正確を期しておりますが、日本アイ・ビー・エム株式
会社ならびに日本アイ・ビー・エム システムズ・エンジニアリング株式会社の正式な
レビューを受けておりません。当資料は、資料内で説明されている製品の仕様を保証する
ものではありません。
•
資料の内容には正確を期するよう注意しておりますが、この資料の内容は 2010 年 10 月
現在の情報であり、製品の新しいリリース、PTF などによって動作、仕様が変わる可能性
があるのでご注意下さい。当資料に記載された製品名または会社名はそれぞれの各社の
商標または登録商標です。
•
資料のすべてあるいは１部を問わず、日本アイ・ビー・エム システムズ・エンジニアリング
株式会社の許可なく使用、改変することを禁じます。
© 2010 IBM Corporation
-1-
IBM Rational Application Developer V8.0 新機能ハンズオン資料
目次
1
2
3
はじめに ..............................................................................................................................- 4 1.1
概要 ..............................................................................................................................- 4 -
1.2
開発の流れと関連する RAD の機能 ...............................................................................- 5 -
1.3
開発対象のアプリケーション ...........................................................................................- 7 -
1.4
前提 ..............................................................................................................................- 8 -
Web UI 層の作成 ................................................................................................................- 9 2.1
Web2.0 プロジェクトの作成 ............................................................................................- 9 -
2.2
Web ページの作成 ......................................................................................................- 17 -
2.3
Web ページへの Dojo レイアウト・ウィジェットの追加......................................................- 19 -
2.4
Dojo データ・グリッドの作成 ..........................................................................................- 25 -
2.4.1
JSON ファイルの確認............................................................................................- 25 -
2.4.2
データ・グリッドの作成 ............................................................................................- 30 -
2.5
カスタム Dojo レイアウト・ウィジェットの作成 ...................................................................- 40 -
2.6
カスタム Dojo ウィジェットの Web ページへの追加 ........................................................- 55 -
2.7
Dojo アプリケーションのテスト .......................................................................................- 62 -
データ・アクセス層の作成 ...................................................................................................- 67 3.1
JPA1.0, EJB3,0 プロジェクトの作成..............................................................................- 67 -
3.2
JPA エンティティーの作成 ............................................................................................- 71 -
3.2.1
Movie エンティティーの作成 ..................................................................................- 72 -
3.2.2
Feedback エンティティーの作成 ............................................................................- 78 -
3.2.3
エンティティー間の関連作成 ..................................................................................- 80 -
3.3
3.3.1
データベース接続の作成 .......................................................................................- 90 -
3.3.2
テーブルの生成.....................................................................................................- 92 -
3.3.3
JDBC デプロイメントのプロジェクト構成 ..................................................................- 95 -
3.4
JPA マネージャーBean の作成 ..................................................................................- 100 -
3.4.1
セッション Bean の作成........................................................................................- 100 -
3.4.2
JPA 管理メソッドの EJB への追加 ........................................................................- 102 -
3.4.3
JPA 管理メソッドのプロモート ...............................................................................- 106 -
3.5
4
JPA エンティティーからテーブルの作成 ........................................................................- 90 -
データ・アクセス層の動作確認 .................................................................................... - 117 -
3.5.1
Universal Test Client を使用したデータの追加 .................................................... - 118 -
3.5.2
データ・ソース・エクスプローラー・ビューを使用したデータの確認 ..........................- 122 -
ビジネス・ロジック層の作成 ...............................................................................................- 125 4.1
EJB3.0 プロジェクトの作成 .........................................................................................- 125 -
© 2010 IBM Corporation
-2-
IBM Rational Application Developer V8.0 新機能ハンズオン資料
5
6
4.2
ビジネス・モデルの作成 ..............................................................................................- 128 -
4.3
セッション Bean の作成 ..............................................................................................- 133 -
Web UI 層とビジネス・ロジック層の接続 ............................................................................- 139 5.1
RPC アダプター・サービスの作成 ...............................................................................- 140 -
5.2
Web ページの修正 ....................................................................................................- 145 -
5.2.1
ShowMovies ロード時の振る舞いの変更 .............................................................- 145 -
5.2.2
feedbackDialog の submit 時の振る舞いの変更 ..................................................- 148 -
5.2.3
DataGrid へのオンマウス・オーバー時の振る舞いの変更......................................- 151 -
アプリケーションのデバッグ・テスト.....................................................................................- 162 6.1
Firebug 統合によるデバッグ .......................................................................................- 162 -
6.2
コード・カバレッジによる網羅性の確認 ........................................................................- 170 -
© 2010 IBM Corporation
-3-
IBM Rational Application Developer V8.0 新機能ハンズオン資料
1
はじめに
1.1
概要
本 資 料 は 、Web2.0 ア プ リ ケ ー シ ョ ン 、 J2EE ア プ リ ケ ー シ ョ ン 開 発 者 を 対 象 に 、 IBM Rational
Application Developer for WebSphere Software V8.0 (以下 RAD) を使用して、シンプルな 3 層構
造の J2EE アプリケーションを開発する流れをハンズオン形式で説明します。また、開発の流れの中で、
RAD の機能の活用方法、および、メリットを説明します。すべてを終了するには約 4 時間かかります。
3 層構造とは、一般的な Web システムで広く採用されている「Web UI」、「ビジネス・ロジック」、「データ・
アクセス」層を指します。本資料では、各層の実装フレームワークとして以下に示す技術を採用します。
層
実装フレームワーク
実装フレームワーク
Web UI
JSP/Servlet V2.5
Dojo V1.4.1
ビジネス・
ビジネス・ロジック
EJB V3.0
データ・
データ・アクセス
EJB V3.0
JPA V1.0
Derby V10.5
本資料は、上記構造を持つアプリケーションを、以下の流れで開発する手順を示します。
1.
Web UI 層の作成 （Web UI 開発者向け。2 章参照。）
2.
データ・アクセス層の作成 （データ・アクセス開発者向け。3 章参照。）
3.
ビジネス・ロジック層の作成 （ビジネス・ロジック開発者向け。4 章参照。）
4.
Web UI 層とビジネス・ロジックの接続 （Web UI 開発者向け。5 章参照。）
5.
アプリケーションのデバッグ、テスト （各層の開発者、テスター向け。6 章参照。）
© 2010 IBM Corporation
-4-
IBM Rational Application Developer V8.0 新機能ハンズオン資料
1.2
開発の
開発の流れと関連
れと関連する
関連する RAD の機能
開発の流れの中で、活用する RAD の機能と、機能によりできることを以下に示します。
「2. Web UI 層の作成」で活用する機能
活用する
活用する機能
する機能
この機能
この機能によりできること
機能によりできること
Dojo Toolkit
リッチな UI を持つ Dojo Web アプリケーション開発を迅速かつ
容易にします。
ページ・
ページ・デザイナー
WYSIWYG(What You See Is What You Get) な UI 開発を
実現します。
Dojo カスタム・
カスタム・ウィジェット
再利用可能な UI 部品（たとえば、複数の画面で使用されるショ
ッピング・カートなど）の開発、利用を迅速かつ容易にします。
JSON エディター
フォーマット、および、強調/色づけ表示により JSON データ・
フォーマットの構造理解を容易にします。また、実行時のため
にデータの圧縮を行えます。
Ajax テスト・
テスト・サーバー
軽量なサーバーにより、Ajax アプリケーションの Web UI 層に
おけるテストを迅速にします。
「3. データ・アクセス層の作成」で活用する機能
活用する
活用する機能
する機能
この機能
この機能によりできること
機能によりできること
エンティティー、
エンティティー 、 および、
および 、 管
JPA のエンティティーや、エンティティーを管理するための
理メソッド作成
メソッド作成ウィザード
作成ウィザード
メソッドを自動生成し、開発を迅速かつ容易にします。
トップダウン・
トップダウン・マッピング
JPA エンティティーからデータベースのテーブルを
自動生成します。
Universal Test Client
ローカル、または、リモート・サーバー上の EJB や Java オブジ
ェクトのメソッド、Web サービスなどをテストすることができます。
データ・
データ・ ソース・
ソース・ エクスプロー
データベース接続の管理、接続されたデータ・オブジェクトの
ラー
ブラウズ、変更を RAD 上から行えます。
「4. ビジネス・ロジック層の作成」で活用する機能
活用する
活用する機能
する機能
この機能
この機能によりできること
機能によりできること
EJB 作成ウィザード
作成ウィザード
EJB を自動生成し、開発を迅速かつ容易にします。
© 2010 IBM Corporation
-5-
IBM Rational Application Developer V8.0 新機能ハンズオン資料
「5. Web UI 層とビジネス・ロジックの接続」で活用する機能
活用する
活用する機能
する機能
この機能
この機能によりできること
機能によりできること
RPC アダプター・
アダプター・サービス
サーバー・サイド Java オブジェクトと JSON の変換を行い、
サーバー・サイド Java と Ajax アプリケーションの接続を迅速か
つ容易にします。
「6. アプリケーションのデバックとテスト」で活用する機能
活用する
活用する機能
する機能
この機能
この機能によりできること
機能によりできること
Firebug 統合
JavaScript デバッガー”Firebug”との統合により、
JavaScript の問題判別を容易にします。
コード・
コード・カバレッジ
アプリケーションの品質を検証する上での指標となるカバレッジ
の確認、および、実行されていないソース・コードの行やメソッド
を検出します。
© 2010 IBM Corporation
-6-
IBM Rational Application Developer V8.0 新機能ハンズオン資料
開発対象の
開発対象のアプリケーション
1.3
開発するアプリケーションは、RAD チュートリアル(*) と同じ「My Movie Web Application」です。このア
プリケーションは、映画データを表示する Web ページで構成されており、映画に関する評価およびコメ
ントを行うことができます。アプリケーションの画面イメージを以下に示します。
利用者は、「My Movie Web Application」にアクセスすると、左セクションにて映画の「タイトル」「監督」
「役者」「説明」を一覧表で確認できます。また、表の上にカーソルを合わせると、各映画に対して投稿さ
れたコメントを確認することができます。
右セクションでは、投稿された評価およびコメントのすべてを確認できます。
また、利用者は映画に評価、および、コメントを投稿することができます。投稿するには、左セクション内
の評価したい映画の行の「Rate and Comment!」列をクリックします。すると、「Rate and Comment!」ダ
イアログが表示され、5 段階評価とコメントを登録することができます。
2 章までで作成するのはこのようなアプリケーションです。
*チュートリアル: Dojo を使用した Web 2.0 アプリケーションの作成
http://publib.boulder.ibm.com/infocenter/radhelp/v8/index.jsp?topic=/com.ibm.rad.samptut.doc/tu
torials/web/topics/dojo_abstract.html
3 章以降は、このアプリケーションを機能拡張します。拡張するのは以下の 2 箇所になります。
・
表の上にカーソルを合わせると、各映画に対して投稿された評価の履歴とコメントに加え、評
価の平均点を確認できるようにします。
・
右セクションでは、最近投稿された評価およびコメントを新しい順に最大 5 件表示するようにし
ます。
© 2010 IBM Corporation
-7-
IBM Rational Application Developer V8.0 新機能ハンズオン資料
前提
1.4
以下の項目を理解していると、本資料の理解がより深まります。
Java EE 5 および Java プログラミング
EJB V3.0 の概念
JPA V1.0 の概念
JavaScript、および、Dojo プログラミング
また、本資料のハンズオンを実施するためには、以下のツールおよびコンポーネントがインストールされ
ている必要があります。
Rational Application Developer for WebSphere Software V8.0
(Rational Application Developer for Standard Edition V8.0 ではコード・カバレッジの機能
および EJB/JPA クラスの UML 可視化が利用できません)
WebSphere Application Server Test Environment V7.0
Feature Pack for Web2.0
Mozilla Firefox 3.5 以上
© 2010 IBM Corporation
-8-
IBM Rational Application Developer V8.0 新機能ハンズオン資料
2
Web UI 層の作成
この演習では、「My Movie Web Application」の Web UI 層を作成する手順を示します。演習にはおお
よそ 90 分を要します。
なお、本章の内容は、「チュートリアル: Dojo を使用した Web 2.0 アプリケーションの作成」と同じです。
チュートリアルを既に実施している方は、3 章に進んでください。
2.1
Web2.0 プロジェクトの
プロジェクトの作成
この演習では、特定のプロジェクト・ファセットを使用可能にして、Web 2.0 アプリケーション開発用に構
成された Web プロジェクトを作成する方法について学習します。
Web 2.0 アプリケーション開発用に構成された Web プロジェクトを作成するには、以下のようにしま
す。
1. メニュー・バーから「ファイル」 > 「新規」 > 「動的 Web プロジェクト」を選択します。
© 2010 IBM Corporation
-9-
IBM Rational Application Developer V8.0 新機能ハンズオン資料
2. 「新規動的 Web プロジェクト」ダイアログが開きます。
3. 「プロジェクト名」フィールドに「MyMovieWEB」と入力します。
4. 「ターゲット・ランタイム」でサーバーを「WebSphere Application Server 7.0」を選択します。
5. 「構成」セクションで、「変更」をクリックして、Web 2.0 プロジェクト・ファセットを使用可能にします。
「プロジェクト・ファセット」ウィンドウが開きます。
6.
「Web 2.0」を展開し、以下のファセットを選択し、「OK」をクリックします。
プロジェクト・
プロジェクト・ファセット
バージョン
Dojo Toolkit
1.0
© 2010 IBM Corporation
- 10 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
サーバー・
サーバー・サイド・
サイド・テクノロジー・
テクノロジー・ファセット
サーバー・サイド・テクノロジー・ファセットを使用可能にすることにより、WebSphere
Application Server Feature Pack for Web 2.0 の開発サポートおよびランタイム・サポー
トの両方に対応するよう Web プロジェクトが構成されます。すべての必須 JAR ファ
イルがプロジェクトの Java のビルド・パスおよびデプロイメント記述子に追加されま
す。
Dojo Toolkit ファセット
Dojo Toolkit ファセットを使用可能にすることにより、Dojo Web アプリケーションの
開発用に Web プロジェクトが構成されます。WebSphere Application Server Feature
Pack for Web 2.0 に付属の Dojo Toolkit には、オープン・ソースの Dojo Toolkit、およ
び基本の Dojo Toolkit への追加の IBM 拡張 (ATOM (ATOM シンジケーション・フォー
マット) データ・アクセス用ライブラリー、アナログ・ゲージおよびバー・ゲージ、お
よび SOAP Web サービスへの簡易アクセスなど) が含まれます。
プロジェクト・
プロジェクト・ファセットについてさらに
ファセットについてさらに学習
についてさらに学習したい
学習したい方
したい方に
プロジェクト・ファセットは、特定の機能が必要な場合に、プロジェクトに追加できるその機能の
ユニットです。プロジェクト・ファセットをプロジェクトに追加すると、そのプロジェクトの特性に応じ
て、ネーチャー、ビルダー、クラスパス・エントリー、およびリソースをプロジェクトに追加できま
す。Web 2.0 ファセットでは、Web 2.0 対応の Web アプリケーションの特性が定義されま
す。また、Web 2.0 ファセットでは、Web 2.0 プロジェクトに適用される要件および制約が指定
されます。
© 2010 IBM Corporation
- 11 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
7. 「 EAR に プ ロ ジ ェ ク ト を 追 加 」 チ ェ ッ ク ・ ボ ッ ク ス を 選 択 の 上 、 「 EAR プ ロ ジ ェ ク ト 名 」 に
「MyMovieEAR」と入力し、「次へ」をクリックします。
8. ウィザードの「Dojo プロジェクト・セットアップ」ページが表示されるまで「次へ」をクリックします。
9. 「Dojo プロジェクト・セットアップ」では、デフォルトでは、IBM でサポートされる最新の Dojo が
Web プロジェクトにコピーされる設定になっています。「これらのセットアップ・オプションを変更」を
クリックします。「Dojo プロジェクト・セットアップのオプション」ウィザードが開きます。
「Dojo プロジェクト・
プロジェクト・セットアップの
セットアップのオプション」
オプション」ウィザード
このウィザードは、Web プロジェクトでの Dojo Toolkit の使用方法を決定する際に役立
ちます。
プロジェクトでの Dojo のセットアップには、以下の 3 つのオプションがあります。
Dojo をこのプロジェクト
をこのプロジェクトに
プロジェクトにコピーします
コピーします。
します。Dojo はそこからデプロイ
はそこからデプロイされま
デプロイされま
す。
Dojo Toolkit を Web プロジェクト内に含めます。Dojo フォルダーの名前を指定で
© 2010 IBM Corporation
- 12 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
きます。また、ランタイムに付属のデフォルトの Dojo ディストリビューションを
使用するか、それともご使用のワークスペースまたはファイル・システム内の Dojo
ディストリビューションを使用するかを指定できます。
Dojo はワークスペース内
ワークスペース内のプロジェクトにあり
プロジェクトにあり、
にあり、そこからデプロイ
そこからデプロイされます
デプロイされます。
されます
ワークスペース内の別のプロジェクトにある Dojo のルート・フォルダーを参照で
きます。 Dojo Toolkit はご使用のプロジェクトにコピーされないことに注意してく
ださい。これは、Toolkit を含むプロジェクトからデプロイされます。
Dojo は、リモート側
リモート側にデプロイされているか
デプロイされているか、
されているか、公開 CDN 上にあります。
にあります。
リモート・ロケーションにある Dojo Toolkit を選択できます。Dojo Toolkit ソースのリモー
ト・ロケーションを以下のように指定できます。
* パブリック CDN: 一般に公開されているコンテンツ・デリバリー・ネットワークの
URL を入力できます。コンテンツ・デリバリー・ネットワークは、オープン・ソース
JavaScript ライブラリーに、地理的に分散されたホスティングを提供します。ブラウザ
ーは、Web アプリケーションで URL を解決すると、最も近くにある使用可能なサー
バーから自動的にファイルをダウンロードします。
* リモート URI: Dojo のルート・フォルダーを参照するリモート・ロケーショ
ンの URL を入力できます。
「対応する Dojo」セクションでは、ご使用のリモート Dojo Toolkit に最適の Dojo ソー
ス・ディストリビューションを選択できます。これにより、コンテンツ・アシストといったツール
が提供されます。本製品に付属のデフォルトの Dojo 1.3.2 または 1.4.1 を選択するか、
ご使用のワークスペースまたはファイル・システムにある Dojo フォルダーを参照できま
す。
© 2010 IBM Corporation
- 13 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
10. このチュートリアルでは、Dojo Toolkit を Web プロジェクト内に含めます。「Dojo をこのプロジェク
トにコピーします。Dojo はそこからデプロイされます。」ラジオ・ボタンを選択します。
11. 「次へ」ボタンをクリックし、デプロイメントのセットアップ・オプションを表示します。
12. 「Dojo」セクションの「提供済み」リストで「Dojo Toolkit SDK 1.4.1」を選択します。
© 2010 IBM Corporation
- 14 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
13. 「終了」をクリックし、「Dojo プロジェクト・セットアップのオプション」ウィザードを終了します。
14. 「終了」をクリックし、Web 2.0 対応の Web プロジェクトを作成します。
Web プ ロ ジ ェ ク ト MyMovieWEB が 作 成 さ れ ま す 。 フ ァ セ ッ ト を 有 効 に し た Dojo Toolkit が
WebContent/dojo フォルダーにインポートされます。
© 2010 IBM Corporation
- 15 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
演習の
演習のチェックポイント
Web 2.0 対応の Web プロジェクトを作成しました。
まとめ
この演習では以下のことを学習しました。
Web 2.0 対応の Web プロジェクトの作成方法。
Web 2.0 アプリケーション開発用のプロジェクト・ファセ
ットのカスタマイズ方法。
WebSphere Application Server Feature Pack for
Web 2.0 により使用可能になる Web 2.0 プロジェクト・
ファセットについて。
Dojo 対応の Web プロジェクトのセットアップ・オ
プションの変更方法。
© 2010 IBM Corporation
- 16 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
Web ページの
ページの作成
2.2
この演習では、Web ページの作成方法について学習します。
ShowMovies Web ページを作成するには、以下のようにします。
1. 「エンタープライズ・エクスプローラー」ビューで、「MyMovieWEB」を展開します。
2. 「WebContent」を右クリックし、「新規」 > 「Web Page」と選択します。 「新規 Web ページ」ウィザ
ードが開きます。
3. 「ファイル名」フィールドに「ShowMovies」と入力します。
4. 「テンプレート」リストで、「Basic Templates」 > 「HTML/XHTML」とクリックし、「終了」をクリックしま
す。
ShowMovies.html が作成され、エディター内に開きます。
© 2010 IBM Corporation
- 17 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
演習の
演習のチェックポイント
Dojo ウィジェットを含める HTML Web ページを作成しまし
た。
© 2010 IBM Corporation
- 18 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
2.3
Web ページへの
ページへの Dojo レイアウト・
レイアウト・ウィジェットの
ウィジェットの追加
こ の 演 習 で は 、 Border Container ウ ィ ジ ェ ッ ト を ペ ー ジ に 追 加 す る こ と に よ り 、 My Movie Web
Application の Web クライアント・インターフェースの作成を開始します。この演習は、Web アプリケー
ション作成用のさまざまな Dojo ツールを調べる機会ともなります。
1. 「Web」パースペクティブに切り替えます。
2. ShowMovies.html を閉じ てし まった 場合、「 エンタープライ ズ・ エクスプローラー」ビューで、
「MyMovieWEB」 > 「WebContent」を展開し、ShowMovies.html をダブル・クリックします。ペー
ジ・デザイナーでページが開きます。
ページ・
ページ・デザイナー
ページ・デザイナーには、Web アプリケーションの開発に役
立つ、4 つの便利なペインが用意されています。
デザイン
「デザイン」ペインはビジュアル編集機能を完備した
WYSIWYG 環境です。「パレット」および「エンタープライズ・
エクスプローラー」ビューからのドラッグ・アンド・ドロップも可能
です。
ソース
「ソース」ペインでは、ソース・コードとマークアップを直接処理
できます。
分割
「分割」ペインは、2 つ以上のペインを 1 つの分割画面ビュ
ーに結合します。デフォルトは、「設計」ペインと「ソース」ペイ
ンでの分割です。分割画面の 1 つの部分で加えた変更は、
分割画面のもう一方の部分に即座に表示されます。画面は水
平または垂直に分割できます。
プレビュー
「プレビュー」ペインは、現行ページを外部 Web ブラウザー
で表示した場合の予想される外観を示す、読み取り専用のビ
ューです。Firefox または Internet Explorer ではページが
どのように表示されるかを確認できます。
3. Page Designer で「デザイン」タブを選択します。
© 2010 IBM Corporation
- 19 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
4. 「パレット」で「Dojo レイアウト・ウィジェット」ドロワーをクリックします。
パレット
Dojo 対応の Web プロジェクトで作業する場合、「パレット」
にはドロワー別に編成されたさまざまな Dojo ウィジェットが
含まれています。これらのウィジェットを Web ページにドラッ
グ・アンド・ドロップできます。ウィジェットの上にカーソルを移
動すると、各ウィジェットの説明を表示できます。
「パレット」ビューが開いていない場合は、「ウィンドウ」 > 「ビ
ューの表示」 > 「パレット」を選択します。
5. 「BorderContainer」ウィジェットを選択して、ページにドラッグします。 「Insert Border Container」
ウィンドウが開きます。このウィンドウでは、「Headline」と「Sidebar」という 2 つの設計モードを選択
できます。追加する領域を選択すると、それに応じて BorderContainer が Web ページにレンダ
リングされる様子を示すプレビューが表示されます。
6. 「Top」領域を選択し、「OK」をクリックします。BorderContainer ウィジェットが Web ページに挿入さ
れます。
© 2010 IBM Corporation
- 20 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
7. 「プロパティー」ビューを使用して、BorderContainer ウィジェットまたは他のレイアウト・ウィジェット
のプロパティーを編集できます。「デザイン」ペインで「BorderContainer」を選択してから「プロパテ
ィー」ビューを開くと、編集可能なさまざまなプロパティーが表示されます。
「プロパティー」ビューが開いていない場合は、「ウィンドウ」 >
「ビューの表示」 > 「プロパティー」を選択します。
8. 「BorderContainer」タブの「Properties」フィールドに、height: 100%; width: 100% と入力します。
9. BorderContainer ウ ィ ジ ェ ッ ト に 別 の 領 域 を 追 加 す る に は 、 「 BorderContainer 」 タ ブ の 下 の
「Region」タブをクリックし、「追加」をクリックします。
10. 作成されたこの領域の「領域」セルをクリックします。
11. ドロップダウン・リストから「center」の値を選択します。 領域がコンテナーの中央に位置調整されま
す。
12. 同様に、領域を追加し、ドロップダウン・リストから「right」を選択します。領域がコンテナーの中央に
位置調整されます。
© 2010 IBM Corporation
- 21 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
13. 「 デザイ ン」 ペイ ンで BorderContainer の上部領域を 選択し ます。「 プロパティ ー 」 ビューの
「BorderContainer」タブの下に「ContentPane」タブが表示されます。
14. 「Properties」フィールドの隣の「参照」ボタンをクリックします。 「新規スタイル」ダイアログが開きま
す。
15. 左側のペインで「テキスト・レイアウト」を選択します。
16. 右側のペインの「水平方向の位置合わせ」グループで「中央」ボタンを選択し、「OK」をクリックしま
す。
© 2010 IBM Corporation
- 22 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
17. 「デザイン」ペインで BorderContainer の上部領域を選択し、「My Movie Web Application! 」と
入力します。
18. ページを保存します。ツール・バーの「保存」アイコンをクリックします。
Dojo Toolkit についてさらに学習
についてさらに学習する
学習する
Dojo Toolkit は、強力かつ柔軟なモジュラー AJAX ソフトウ
ェア開発キットです。これは 3 つの主要な層に分かれていま
す。
Dojo Core - AJAX 開発に必要なすべての主要機能に
加え、他のツールキットにはない多数の機能を備えていま
す。
Dijit - AJAX アプリケーションの開発時に使用できる、対
話性に富んだ、高品質なウィジェットとテーマのセット。
DojoX (Dojo eXtensions) - AJAX アプリケーションの
開発に役立つものの、すべてのアプリケーションに必要と
いうわけではないウィジェットと API を含めるためのモジ
ュール。
Dojo Toolkit の詳細については、Dojo Toolkit Web サイトに
アクセスしてください。
© 2010 IBM Corporation
- 23 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
演習の
演習のチェックポイント
Dojo クライアント用の Web ページのコードを作成しました。
まとめ
この演習では以下のことを学習しました。
© 2010 IBM Corporation
Web ページで Dojo 開発を可能にする方法。
Dojo ウィジェットを Web ページに追加する方法。
Dojo Toolkit について。
- 24 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
Dojo データ・
データ・グリッドの
グリッドの作成
2.4
この演習では、Web クライアント・インターフェースの作成を続行し、Dojo データ・グリッド・ウィジェット
をページに追加し、グリッドにデータを取り込みます。
データへの
データへのアクセス
へのアクセス
My Movie Web Application では、JSON データ交換形式を
使用してデータにアクセスします。データにアクセスするに
は、2 つの方法があります。1 つは、データを保持している
JSON ファイルから直接アクセスする方法、もう 1 つは EJB
や POJO といったサーバー・サイド Java オブジェクトから
データを取得し、JSON ファイルを出力するサーバー・サイド
のサービスを探索する方法です。
2.4 節では、JSON ファイルをデータ・ソースとして使用しま
す 。 あ ら か じ め 、 JSON フ ァ イ ル を ダ ウ ン ロ ー ド (*) し 、
WebContent フォルダーに保存して置いてください。
5.2 節では、RPC アダプター・サービスを使用して、EJB から
データを取得します。
* JSON ファイルのダウンロード URL
http://publib.boulder.ibm.com/infocenter/radhelp/v8/topic/com.ibm.rad.samptut.doc/tutorials/web/
resources/MovieList.json
2.4.1
JSON ファイルの
ファイルの確認
まず、アクセスする JSON ファイルを確認します。
1. WebContent フォルダーに保存した、MovieList.json を右クリックし、「アプリケーションから開く」 ->
「JSON エディター」をクリックします。
JSON エディター
JSON エディターは、JSON データのフォーマット、および、強
調/色づけ表示によりフォーマットの構造理解を容易にしま
す。また、実行時のためにデータの圧縮を行えます。
© 2010 IBM Corporation
- 25 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
2. JSON エディターが開きます。
3. JSON データ構造を理解しやすくするためにフォーマットをします。JSON エディター内で右クリック
し、「Source」 -> 「フォーマット」をクリックします。
4. JSON データがフォーマットされます。
5. JSON エディターの強調・色づけ表示を変更します。メニュー・バーより、「ウィンドウ」 -> 「設定」を
クリックします。
© 2010 IBM Corporation
- 26 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
6. 「設定」ダイアログで、「Web」 -> 「JSON」 -> 「エディター」をクリックします。「対応する括弧の強
調表示」にチェックを入れ、強調表示する「色」の設定を自由に変更します。
JSON エディターの
エディターの設定（
設定（対応する
対応する括弧
する括弧の
括弧の強調表示）
強調表示）
「設定」ダイアログの「Web」 -> 「JSON」 -> 「エディター」に
て、対応する括弧を強調表示する設定ができます。「対応す
る括弧の強調表示」にチェックを入れることによって、エディタ
ー上で選択した括弧に対応する括弧が、指定した「色」で強
調表示されます。
© 2010 IBM Corporation
- 27 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
7. 「設定」ダイアログで、「Web」 -> 「JSON」 -> 「エディター」 -> 「構文の色の指定」をクリックしま
す。構文の色、フォントを自由に変更します。
JSON エディターの
エディターの設定（
設定（構文の
構文の色の指定）
指定）
「設定」ダイアログの「Web」 -> 「JSON」 -> 「エディター」
-> 「構文の色の指定」にて、構文の色、および、フォントを指
定できます。
設定可能な構文の要素は以下です。
名前：値に対するキーとなる名前。
例）{“actor” : ”Vivien Leigh”,…
ストリング：文字列型の値。
例）{“actor” : ”Vivien Leigh”,…
© 2010 IBM Corporation
- 28 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
番号：数値型の値。
例）{“rating” : 3.0,…
定数：データサイズを縮小するために、繰り返される
名前を置き換えた定数。
例）｛”result” : [{“actor” : ”Vivien Leigh”,…
を定数置換すると、{r : [{a : “Vivien Legh”,…
オブジェクト：順序付けされない名前と値のセット。
例）{“actor” : ”Vivien Leigh” , ”title” : “Gone
with the Wind”}
配列：順序付けされた値のセット。
例）{"result":
[{"actor":"Vivien Leigh","title":"Gone with
the Wind”},
{"actor": "Michael J Fox", "title":"Back To
The Future"}]
}
設定可能なフォントは以下です。
太字
イタリック
打ち消し線
下線
8. データサイズを縮小するために JSON ファイルを圧縮します。JSON エディター内で右クリックし、
「Source」 -> 「圧縮」をクリックします。
9. JSON ファイルが圧縮されたことを確認し、保存します。
© 2010 IBM Corporation
- 29 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
2.4.2
データ・
データ・グリッドの
グリッドの作成
次に、ムービー・オブジェクトを表示するグリッドを作成します。
1. 「パレット」で「Dojo データ・ウィジェット」ドロワーをクリックして開きます。
2. 「DataGrid」を BorderContainer の「center」領域にドラッグ&ドロップします。DataGrid ウィジェッ
トにより、スプレッドシートのような表が作成されます。
3. 「Dojo DataGrid」ダイアログが開きます。「グリッドを取り込む JavaScript の生成」チェック・ボック
スをクリアします。
4. 「列」セクションで、列の見出しラベルと JavaScript プロパティーを列ごとに指定します。
a. 「見出しラベル」フィールドに「タイトル」と入力します。
b. 「JavaScript プロパティー」フィールドに「title」と入力します。
c.
「追加」をクリックし、列見出しラベル - JavaScript プロパティーのペアを下の表に追加
します。
d. 前のステップを繰り返して、以下の列見出しラベル - JavaScript プロパティーのペアを
追加します。
見出し
見出しラベル
JavaScript プロパティー
タイトル
title
監督
director
役者
actor
説明
description
© 2010 IBM Corporation
- 30 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
5. 「終了」をクリックします。「デザイン」ペインで、DataGrid が追加されていることを確認できます。また、
「ソース」ペインで、DataGrid の html マークアップが追加されていることを確認できます。field 属
性には JavaScript プロパティーが取り込まれており、対応する見出しラベルが列名として設定さ
れています。
© 2010 IBM Corporation
- 31 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
パレットからの
パレットからの Dojo ウィジェットの
ウィジェットのドラッグ&ドロップ
ドラッグ ドロップ
パレットから Dojo ウィジェットをドラッグ&ドロップすることで、各ウィジェットの表示
に必要な設定が自動で生成されます。具体的には、dojo.require ステートメント、
および、CSS リンクの設定が生成されます。
dojo.require ステートメント
dojo.require ステートメントは、Web ページ上のウィジェットに必要なすべての
Dojo パッケージをロードします。
パ レ ッ ト か ら DataGrid を ド ラ ッ グ & ド ロ ッ プ す る こ と で 、 DataGrid お よ び
ItemFileReadStore が dojo.require ステートメントとして自動的に追加されて
います。
CSS リンク
CSS リンクは、ウィジェットが参照するスタイルシートへのリンクです。パレットから
DataGrid をドラッグ&ドロップすることで、CSS リンクも Web ページのソース・コ
ードに追加されます。tundra.css と dijit.css は、ウィジェットのルック・アンド・フ
ィールが一貫性のあるものとなるよう、Dojo に用意されているデフォルトのテーマ
の一部です。
Grid.css と tundraGrid.css は、DataGrid 表示に固有のスタイルシートです。
6. これで、データ・グリッドにデータを取り込めるようになりました。次にコンテンツ・アシストを使用して
script タグを追加します。ここに、DataGrid にデータを取り込む JavaScript コードを入れること
になります。手動でコンテンツ・アシストを起動するには、Ctrl + スペースを押します。
© 2010 IBM Corporation
- 32 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
コンテンツ・
コンテンツ・アシスト
コンテンツ・アシストは、タグまたは関数を挿入したり完成させ
たりする上で、あるいはコード行を完成させる上で役立ちま
す。コンテンツ・アシストは、ソース・ファイル内のカーソル位置
をコンテキストとして、完成形の候補を提示します。HTML、
JavaScript、および Dojo でコンテンツ・アシストを利用でき
ます。コンテンツ・アシストでは、dojo テンプレートが一部の
関数用に用意されています。これにより、関数の正しい使用
法を記述した便利なテンプレート・コードをソースに取り込めま
す。
7. 「ソース」ペインで、dojo.require ステートメントの入った </script> タグの下に、< と入力します。コ
ンテンツ・アシストが表示されます。
8. script を選択します。 script を選択すると、次のコードが追加されます。
<script type="text/javascript"> </script>
9. 空の script タグの内部で dojo. と入力し、CTRL + スペースを押してコンテンツ・アシストを起動
します。dojo.ad..と入力するにつれて、表示されるコンテンツ・アシストのオプションがフィルター処
理されていきます。
10. dojo.addOnLoad 関数を選択します。addOnLoad 関数には、データ・グリッドに取り込むデータ
を取得するコードが入ります。
© 2010 IBM Corporation
- 33 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
addOnLoad 関数
addOnLoad は、ページロード後に実行される関数を登録す
る、dojo 関数です。このシナリオではページロード後にデー
タの読み込みとグリッドへの表示を行うような処理を記述しま
す。
11. 次に、サービス URL または JSON ファイルからデータを取得する Ajax 関数を作成します。
dojo xhrGet 関数を使用します。 xhrg と入力し、dojo.xhrGet テンプレートを選択します。
コンテンツ・アシストにより、xhrGet 関数用の dojo テンプレートが提供されます。これを選択すると、ツ
ールチップに示されるコードがソースに取り込まれます。挿入されるコードは次のようなものです。
dojo.xhrGet({
url : "url",
handleAs : "text",
load : function(response, ioArgs) {
},
error : function(response, ioArgs) {
}
});
12. URL 属性を JSON ファイルへの相対パス「MovieList.json」に変更します。
13. handleAs 属性を json に設定します。
© 2010 IBM Corporation
- 34 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
url : "MovieList.json",
handleAs : "json",
14. データが正常にロードされると、load プロパティー内で宣言された関数が実行されることになります。
load プロパティーに以下のコードを追加します。このコードは、データ・グリッドにデータを取り込み
ます。
var newData = {
identifier : "title",
items : response.result
};
MovieList.json に定義されたデータの属性名の
中で、ユニーク ID にする属性を指定します。
MovieList.json の中で本体となるデータ配列の
属性名を item 変数に代入します。
var dataStore = new dojo.data.ItemFileReadStore({
data : newData,
id : "dataStoreId"
});
var grid = dijit.byId("gridId");
Step 5 で追加した DataGrid の id 属性とそろ
える必要があります。
grid.setStore(dataStore);
上記のコードは、response に含まれるロードされたデータを dojo.data.ItemFileReadStore が必要と
する形式に変更し、形式変更後のデータが入った ItemFileReadStore データ・ストアを作成し、それ
からこれをデータ・グリッドに追加します。変数名の前に var キーワードを追加すると、変数の有効範囲
は load 関数に対してローカルになります。
15. error 属性で宣言される関数には、次のコードを追加します。
alert("An error occurred while invoking the service.");
16. ページを保存します。ツール・バーの「保存」アイコンをクリックします。
ShowMovies.html のソース・コードは次のようになるはずです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css"
© 2010 IBM Corporation
- 35 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
href="dojo/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css"
href="dojo/dijit/themes/tundra/tundra.css">
<title>ShowMovies</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-31j">
<script type="text/javascript"
djconfig="isDebug: false, parseOnLoad: true"
src="dojo/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
</script>
<script type="text/javascript">
dojo.addOnLoad(function() {
dojo.xhrGet({
url : "MovieList.json",
handleAs : "json",
load : function(response, ioArgs) {
var newData = {
identifier : "title",
items : response.result
};
var dataStore = new dojo.data.ItemFileReadStore({
data : newData,
id : "dataStoreId"
});
var grid = dijit.byId("gridId");
grid.setStore(dataStore);
},
error : function(response, ioArgs) {
alert("An error occurred while invoking the service.");
}
© 2010 IBM Corporation
- 36 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
});
});
</script>
<link rel="stylesheet" type="text/css" title="Style"
href="dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" title="Style"
href="dojo/dojox/grid/resources/tundraGrid.css">
</head>
<body class="tundra">
<div dojoType="dijit.layout.BorderContainer" id="BorderContainer"
design="headline" style="height: 100%; width: 100%">
<div dojoType="dijit.layout.ContentPane" region="top" style="text-align:
center">My Movie Web Application!</div>
<div dojoType="dijit.layout.ContentPane" id="" title="" region="center">
<table id="gridId" dojotype="dojox.grid.DataGrid" autowidth="true"
rowselector="20px">
<thead>
<tr>
<th field="title">タイトル</th>
<th field="director">監督</th>
<th field="actor">役者</th>
<th field="description">説明</th>
</tr>
</thead>
</table>
</div>
<div dojoType="dijit.layout.ContentPane" id="" title=""
region="right"></div>
</div>
</body>
</html>
ここまでで、ShowMovies.html のプレビューを確認してみます。ShowMovies.html を開き、「プレビュ
ー」タブをクリックしてください。グリッド上に映画データが表示されることを確認できます
© 2010 IBM Corporation
- 37 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
注意！
注意！
Internet Explore でプレビューを確認する場合、以下のようにコードを修正する必要が
あります。
・ dojo.xhrGet 内に headers 属性の追加
url : "MovieList.json",
headers : {
"If-Modified-Since" : 0
},
handleAs : "json",…
・ DataGrid テーブルの ”autowidth”プロパティーの除去
<table id="gridId" dojotype="dojox.grid.DataGrid"
autowidth="true"
rowselector="20px">
© 2010 IBM Corporation
- 38 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
演習の
演習のチェックポイント
Dojo クライアント用の Web ページのコードを作成しました。
まとめ
この演習では以下のことを学習しました。
データ・グリッドを Web ページに追加する方法。
Dojo コードを素早く作成するためにコンテンツ・アシスト
を使用する方法。
© 2010 IBM Corporation
- 39 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
カスタム Dojo レイアウト・
レイアウト・ウィジェットの
ウィジェットの作成
2.5
この演習では、ユーザーがムービーの評価やコメント追加ができる、カスタム Dojo ウィジェットを作成し
ます。
Dojo ウィジェット
Dojo ウィジェットは 3 つのファイルで構成されています。
HTML ファイル
JavaScript ファイル
CSS ファイル
「新規 Dojo ウィジェット」ウィザードでこれらの 3 つのファイ
ル が 作 成 さ れ ま す 。 そ れ か ら 、 HTML テ ン プ レ ー ト と
JavaScript ファイルを編集します。
1. 「エンタープライズ・エクスプローラー」ビューで dojo フォルダーを右クリックし、「新規」 > 「Dojo
ウィジェット」を選択します。 「新規 Dojo ウィジェット」ウィザードが表示されます。
© 2010 IBM Corporation
- 40 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
2. 「ウィジェット名」フィールドに RateAndComment と入力します。 ウィジェットに関連する HTML
テンプレートとスタイルシートのパスが自動的に入力されます。
3. 「終了」をクリックします。 ウィジェットの JavaScript ソース・ファイルが作成され、エディターで開か
れます。
© 2010 IBM Corporation
- 41 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
注意！
注意！
RateAndComment.js の 2 行目が文字化けしている場合、保管ができません。
この行を削除してください。
カスタム・
カスタム・ウィジェットに
ウィジェットに関係する
関係するファイル
するファイルの
ファイルの配置場所
「新規 Dojo ウィジェット」ウィザードで生成されるファイルは、デ
フォルトでは、WebContent/dojo 配下のモジュール名フォル
ダーの中に配置されます。
この演習では、WebContent/dojo/myDojo です。
4. 「エンタープライズ・エクスプローラー」ビューで、「MyMovieWEB」 -> 「WebContent」 -> 「dojo」
-> 「myDojo」 -> 「template」 -> 「RateAndComment.html」 ファイルをダブル・クリックします。
HTML ファイルがエディターで開きます。
5. 「ソース」タブをクリックして、HTML マークアップを表示します。
6. 「パレット」で「Dojo アプリケーション・ウィジェット」ドロワーを展開します。
© 2010 IBM Corporation
- 42 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
7. 「Dialog」ウィジェットを div タグの中にドラッグ・アンド・ドロップします。
dijit.Dialog
Dojo dijit.Dialog はモーダル・ダイアログ・ボックスであり、ダ
イアログの表示中は親画面へのアクセスをブロックし、画面を
ぼかし表示します。
8. Dojo ダイアログ・ウィジェットの接続ポイントとタイトルを、以下のように追加します。
<div dojoType="dijit.Dialog" id="Dialog" dojoattachpoint="dialogbox"
title="Rate and Comment!"></div>
接続ポイント
接続ポイント(dojoattachpoint)
ポイント
接続ポイントにより、HTML ファイルで定義された dojo ウィジ
ェットに JavaScript 変数からアクセスできるようになります。
9. ダイアログの div 内でコンテンツ・アシストを使用して、評価とコメントの機能を追加します。
a. Rate: < と入力し、Ctrl + スペースを押してコンテンツ・アシストを起動します。
b. コンテンツ・アシストから div を選択します。
c.
挿入された div の後にカーソルを置き、スペースを押します。
© 2010 IBM Corporation
- 43 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
d. コンテンツ・アシストを起動して dojotype 属性を探し、これを選択します。
e. カーソルを引用符の間に置き、コンテンツ・アシストを起動します。Dojo ウィジェットのリスト
が表示されます。
f.
dojox.form.Rating ウィジェットを探します。ウィジェットの名前を入力していくにつれて、コンテ
ンツ・アシストが表示するリストが絞り込まれていきます。
g. div タグを編集します。dojoattachpoint=”rating” と追加します。
h. numst…と入力し、コンテンツ・アシストを起動します。「numstar」を選択します。
コンテンツ・
コンテンツ・アシスト
numstars は dojox.form.Rating の カ ス タ ム 属 性 で html
標準ではありませんが、コンテンツ・アシストから入力できま
す。
i.
numstars=”5”とします。
Rate : <div dojotype="dojox.form.Rating" dojoattachpoint="rating"
numstars="5"></div>
© 2010 IBM Corporation
- 44 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
j.
以下のコードをコピーして、エディターの Dialog ウィジェット内の Rating ウィジェットの下に
貼り付けます。
<br>
<br>
Comments : <div dojotype="dijit.form.Textarea" dojoattachpoint =
"comments" style="width: 60%;"></div>
<br>
<button dojotype="dijit.form.Button" dojoattachevent="onClick:
saveFeedback">Submit</button>
接続ポイント
接続ポイント(dojoattachevent)
ポイント
dojoattachevent により、イベント・ハンドラーを登録できます。
ここでは、ボタンのクリック時に RateAndComment ウィジェ
ットの saveFeedback 関数を呼び出すようにします。
TextArea ウジェットと
ウジェットと Button ウィジェット
TextArea ウィジェットは、コメントを入力するのに使用されま
す。また、Button ウィジェットは、ユーザーが評価とコメントを
送信するためのものです。
検証
エディターではリアルタイム検証がサポートされています。無効な要素を書く
と、検証が行われて警告が出されます。無効な要素の上にカーソルを移動する
と、警告の説明が表示されます。以下に、dojox.form.Rating dojo ウィジェット
に未定義の属性を書いた場合の例を示します。
10. 「パレット」で「Dojo アプリケーション・ウィジェット」ドロワーを展開します。
© 2010 IBM Corporation
- 45 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
11. 「TitlePane」ウィジェットをダイアログの div の下にドラッグ・アンド・ドロップします。
TitlePane ウィジェット
TitlePane は、上部にタイトルが示された、展開または省略表
示可能なペインです。
12. TitlePane を次のように編集します。
<div dojoType="dijit.TitlePane" id="TitlePane" title="History of Ratings
and Comments">
<ol id="feedbacklist"></ol>
</div>
コメントと評価の履歴が順序付きリストの中に保管されます。現在、HTML テンプレートには以下の要素
があるはずです。
<div class="RateAndComment">
<div dojoType="dijit.Dialog" id="Dialog"
dojoattachpoint="dialogbox" title="Rate and Comment!">
Rate : <div dojotype="dojox.form.Rating"
dojoattachpoint="rating" numstars="5"></div>
<br>
<br>
Comments : <div dojotype="dijit.form.Textarea"
dojoattachpoint=="comments" style="width: 60%;"></div>
<br>
<button dojotype="dijit.form.Button"
dojoattachevent="onClick: saveFeedback">Submit</button>
</div>
© 2010 IBM Corporation
- 46 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
<div dojoType="dijit.TitlePane" id="TitlePane" title="History of
Ratings and Comments">
<ol id="feedbacklist"></ol>
</div>
</div>
13. カ ス タ ム ・ ウ ィ ジ ェ ッ ト の HTML テ ン プ レ ー ト が 作 成 で き た の で 、 カ ス タ ム ・ ウ ィ ジ ェ ッ ト の
JavaScript を編集します。「エンタープライズ・エクスプローラー」ビューで、「MyMovieWeb」 ->
「WebContent」 -> 「dojo」 -> 「myDojo」 -> 「RateAndComment.js」ファイルをダブル・クリック
して開きます。
14. HTML テンプレートで使用されている Dojo ウィジェットごとに dojo.require ステートメントを追加
します。以下をコピーして、dojo.require("dijit._Templated") セクションの下に貼り付けます。
dojo.require("dojox.form.Rating");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dijit.TitlePane");
dojo.require ステートメント
dojo.require ステートメントは、Java の import ステートメント
に似ています。
15. Dojo ウィジェットを HTML テンプレートの中で使用するので、widgetsInTemplate 変数を true
に設定します。
// Set this to true if your widget contains other widgets
widgetsInTemplate : true,
16. 以下のコードをコピーして、widgetsInTemplate 変数の下に貼り付けます。
movieTitle : "",
rcStore : new dojo.data.ItemFileWriteStore({
data : {
items : []
}
}),
© 2010 IBM Corporation
- 47 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
movieTitle には、評価されるムービーの名前が入れられます。 rcStore は、ユーザーが評価とコメント
のアクションの実行中に入力したデータを保管する、Dojo データ・ストアです。この時点では、メモリー
上にコメントの履歴を保管するため、履歴保管用の dojo オブジェクトを作成しました。
17. 以下の関数をコピーして、コンストラクター関数の後に貼り付けます。
getComment : function(){
return this.comments.attr('value');
},
getRating : function(){
return this.rating.attr('value');
},
setComment : function(value){
this.comments.attr("value", value);
},
setRating : function(value){
this.rating.attr("value", value);
},
これらの関数は、dojox.form.Rating ウィジェットと dijit.form.Textarea ウィジェットの値の getter およ
び setter として機能します。関数はそれぞれ、HTML テンプレートに設定されている各ウィジェットの
dojoattachpoint 値を使用して、value 属性にアクセスします。
© 2010 IBM Corporation
- 48 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
18. 以下のコードをコピーして、getter および setter の後に貼り付けます。
showFeedbackTools : function(movieTitle){
this.movieTitle = movieTitle;
this.dialogbox.show();
},
showFeedbackTools 関数は、評価とコメント用のフォームを持つダイアログを表示します。movieTitle
は現在評価中のムービーのタイトルです。dijit.Dialog.show()は dijit.Dialog ウィジェットの関数です。
dialogbox 属性は template html 上に定義した dijit.Dialog の dojoattachpoint に指定した名前と
一致する必要があります。
19. ダイアログの Submit ボタンを押した時点でコメントと評価をウィジェットのデータ・ストアに保管すると
いう機能を実装した関数を、showFeedbackTools の後に作成します。これに saveFeedback と
いう名前を付けます。ウィジェットの HTML テンプレートにおいて、Submit ボタンの onClick イベ
ントの dojoattachevent 属性にこの関数名を設定したためです。
saveFeedback : function(){
},
e. 最初に、ユーザーがダイアログで設定した値を取得する必要があります。前に作成した
getter 関数を使用します。関数の中で var userRating = this. と入力します。
f.
コンテンツ・アシストを使用し、JavaScript ファイルの中で必要なプロパティーを探します。
getRating() を選択します。
g. 同様に、以下のコードを使用して、コメント用の変数を設定します。
var userComment = this.getComment();
h. 以下のコードを使用して、フィードバック・データを保管します。
this.rcStore.newItem({
title : this.movieTitle,
comment : userComment,
rating : userRating
});
© 2010 IBM Corporation
- 49 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
データは rcStore に新しい項目として保管されます。これには、ダイアログが開いた時点であらかじめ
設定されるムービーのタイトル、およびユーザーが設定する評価とコメントが入れられます。
次の i-j ステップでは、コメントの履歴を「表示する」ロジックを作成します。
i.
投稿されたコメントと評価の履歴を保持するリストに、値を追加します。値は、ウィジェット
の HTML テンプレートにあるタイトル・ペインの内部に設定された、ol HTML 要素の子
要素として追加されます。
dojo.create("<li>", {innerHTML : "<b>Title:</b> " + this.movieTitle + "
<b>Rating:</b>" + userRating + "<br> <b>Comments:</b> " + userComment},
"feedbacklist");
j.
値をリセットして、ダイアログを非表示にします。以下のコードをコピーして、前のステップ
のコードの下に貼り付けます。
this.dialogbox.hide();
this.setComment("");
this.setRating(0);
値をリセットするとフィールドがクリアされるので、前の「評価とコメント」アクションのフィールドの値は、新
しい「評価とコメント」アクションに引き継がれません。ダイアログを非表示にすることで、ユーザーは引き
続きデータ・グリッドの他のムービーの評価を実施できます。
20. getCommentsByMovieTitle 関数をコピーして、saveFeedback 関数の下に貼り付けます。この
関数は movieTitle をパラメーターとして受け取り、データ・ストアに保管されている、そのムービー
に関してなされたすべてのコメントが入った配列を返します。
getCommentsByMovieTitle : function(movieTitle){
var comments = [];
var store = this.rcStore;
this.rcStore.fetch({
query : {title : movieTitle},
onComplete : function(items, request){
dojo.forEach(items, function(item){
comments.push(store.getValue(item,
"comment"));
});
}
});
return comments;
© 2010 IBM Corporation
- 50 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
},
この時点で、RateAndComment.js は次のようになるはずです。
dojo.provide("myDojo.RateAndComment");
// dojo.require the necessary dijit hierarchy
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.form.Rating");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dijit.TitlePane");
dojo.declare("myDojo.RateAndComment", [ dijit._Widget,
dijit._Templated ], {
// Path to the template
templateString : dojo.cache("myDojo",
"templates/RateAndComment.html"),
// Set this to true if your widget contains other widgets
widgetsInTemplate : true,
movieTitle : "",
rcStore : new dojo.data.ItemFileWriteStore({
data : {
items : []
}
}),
// Override this method to perform custom behavior during dijit
© 2010 IBM Corporation
- 51 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
// construction.
// Common operations for constructor:
// 1) Initialize non-primitive types (i.e. objects and arrays)
// 2) Add additional properties needed by succeeding lifecycle
methods
constructor : function() {
},
getComment : function() {
return this.comments.attr('value');
},
getRating : function() {
return this.rating.attr('value');
},
setComment : function(value) {
this.comments.attr("value", value);
},
setRating : function(value) {
this.rating.attr("value", value);
},
showFeedbackTools : function(movieTitle) {
this.movieTitle = movieTitle;
this.dialogbox.show();
},
saveFeedback : function() {
var userRating = this.getRating();
var userComment = this.getComment();
this.rcStore.newItem({
title : this.movieTitle,
comment : userComment,
rating : userRating
© 2010 IBM Corporation
- 52 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
});
dojo.create("<li>", {
innerHTML : "<b>Title:</b> " + this.movieTitle + "
<b>Rating:</b>"
+ userRating + "<br> <b>Comments:</b>
" + userComment
}, "feedbacklist");
this.dialogbox.hide();
this.setComment("");
this.setRating(0);
},
getCommentsByMovieTitle : function(movieTitle) {
var comments = [];
var store = this.rcStore;
this.rcStore.fetch({
query : {
title : movieTitle
},
onComplete : function(items, request) {
dojo.forEach(items, function(item) {
comments.push(store.getValue(item,
"comment"));
});
}
});
return comments;
},
// When this method is called, all variables inherited from
superclasses are
// 'mixed in'.
// Common operations for postMixInProperties
// 1) Modify or assign values for widget property variables defined
in the
© 2010 IBM Corporation
- 53 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
// template HTML file
postMixInProperties : function() {
}
});
演習の
演習のチェックポイント
これでカスタム Dojo ウィジェットを作成できました。
まとめ
この演習では以下のことを学習しました。
カスタム Dojo ウィジェットに合わせて HTML テンプレ
ートを変更する方法
カスタム Dojo ウィジェットに合わせて JavaScript ファ
イルを変更する方法
© 2010 IBM Corporation
- 54 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
カスタム Dojo ウィジェットの
ウィジェットの Web ページへの
ページへの追加
への追加
2.6
この演習では作成したカスタム Dojo ウィジェットを Web ページに挿入します。
カスタム Dojo ウィジェットは作成後、「パレット」の「その他の Dojo ウィジェット」ドロワーに追加される
ため、ウィジェットを Web ページに追加しやすくなっています。
1. 「エンタープライズ・エクスプローラー」ビューから、ShowMovies.html ファイルを開き、「デザイン」
タブをクリックします。
2. 「パレット」で「その他の Dojo ウィジェット」ドロワーを展開します。
3. 「RateAndComment」ウィジェットを「BorderContainer」の右側領域にドラッグ・アンド・ドロップしま
す。
4. 「ソース」タブに切り替えて、ページ上方の他の dojo.require ステートメントがある付近に、次に示
す dojo.require() ステートメントを追加します。 dojo.require() ステートメントは、後ほど追加する
dijit.Tooltip ウィジェット用です。
dojo.require("dijit.Tooltip");
© 2010 IBM Corporation
- 55 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
5. 次に示す css スタイルのインポートを、dojo.require ステートメントの含まれる</script>タブの後に
追加します。
<style type="text/css">
@import "dojo/dojox/form/resources/Rating.css";
</style>
6. 次に示すコードを、addOnLoad 関数の含まれる</script> タグの後に追加します。
<script type="text/javascript">
function showComments(e){
var grid = dijit.byId("gridId");
var movieTitle =
grid.store.getValue(grid.getItem(e.rowIndex), "title");
var comments =
dijit.byId("RateAndComment").getCommentsByMovieTitle(movieTitle);
if(comments.length == 0){
dijit.showTooltip("No comments made!", e.cellNode);
}
else{
var list = "<b>Comments:</b><ul>";
for(i in comments){
list +="<li>" + comments[i] + "</li>";
}
list += "</ul>";
dijit.showTooltip( list , e.cellNode);
}
};
function hideComments(e){
dijit.hideTooltip(e.cellNode);
}
function showFeedbackDialog(e){
//IF A Click to rate!! cell was clicked
if(e.cellIndex == 4){
var grid = dijit.byId("gridId");
var movieTitle =
© 2010 IBM Corporation
- 56 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
grid.store.getValue(grid.getItem(e.rowIndex), "title");
var rcwidget = dijit.byId("RateAndComment");
rcwidget.showFeedbackTools(movieTitle);
}
}
function getContent(){
return "Click to rate!";
}
</script>
showComments 関数は、セル行の上にマウスを移動するたびに実行されます。該当する行のムービ
ー・タイトル、およびウィジェットの getCommentsByMovieTitle を使用することで、各ウィジェットでサブ
ミットされたコメントを取得し、コメントを dijit.showTooltip が表示するツールチップ内にリスト表示します。
hideComments 関数は、ユーザーがマウスを行の外に移動した時点でツールチップを非表示にします。
getContent 関 数 は 、 表 の 最 後 の 列 に デ ー タ を 入 れ る た め に 使 用 さ れ る ラ ベ ル を 戻 し ま す 。
showFeedbackDialog は「Click to Rate!」ラベルの付いているセルをユーザーがクリックするたびに実
行されます。この関数はカスタム・ウィジェットの showFeedbackTools を呼び出します。これにより、ユ
ーザーがムービーを評価したりコメントを付加したりするためのダイアログが表示されます。
7. 上記の関数をグリッドのイベント・ハンドラーに追加します。下記のように dojox.grid.DataGrid html
コードを編集します。
<table id="gridId" dojotype="dojox.grid.DataGrid" autowidth="true"
onRowMouseOut="hideComments" onRowMouseOver="showComments"
onCellClick="showFeedbackDialog" rowselector="20px">
8. 次に示す列をグリッドの最終行（<th field="description">説明</th>の次の行）に追加します。
getContent を使用して、その列に属する各セルにデータを取り込みます。
<th get="getContent">Rate and Comment!</th>
9. ページを保存します。ツール・バーの「保存」アイコンをクリックします。
ShowMovies.html は、下記のようになっているはずです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
© 2010 IBM Corporation
- 57 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
<link rel="stylesheet" type="text/css"
href="dojo/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css"
href="dojo/dijit/themes/tundra/tundra.css">
<title>ShowMovies</title>
<meta http-equiv="Content-Type" content="text/html;
charset=Windows-31J">
<script type="text/javascript"
djconfig="isDebug: false, parseOnLoad: true"
src="dojo/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("myDojo.RateAndComment");
dojo.require("dijit.Tooltip");
</script>
<style type="text/css">
@import "dojo/dojox/form/resources/Rating.css";
</style>
<script type="text/javascript">
dojo.addOnLoad(function() {
dojo.xhrGet({
url : "MovieList.json",
handleAs : "json",
load : function(response, ioArgs) {
var newData = {
identifier : "title",
items : response.result
};
var dataStore = new
dojo.data.ItemFileReadStore({
data : newData,
id : "dataStoreId"
});
© 2010 IBM Corporation
- 58 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
var grid = dijit.byId("gridId");
grid.setStore(dataStore);
},
error : function(response, ioArgs) {
alert("An error occurred while invoking the
service.");
}
});
});
</script>
<script type="text/javascript">
function showComments(e){
var grid = dijit.byId("gridId");
var movieTitle =
grid.store.getValue(grid.getItem(e.rowIndex), "title");
var comments =
dijit.byId("RateAndComment").getCommentsByMovieTitle(movieTitle);
if(comments.length == 0){
dijit.showTooltip("No comments made!", e.cellNode);
}
else{
var list = "<b>Comments:</b><ul>";
for(i in comments){
list +="<li>" + comments[i] + "</li>";
}
list += "</ul>";
dijit.showTooltip( list , e.cellNode);
}
};
function hideComments(e){
dijit.hideTooltip(e.cellNode);
}
function showFeedbackDialog(e){
© 2010 IBM Corporation
- 59 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
//IF A Click to rate!! cell was clicked
if(e.cellIndex == 4){
var grid = dijit.byId("gridId");
var movieTitle =
grid.store.getValue(grid.getItem(e.rowIndex), "title");
var rcwidget = dijit.byId("RateAndComment");
rcwidget.showFeedbackTools(movieTitle);
}
}
function getContent(){
return "Click to rate!";
}
</script>
<link rel="stylesheet" type="text/css" title="Style"
href="dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" title="Style"
href="dojo/dojox/grid/resources/tundraGrid.css">
</head>
<body class="tundra">
<div dojoType="dijit.layout.BorderContainer" id="BorderContainer"
design="headline" style="height: 100%; width: 100%">
<div dojoType="dijit.layout.ContentPane" region="top" style="text-align:
center">My Movie Web Application!</div>
<div dojoType="dijit.layout.ContentPane" id="" title="" region="center">
<table id="gridId" dojotype="dojox.grid.DataGrid" autowidth="true"
onRowMouseOut="hideComments" onRowMouseOver="showComments"
onCellClick="showFeedbackDialog" rowselector="20px">
<thead>
<tr>
<th field="title">タイトル</th>
<th field="director">監督</th>
<th field="actor">役者</th>
<th field="description">説明</th>
<th get="getContent">Rate and Comment!</th>
© 2010 IBM Corporation
- 60 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
</tr>
</thead>
</table>
</div>
<div dojoType="dijit.layout.ContentPane" id="" title="" region="right">
<div dojoType="myDojo.RateAndComment" id="RateAndComment"></div>
</div>
</div>
</body>
</html>
演習の
演習のチェックポイント
これで、カスタム Dojo ウィジェットをページに追加できまし
た。
まとめ
この演習では以下のことを学習しました。
パレットを使用して Web ページにカスタム・ウィジェット
を追加する方法
データ・グリッドのイベント・ハンドラーに関数を追加する
方法
© 2010 IBM Corporation
- 61 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
2.7
Dojo アプリケーション
アプリケーションの
ションのテスト
この演習では、Web UI 層まで作成した My Movie Web Application をサーバー上で実行し、プレビュ
ーを確認します。プレビューの確認には、AJAX テスト・サーバーという軽量サーバーを使用します。
1. ブラウザーを Firefox に設定します。メニュー・バーから、「ウィンドウ」 -> 「Web ブラウザー」 ->
「Firefox」を設定します。
注意！
注意！
Firefox がインストールされていない場合、Firefox が表示されません。
この場合、手動で設定を行う必要があります。手順は以下です。
1. Firefox をインストールします。
2. メニュー・バーより、「ウィンドウ」 -> 「設定」をクリックします。
3. 「一般」 -> 「Web ブラウザー」を選択します。
4. 「外部ブラウザーを使用」を選択し、「新規」をクリックします。
5. 「外部 Web ブラウザーの編集」ダイアログが表示されます。以下を設定の
上、「OK」をクリックします。
設定項目
設定値
名前
Firefox
ロケーション
（Firefox のインストール・ディレクトリー）¥firefox.exe
パラメーター
© 2010 IBM Corporation
- 62 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
6. 「適用」をクリックの上、「OK」をクリックします。
© 2010 IBM Corporation
- 63 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
2. 「エンタープライズ・エクスプローラー」ビューで ShowMovies.html を右クリックし、「実行」 > 「サ
ーバーで実行」を選択します。「サーバーで実行」ダイアログが開きます。
© 2010 IBM Corporation
- 64 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3. 「サーバーで実行」ダイアログで、以下を設定し、「次へ」をクリックします。
設定項目
設定値
サーバーの
サーバーの選択方法
手動で新規サーバーを定義
サーバーの
サーバーのタイプを
タイプを選択
IBM -> AJAX テスト・サーバー
サーバーの
サーバーのホスト名
ホスト名
localhost
サーバー名
サーバー名
localhost の AJAX テスト・サーバー
4. 「追加および削除」ダイアログで、「MyMovieWEB」が追加されていることを確認し、「終了」をクリック
します。
5. ブラウザーで ShowMovies.html が表示されます。
© 2010 IBM Corporation
- 65 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
6. 映画を評価します。DataGrid 内の任意の「Click to rate!」をクリックし、「Rate and Comment!」ダイ
アログを表示させます。
7. 評価、および、コメントを入力し、「Submit」をクリックします。
8. 評価、および、コメントが履歴に反映されたことを確認します。
9. プレビューを確認したら、AJAX テスト・サーバーを停止します。「サーバー」ビューから「サーバーを
停止」アイコンをクリックします。
演習の
演習のチェックポイント
これで Web2.0 アプリケーションをサーバーでテストすることが
できました。
まとめ
この演習では以下のことを学習しました。
Ajax テスト・サーバーで Dojo アプリケーションを実行す
る方法。
© 2010 IBM Corporation
- 66 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3
データ・
データ・アクセス層
アクセス層の作成
この演習では、My Movie Web Application のデータ・アクセス層を作成します。演習にはおおよそ 70
分を要します。
データ・アクセス層には、永続エンティティーとして、Movie および Feedback、そして、それぞれを管理
する MovieManager、FeedbackManager が必要です。これらの Manager を介して、My Movie Web
Application のビジネス・ロジック層は、永続化操作を行います。
3.1
JPA1.0, EJB3,0 プロジェクトの
プロジェクトの作成
まず、JPA プロジェクトを作成します。この演習では、上述した Manager を EJB として作成することにし
ます。そのため、EJB プロジェクトを作成の上、JPA ファセットを適用することにします。
1. パースペクティブを「Java EE」に変更します。ワークベンチ右上にある「パースペクティブを開く」か
ら、「Java EE」をクリックします。
2. メニュー・バーから、「ファイル」 -> 「新規」 -> 「EJB プロジェクト」をクリックします。
3. 「新規 EJB プロジェクト」ダイアログが開きます。以下の設定を行います。
設定項目
設定値
プロジェクト名
プロジェクト名
MyMovieJPA
デフォルト・
デフォルト・ロケーションの
ロケーションの使用
チェックを入れる
EJB モジュール・
モジュール・バージョン
3.0
EAR にプロジェクトを
プロジェクトを追加
チェックを入れる
EAR プロジェクト名
プロジェクト名
MyMovieEAR
4. JPA ファセットを有効にします。「構成」セクションの「変更」ボタンをクリックします。
© 2010 IBM Corporation
- 67 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
5. 「プロジェクト・ファセット」ダイアログが開きます。以下の設定を行い、「OK」をクリックします。
設定項目
設定値
プロジェクト・
プロジェクト・ファセット
JPA
バージョン
1.0
6. 「次へ」をクリックします。
© 2010 IBM Corporation
- 68 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
7. 「Java」ページでデフォルトを受け入れ、「次へ」をクリックします。
8. 「EJB モジュール」ページで、以下の設定を行い、「次へ」をクリックします。
設定項目
設定値
クライアントの
クライアントのインターフェースと
インターフェースとクラスを
クラスを保有する
保有する
チェックを外す
EJB クライアント JAR モジュールの
モジュールの作成
ejb-jar.xml デプロイメント記述子
デプロイメント記述子の
記述子の生成
© 2010 IBM Corporation
チェックを外す
- 69 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
9. 「JPA ファセット」ページでは、そのまま「終了」をクリックします。
演習の
演習のチェックポイント
JPA 1.0 対応の EJB プロジェクトを作成しました。
まとめ
この演習では以下のことを学習しました。
JPA1.0 対応の EJB プロジェクトの作成方法。
JPA アプリケーション開発用のプロジェクト・ファセットの
カスタマイズ方法。
© 2010 IBM Corporation
- 70 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3.2
JPA エンティティーの
エンティティーの作成
この演習では、永続エンティティーMovie と Feedback を作成します。Movie は映画を表すエンティティ
ーであり、Feedback は映画に対する評価およびコメントを表します。複数の Feedback が 1 つの Movie
に対して登録されます。すなわち、Feedback と Movie の間には Many-to-One の関係があります。クラ
ス図で表すと以下のようになります。
© 2010 IBM Corporation
- 71 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3.2.1
Movie エンティティーの
エンティティーの作成
1. エンタープライズ・エクスプローラーから、MyMovieJPA を右クリックし、「新規」 -> 「エンティティ
ー」をクリックします。
2. 「新規 JPA エンティティー」ダイアログが開きます。「エンティティー・クラス」ページで以下を入力し、
「次へ」をクリックします。
設定項目
設定値
Java パッケージ
com.ibm.example.websphere.jpa1sample.movie
クラス名
クラス名
Movie
© 2010 IBM Corporation
- 72 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3. 「エンティティー・プロパティー」ページが開きます。エンティティー・フィールドを追加するために、
「追加」をクリックします。
4. 以下を入力し、「OK」をクリックします。
設定項目
設定値
型
Integer
名前
id
5. 手順 3.-4.を繰り返し、以下のフィールドを追加します。
名前
タイプ
title
java.lang.String
actor
java.lang.String
director
java.lang.String
description
java.lang.String
6. エンティティー・フィールドの id を主キーにします。「エンティティー・フィールド」セクションの id 行の
「鍵」列にチェックを入れます。
© 2010 IBM Corporation
- 73 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
7. 「可視化のためクラス図を選択」ページでは、そのまま「終了」をクリックします。
MyMovieJPA プロジェクト配下にエンティティーや管理 Bean を可視化するためのクラス図が作成さ
れます。
Movie エンティティーが作成されると、自動で Movie.java が開きます。以降では、Movie のフィールド
「id」に対して、主キーを自動生成する設定を行います。この設定により、Movie エンティティーがデータ
ベースに create されるたび、id が自動で生成されます。
8. JPA パースペクティブに切り替えます。
9. Movie.java から、「@Id」アノテーションを選択し、「JPA の詳細」ビューから、以下の設定を行いま
す。
設定項目
設定値
主キー生成
キー生成
チェックを入れる
戦略
デフォルト（自動）
© 2010 IBM Corporation
- 74 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
「JPA の詳細」
詳細」ビュー
「JPA の詳細」ビューでは、JPA エンティティーのアノテーショ
ンを編集することができます。このビューを表示するには、メニ
ュー・バーから「ウィンドウ」 -> 「ビューの表示」 -> 「その他」
-> 「JPA」 -> 「JPA の詳細」をクリックします。
10. 「@GeneratedValue」アノテーションが追加されます。主キー生成戦略である「デフォルト（自動）」
は、以下のように、アノテーションの引数として明記することもできます。コンテンツ・アシストも有効で
す。
@Id
@GeneratedValue(strategy=GenerationType.AUTO)
private Integer id;
© 2010 IBM Corporation
- 75 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
11. Movie データをすべて取得するための照会を作成します。@Entity アノテーションを選択し、「JPA
の詳細」ビューを開きます。
12. 「照会」セクションを展開し、「追加」ボタンをクリックします。
13. 「照会の追加」ダイアログが表示されます。以下を設定し、「OK」をクリックします。
設定項目
設定値
名前
findAllMovies
タイプ
名前付き照会
14. 追加した照会に対して、JPQL を定義します。、「JPA の詳細」ビューから「照会」セクションを展開し、
照会欄に「SELECT m FROM Movie m 」と入力します。
© 2010 IBM Corporation
- 76 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
JPQL
JPQL (Java Persistence Query Language)は、JPA のクエリ
ー言語です。SQL ライクなクエリー言語により、JPA エンティテ
ィーの更新や照会を行うことができます。
15. 以下に示すコードが追加されていることを確認します。
@NamedQuery(name = "findAllMovies", query = "SELECT m FROM Movie m ")
© 2010 IBM Corporation
- 77 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3.2.2
Feedback エンティティーの
エンティティーの作成
3.2.1 と同様の手順で、Feedback エンティティーを作成します。
1. プロジェクト・エクスプローラーから、MyMovieJPA を右クリックし、「新規」 -> 「エンティティー」をク
リックします。
2. 「新規 JPA エンティティー」ダイアログが開きます。「エンティティー・クラス」ページで以下を入力し、
「次へ」をクリックします。
設定項目
設定値
Java パッケージ
com.ibm.example.websphere.jpa1sample.movie
クラス名
クラス名
Feedback
3. 「エンティティー・プロパティー」ページが開きます。以下のエンティティー・フィールドを追加します。
名前
タイプ
id
java.lang.Integer
rating
java.lang.Integer
comment
java.lang.String
4. エンティティー・フィールドの id を主キーにします。「エンティティー・フィールド」セクションの id 行の
「鍵」列にチェックを入れます。
© 2010 IBM Corporation
- 78 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
5. 「可視化のためクラス図を選択」ページでは、そのまま「終了」をクリックします。
Feedback エンティティーが作成されると、自動で Feedback.java が開きます。以降では、Feedback の
フィールド「id」に対して、主キーを自動生成する設定を行います。
6. Feecback.java の「@Id」アノテーションの後に以下のコードをコピーします。
@GeneratedValue(strategy=GenerationType.AUTO)
© 2010 IBM Corporation
- 79 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3.2.3
エンティティー間
エンティティー間の関連作成
Feedback と Movie の間に Many-to-One の関係を定義します。
1. Movie および Feedback 作成時に classdiagram.dnx が開かれています。閉じてしまった場合、「エ
ン タ ー プ ラ イ ズ ・ エ ク ス プ ロ ー ラ ー 」 ビ ュ ー か ら 、 「 MyMovieJPA 」 -> 「 ダ イ ア グ ラ ム 」 ->
「classdiagram.dnx」を右クリックし、「アプリケーションから開く」 -> 「Rational DNX ダイアグラム・
エディター」をクリックします。
2. Feedback クラスを選択し、関連線を引くための矢印マークを表示させます。
© 2010 IBM Corporation
- 80 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3. Feedback からの矢印をドラッグし、Movie クラスでドロップします。
4. ポップアップ・メニューが表示されます。「0..*:0..1 有向関係の作成」をクリックします。
© 2010 IBM Corporation
- 81 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
5. 多対一の有向関係線が引かれたことを確認します。
6. 関係線を引いたことにより、リレーションシップが定義されます。Feedback.java を開き、以下のコー
ドが追加されていることを確認します。
@ManyToOne
private Movie movie;
7. カスケード・オプションを設定します。「@ManyToOne」アノテーションを選択し、「JPA の詳細」ビュ
ーから、カスケード・オプションにて、該当する操作を選択します。この演習では、「すべて」にチェッ
クを入れます。
© 2010 IBM Corporation
- 82 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
この設定により、「@ManyToOne」アノテーションに以下の引数が追加されます。
@ManyToOne(cascade = ALL)
カスケード
エンティティー間でリレーションシップがある場合、エンティテ
ィーに対して行われた操作を関連するエンティティーに反映
させるかどうかをカスケード・オプションにより指定します。以
下にオプションを示します。
すべて(ALL)：すべての操作を反映させます。
保持(PERSIST)：永続化操作を反映させます。
マージ(MERGE)：Detached エンティティーに対する変
更を永続化する操作を反映させます。なお、Detached
エンティティーとは、EntityManager の管理下から離れ
たエンティティーを指します。
削除(REMOVE)：削除操作を反映させます。
更新(REFRESH)：Attached エンティティーに対する変
更を永続化する操作を反映させます。なお、Attached エ
ンティティーとは、EntityManager の管理下にあるエンテ
ィティーを指します。
© 2010 IBM Corporation
- 83 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
8. Movie と Feedback の結合を設定します。「@ManyToOne」アノテーションを選択し、「JPA の詳細」
ビューから、「デフォルト値のオーバーライド」にチェックを入れます。
この設定により、「@JoinColumn」アノテーションが追加されます。
@JoinColumn(name = "movie_id", referencedColumnName = "id")
private Movie movie;
9. Feedback データを取得するための照会を作成します。「JPA の詳細」ビューから、以下の 2 つの照
会を作成します。
findRecentFeedbacks
Feedback データのすべてを新しい順で取得します。
設定項目
設定値
名前
findRecentFeedbacks
タイプ
名前付き照会
照会
SELECT f FROM Feedback f ORDER BY f.id DESC
findByMovieId
Movie に対する Feedback データすべてを取得します。
設定項目
設定値
名前
findByMovieId
タイプ
名前付き照会
照会
SELECT f FROM Feedback f WHERE f.movie.id = :movieId
© 2010 IBM Corporation
- 84 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
10. classdiagram.dnx および Feedback.java を保存します。
ここまでで、Movie.java、および、Feedback.java は以下のようになっているはずです。
Movie.java
package com.ibm.example.websphere.jpa1sample.movie;
import java.io.Serializable;
import java.lang.Integer;
import java.lang.String;
import javax.persistence.*;
/**
* Entity implementation class for Entity: Movie
*
*/
@Entity
@NamedQuery(name = "findAllMovies", query = "SELECT m FROM Movie m ")
public class Movie implements Serializable {
@Id
@GeneratedValue(strategy=GenerationType.AUTO)
private Integer id;
private String title;
private String actor;
private String director;
private String description;
private static final long serialVersionUID = 1L;
public Movie() {
super();
}
© 2010 IBM Corporation
- 85 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
public Integer getId() {
return this.id;
}
public void setId(Integer id) {
this.id = id;
}
public String getTitle() {
return this.title;
}
public void setTitle(String title) {
this.title = title;
}
public String getActor() {
return this.actor;
}
public void setActor(String actor) {
this.actor = actor;
}
public String getDirector() {
return this.director;
}
public void setDirector(String director) {
this.director = director;
}
public String getDescription() {
return this.description;
}
public void setDescription(String description) {
this.description = description;
}
© 2010 IBM Corporation
- 86 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
}
Feedback.java
package com.ibm.example.websphere.jpa1sample.movie;
import java.io.Serializable;
import java.lang.Integer;
import java.lang.String;
import javax.persistence.*;
import javax.persistence.ManyToOne;
import static javax.persistence.CascadeType.ALL;
/**
* Entity implementation class for Entity: Feedback
*
*/
@Entity
@NamedQueries({
@NamedQuery(name = "findRecentFeedbacks", query = "SELECT f FROM
Feedback f ORDER BY f.id DESC"),
@NamedQuery(name = "findByMovieId", query = "SELECT f FROM Feedback
f WHERE f.movie.id = :movieId")
})
public class Feedback implements Serializable {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Integer id;
private Integer rating;
private String comment;
private static final long serialVersionUID = 1L;
@ManyToOne(cascade = ALL)
@JoinColumn(name = "movie_id", referencedColumnName = "id")
private Movie movie;
© 2010 IBM Corporation
- 87 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
public Feedback() {
super();
}
public Integer getId() {
return this.id;
}
public void setId(Integer id) {
this.id = id;
}
public Integer getRating() {
return this.rating;
}
public void setRating(Integer rating) {
this.rating = rating;
}
public String getComment() {
return this.comment;
}
public void setComment(String comment) {
this.comment = comment;
}
/**
* @return movie
*/
public Movie getMovie() {
return movie;
}
/**
* @param movie the movie to set
*/
public void setMovie(Movie movie) {
this.movie = movie;
}
© 2010 IBM Corporation
- 88 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
}
演習の
演習のチェックポイント
JPA 1.0 対応の JPA エンティティーを作成しました。
まとめ
この演習では以下のことを学習しました。
© 2010 IBM Corporation
JPA エンティティーの作成方法。
JPA エンティティーの主キーを自動生成する方法。
JPA エンティティーの照会の定義方法。
JPA エンティティー間のリレーションシップの定義方法。
JPA エンティティー間のカスケードの定義方法。
JPA エンティティー間の結合の定義方法。
- 89 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
JPA エンティティーから
エンティティーからテーブル
からテーブルの
テーブルの作成
3.3
この演習では、作成した JPA エンティティーからデータベースのテーブルを生成する手順を示します。
テーブルを生成するには、データベース、および、データベースへの接続情報が必要です。
3.3.1.では、データベース、および、データベース接続を作成する手順を示します。
3.3.2.では、作成したデータベース接続を使用して、データベースにテーブルを生成します。
また、作成したデータベース、および、テーブルに接続情報を、My Movie Web Application のデプロイ
先である WAS 上からも使用できるようにするには、プロジェクトのデプロイメント情報を構成する必要が
あります。3.3.3 では、デプロイメントの構成手順を示します。
3.3.1
データベース接続
データベース接続の
接続の作成
1. 「データ・ソース・エクスプローラー」ビューから、「データベース接続」を右クリックし、「新規」をクリッ
クします。
© 2010 IBM Corporation
- 90 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
2. 「新規接続」ダイアログが開きます。以下を設定し、残りの項目はデフォルト設定を受け入れ、「終
了」をクリックします。
設定項目
設定値
データベース・
データベース ・ マネージャーの
マネージャー の 選
Derby
択
JDBC ドライバー
Derby 10.2 – 組み込み JDBC ドライバーデフォルト
3. 「データ・ソース・エクスプローラー」の「データベース接続」内に、新規に定義した接続が存在するこ
とを確認します。
© 2010 IBM Corporation
- 91 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3.3.2
テーブルの
テーブルの生成
3.3.1.で作成したデータベース、および、データベース接続を使用して、データベースにテーブルを作
成します。
1. MyMovieJPA プロジェクトを右クリックし、「JPA ツール」 -> 「エンティティーからテーブルを生成」を
クリックします。
2. 「DDL の生成」ダイアログが開きます。以下の設定を行い、「終了」をクリックします。
設定項目
設定値
DDL ファイルを
ファイルを生成する
生成するデータベース
するデータベース・
データベース・ベンダーを
ベンダーを選択
チェックを入れる
ベンダー
Derby
© 2010 IBM Corporation
- 92 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3. Table.ddl が生成され、SQL ファイル・エディター上に開かれます。なお、ddl ファイルが生成された
フォルダーは、「MyMovieJPA」 -> 「ejbModule」 -> 「META-INF」です。
4. Table.ddl の接続プロファイルを変更します。「接続プロファイル」セクションで 3.3.1.で作成したデー
タベース接続を指定します。以下の設定を行い、保存します。
設定項目
設定値
タイプ
Derby_10.x
名前
MyDB
データベース
MyDB
© 2010 IBM Corporation
- 93 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
5. SQL ファイル・エディター内を右クリックし、「すべて実行」をクリックします。
6. 「SQL の結果」ビューが開きます。テーブル生成が成功したことを確認します。
7. データベース接続を切断します。「データ・ソース・エクスプローラー」ビューから、「データベース接
続」 -> 「MyDB」を右クリックし、「接続」をクリックします。
© 2010 IBM Corporation
- 94 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3.3.3
JDBC デプロイメントの
デプロイメントのプロジェクト構成
プロジェクト構成
この演習では、RAD 上で作成した開発時用のデータベース接続を、WAS 上からも使用できるようにす
るため、アプリケーションのデプロイメント情報を構成します。
1. 「プロジェクト・エクスプローラー」から、「MyMovieJPA」を右クリックし、「JPA ツール」 -> 「JDBC デ
プロイメントのプロジェクト構成」をクリックします。
© 2010 IBM Corporation
- 95 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
2. 「デプロイメントのための接続のセットアップ」ダイアログが開きます。デフォルトの設定を受け入れ、
「OK」をクリックします。
注意！
注意！
通常であれば、ここまでの手順で 3.3.1.で作成したデータベース接続を使用して、
WAS ランタイム上からデータベース・アクセスすることができます。
しかし、本資料で使用している RAD V8.0 と WAS V7.0 とでは、使用している Derby
ランタイムの・ライブラリのバージョンが異なり、このままでは動作いたしません。
以降の手順では、実行環境においても開発環境で使用している Derby のライブラリー
を参照させる設定を行います。なお、この設定には WebSphere Application Server
の WebSphere 変数を変更します。
なお、具体的なバージョンは以下のようになっています。
環境
Derby のバージョン
開発環境（
）
開発環境（RAD V8.0）
10.5
実行環境（
）
実行環境（WAS V7.0）
10.2
3. WAS を起動します。「サーバー」ビューから、「localhost の WebSphere Application Server v7.0」
を選択し、「サーバーを始動」アイコンをクリックします。
© 2010 IBM Corporation
- 96 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
4. サーバーが始動済みになったら、「localhost の WebSphere Application Server v7.0」を右クリック
し、「管理」 -> 「管理コンソールの実行」をクリックします。
5. 管理コンソールのようこそ画面が開きます。左側セクションから、「環境」 -> 「WebSphere 変数」を
クリックします。
© 2010 IBM Corporation
- 97 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
6. 「WebSphere 変数」画面のリソース一覧から、「DERBY_JDBC_DRIVER_PATH」をクリックしま
す。
7. 「一般プロパティー」の値欄に RAD V8.0 が使用する derby.jar へのパス（注）を指定します。
© 2010 IBM Corporation
- 98 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
注意！
注意！
RAD V8.0 が使用している derby.jar へのパスは、Installation Manager をデフォルトのディレ
クトリーにインストールした場合のパスになります。
デフォルトのインストール・ディレクトリーにインストールした場合は以下になります。
C:¥Program
Files¥IBM¥SDPShared¥plugins¥org.apache.derby.core_10.5.1.1_v20100129¥derby.jar
異なるディレクトリーにインストールした場合は、Installation Manager のインストール・ディレク
トリーの 1 階層上に SDPShared ディレクトリーを見つけることができます。
8. ローカル構成を保存します。「保存」リンクをクリックします。
9. WAS を停止します。「サーバー」ビューから、「localhost の WebSphere Application Server v7.0」
を選択し、「サーバーを停止」アイコンをクリックします。
演習の
演習のチェックポイント
新規に作成したデータベース接続を使用して、JPA エンティ
ティーからテーブルを生成しました。また、作成したデータベ
ース接続を WAS 上から使用できるようにプロジェクトのデプロ
イメント情報を構成しました。
まとめ
この演習では以下のことを学習しました。
© 2010 IBM Corporation
データベース接続の作成方法。
JPA エンティティーからテーブルの生成方法。
- 99 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
JPA マネージャーBean
の作成
マネージャー
3.4
この演習では、3.2 で作成したエンティティーを管理するマネージャーBean を作成します。マネージャ
ーBean は Movie、および、Feedback エンティティーそれぞれに対して作成します。なお、マネージャ
ーBean の実装としては、セッション Bean を採用することにします。
3.4.1
セッション Bean の作成
1. まず、Movie エンティティーを管理する MovieManager を作成します。「プロジェクト・エクスプローラ
ー」から、「MyMovieJPA」を右クリックし、「新規」 -> 「セッション Bean (EJB 3.x)」をクリックします。
2. 「EJB 3.x セッション Bean の作成」ダイアログが開きます。以下を設定し、残りの設定項目はデフォ
ルトのままで、「次へ」をクリックします。
設定項目
設定値
Java パッケージ
com.ibm.example.websphere.jpa1sample.movie
クラス名
クラス名
MovieManager
© 2010 IBM Corporation
- 100 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3. 次のセッション Bean の特定情報を入力するページでは、そのまま、「次へ」をクリックします。
4. 「可視化のためクラス図を選択」ページでは、デフォルトのまま、「終了」をクリックします。
5. 次に、手順 1.-4.を繰り返し、Feedback エンティティーを管理する FeedbackManager を作成しま
す。なお、手順 2.での設定値は以下とします。
設定項目
設定値
Java パッケージ
com.ibm.example.websphere.jpa1sample.movie
クラス名
クラス名
FeedbackManager
ここまでで、classdiagram.dnx には MovieManager および FeedbackManager が含まれているはずで
す。
© 2010 IBM Corporation
- 101 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3.4.2
JPA 管理メソッド
管理メソッドの
メソッドの EJB への追加
への追加
生成された classdiagram.dnx を使用して、MovieManager および FeedbackManager に JPA 管理メ
ソッドを追加します。
1. classdiagram.dnx を開きます。
2. 「MovieManager」クラスを右クリックし、「EJB3.0 を追加」 -> 「JPA 管理メソッド」をクリックします。
3. 「JPA マネージャーBean ウィザード」が開きます。「使用可能な JPA エンティティー」から Movie に
チェックを入れ、「終了」をクリックします。
© 2010 IBM Corporation
- 102 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
4. classdiagram.dnx にて、「MovieManager」クラスに JPA 管理メソッドが追加されたことを確認しま
す。
JPA 管理メソッド
管理メソッド
JPA 管理メソッドとして以下が生成されます。
管 理 対 象 エ ン テ ィ テ ィ ー の CRUD メ ソ ッ ド
(Create,Read,Update,Delete)
エンティティーに定義された NamedQuery を実行
するメソッド
5. findMovieById メソッドによって取得した Movie を他の PersistenceContext から使用できるように、
EntityManager の clear メソッドを使用します。MovieManager.java の findMovieById メソッドを以
下に置き換えてください。
@Action(Action.ACTION_TYPE.FIND)
public Movie findMovieById(Integer id) {
Movie movie = null;
EntityManager em = getEntityManager();
try {
movie = (Movie) em.find(Movie.class, id);
em.clear();
} finally {
em.close();
}
return movie;
}
© 2010 IBM Corporation
- 103 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
EntityManager clear メソッド
PersistenceContext(EntityManager が管理する JPA エンテ
ィティーの集合)をクリアし、すべてのエンティティーを detach
します。Detach されたエンティティーは、他の EntityManager
の PersistenceContext の管理対象となることができます。
今回の例で は、 取得し た Movie イ ンスタン スを、後 述の
FeedbackManager が Feedback データを登録する際に使
用するので、Movie インスタンスを detach しました。
6. 手順 1.-3.と同様に FeedbackManager の管理メソッドを追加します。
なお、「JPA マネージャーBean ウィザード」での「使用可能な JPA エンティティー」には、Feedback
エンティティーにチェックをしてください。
© 2010 IBM Corporation
- 104 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
7. classdiagram.dnx にて、「FeedbackManager」クラスに JPA 管理メソッドが追加されたことを確認し
ます。
8. NamedQuery により生成された findRecentFeedbacks メソッドを変更し、与えられた引数の数だけ
照会結果を返すようにします。FeedbackManager.java を開きます。
9. findRecentFeedbacks メソッドを以下のコードに置き換えます（下線は変更点を示します）。
@NamedQueryTarget("findRecentFeedbacks")
public List<Feedback> findRecentFeedbacks(int maxCount) {
EntityManager em = getEntityManager();
List<Feedback> results = null;
try {
Query query = em.createNamedQuery("findRecentFeedbacks");
query.setMaxResults(maxCount);
results = (List<Feedback>) query.getResultList();
} finally {
em.close();
}
return results;
}
10. classdiagram.dnx, MovieManager.java, FeedbackManager.java を保存します。
© 2010 IBM Corporation
- 105 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3.4.3
JPA 管理メソッド
管理メソッドの
メソッドのプロモート
3.4.2.では、MovieManager および FeedbackManager に JPA 管理メソッドを追加しました。
この演習では、JPA 管理ソッドをセッション Bean のビジネス・インターフェース MovieManagerLocal お
よび FeedbackManagerLocal に反映させます。反映させるには Java EE ツールの「メソッドのプロモー
ト」を使用します。
1. 「 プ ロ ジ ェ ク ト ・ エ ク ス プ ロ ー ラ ー 」 ビ ュ ー か ら 、 「 MyMovieJPA 」 -> 「 ejbModule 」 ->
「com.ibm.sample.websphere.jpa1sample.movie」 -> 「MovieManager」を右クリックし、「Java
EE ツール」 -> 「メソッドのプロモート」をクリックします。
© 2010 IBM Corporation
- 106 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
2. 「メソッドのプロモート」ダイアログが開きます。すべての public メソッドを選択し、「OK」をクリックしま
す。
3. MovieManagerLocal.java を開き、メソッドがプロモートされていることを確認します。
4. 手順 1.-3.と同様の手順で、FeedbackManager の JPA 管理メソッドを FeedbackManagerLocal
にプロモートします。
ここまでで、JPA マネージャーBean はそれぞれ以下のようになっているはずです。
MovieManagerLocal.java
package com.ibm.example.websphere.jpa1sample.movie;
import java.util.List;
import javax.ejb.Local;
@Local
© 2010 IBM Corporation
- 107 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
public interface MovieManagerLocal {
String createMovie(Movie movie) throws Exception;
String deleteMovie(Movie movie) throws Exception;
String updateMovie(Movie movie) throws Exception;
Movie findMovieById(Integer id);
Movie getNewMovie();
List<Movie> findAllMovies();
}
MovieManager.java
package com.ibm.example.websphere.jpa1sample.movie;
import javax.ejb.Stateless;
import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import com.ibm.jpa.web.NamedQueryTarget;
import com.ibm.jpa.web.Action;
import javax.persistence.PersistenceUnit;
import com.ibm.example.websphere.jpa1sample.movie.Movie;
import java.util.List;
import javax.persistence.Query;
/**
* Session Bean implementation class MovieManager
*/
@Stateless
public class MovieManager implements MovieManagerLocal {
@PersistenceUnit
private EntityManagerFactory emf;
© 2010 IBM Corporation
- 108 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
/**
* Default constructor.
*/
public MovieManager() {
// TODO Auto-generated constructor stub
}
private EntityManager getEntityManager() {
return emf.createEntityManager();
}
@Action(Action.ACTION_TYPE.CREATE)
public String createMovie(Movie movie) throws Exception {
EntityManager em = getEntityManager();
try {
em.persist(movie);
} finally {
em.close();
}
return "";
}
@Action(Action.ACTION_TYPE.DELETE)
public String deleteMovie(Movie movie) throws Exception {
EntityManager em = getEntityManager();
try {
movie = em.merge(movie);
em.remove(movie);
} finally {
em.close();
}
return "";
}
@Action(Action.ACTION_TYPE.UPDATE)
© 2010 IBM Corporation
- 109 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
public String updateMovie(Movie movie) throws Exception {
EntityManager em = getEntityManager();
try {
movie = em.merge(movie);
} finally {
em.close();
}
return "";
}
@Action(Action.ACTION_TYPE.FIND)
public Movie findMovieById(Integer id) {
Movie movie = null;
EntityManager em = getEntityManager();
try {
movie = (Movie) em.find(Movie.class, id);
em.clear();
} finally {
em.close();
}
return movie;
}
@Action(Action.ACTION_TYPE.NEW)
public Movie getNewMovie() {
Movie movie = new Movie();
return movie;
}
@NamedQueryTarget("findAllMovies")
public List<Movie> findAllMovies() {
EntityManager em = getEntityManager();
List<Movie> results = null;
try {
© 2010 IBM Corporation
- 110 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
Query query = em.createNamedQuery("findAllMovies");
results = (List<Movie>) query.getResultList();
} finally {
em.close();
}
return results;
}
}
FeedbackManagerLocal.java
package com.ibm.example.websphere.jpa1sample.movie;
import java.util.List;
import javax.ejb.Local;
@Local
public interface FeedbackManagerLocal {
public List<Feedback> findByMovieId(Object movieId);
public List<Feedback> findRecentFeedbacks(int maxCount);
public Feedback getNewFeedback();
public Feedback findFeedbackById(Integer id);
public String updateFeedback(Feedback feedback) throws Exception;
public String deleteFeedback(Feedback feedback) throws Exception;
public String createFeedback(Feedback feedback) throws Exception;
}
FeedbackManager.java
© 2010 IBM Corporation
- 111 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
package com.ibm.example.websphere.jpa1sample.movie;
import javax.ejb.Stateless;
import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import com.ibm.jpa.web.NamedQueryTarget;
import com.ibm.jpa.web.Action;
import javax.persistence.PersistenceUnit;
import com.ibm.example.websphere.jpa1sample.movie.Feedback;
import java.util.List;
import javax.persistence.Query;
/**
* Session Bean implementation class FeedbackManager
*/
@Stateless
public class FeedbackManager implements FeedbackManagerLocal {
@PersistenceUnit
private EntityManagerFactory emf;
/**
* Default constructor.
*/
public FeedbackManager() {
// TODO Auto-generated constructor stub
}
private EntityManager getEntityManager() {
return emf.createEntityManager();
}
@Override
@Action(Action.ACTION_TYPE.CREATE)
public String createFeedback(Feedback feedback) throws Exception
{
© 2010 IBM Corporation
- 112 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
EntityManager em = getEntityManager();
try {
em.persist(feedback);
} finally {
em.close();
}
return "";
}
@Override
@Action(Action.ACTION_TYPE.DELETE)
public String deleteFeedback(Feedback feedback) throws Exception
{
EntityManager em = getEntityManager();
try {
feedback = em.merge(feedback);
em.remove(feedback);
} finally {
em.close();
}
return "";
}
@Override
@Action(Action.ACTION_TYPE.UPDATE)
public String updateFeedback(Feedback feedback) throws Exception
{
EntityManager em = getEntityManager();
try {
feedback = em.merge(feedback);
} finally {
em.close();
}
return "";
}
© 2010 IBM Corporation
- 113 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
@Override
@Action(Action.ACTION_TYPE.FIND)
public Feedback findFeedbackById(Integer id) {
Feedback feedback = null;
EntityManager em = getEntityManager();
try {
feedback = (Feedback) em.find(Feedback.class, id);
} finally {
em.close();
}
return feedback;
}
@Override
@Action(Action.ACTION_TYPE.NEW)
public Feedback getNewFeedback() {
Feedback feedback = new Feedback();
return feedback;
}
@Override
@NamedQueryTarget("findRecentFeedbacks")
public List<Feedback> findRecentFeedbacks(int maxCount) {
EntityManager em = getEntityManager();
List<Feedback> results = null;
try {
Query query =
em.createNamedQuery("findRecentFeedbacks");
query.setMaxResults(maxCount);
results = (List<Feedback>) query.getResultList();
} finally {
em.close();
}
return results;
© 2010 IBM Corporation
- 114 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
}
@Override
@NamedQueryTarget("findByMovieId")
public List<Feedback> findByMovieId(Object movieId) {
EntityManager em = getEntityManager();
List<Feedback> results = null;
try {
Query query = em.createNamedQuery("findByMovieId");
query.setParameter("movieId", movieId);
results = (List<Feedback>) query.getResultList();
} finally {
em.close();
}
return results;
}
}
EntityManager
EntityManager は Persistence Entity のインスタンス、およ
び、ライフサイクルを管理します。Persistence Entity への操
作 は EntityManager を 介 し て 行 わ れ ま す 。 な お 、
EntityManager には以下の 2 種類があります。
container-managed Entity Manager
EntityManager のライフサイクルが J2EE コンテナーによって
管理されます。一般的に、Web コンテナーや EJB コンテナー
上で利用されます。
application-managed Entity Manager
EntityManager のライフサイクルがアプリケーションによって
管理されます。Java SE 環境や Java EE アプリケーション・ク
ライアント環境では、application-managed Entity Manager
しかサポートされていません。
© 2010 IBM Corporation
- 115 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
＠PersistentUnit アノテーション
EntityManager は、EntityManagerFactory を介して生成さ
れ ま す 。 container-managed Entity Manager の 場 合 、
EntityManagerFactory
は 必 要 あ り ま せ ん が 、
application-managed Entity Manager の場合は、明示的に
EntityManagerFactory を 利 用 し 、 EntityManager や
PersistenceContext のライフサイクルを管理しなくてはなりま
せん。なお、PersistenceContext とは Persistence Entity の
集合を指します。
Java EE 環境の場合、@PersistentUnit アノテーションを使
用することで、EntityManagerFactory に対して依存性の注入
が行われます。
演習の
演習のチェックポイント
セッション Bean を作成し、JPA 管理メソッドを追加しました。ま
た、生成されたメソッドをビジネス・インターフェースにプロモ
ートしました。これでデータ・アクセス層が完成しました。
まとめ
この演習では以下のことを学習しました。
JPA 管理メソッドの追加方法。
セッション Bean のメソッドをビジネス・インターフェースに
プロモートする方法。
© 2010 IBM Corporation
- 116 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3.5
データ・
データ・アクセス層
クセス層の動作確認
この演習では、MyMovieJPA の簡単な動作確認を行います。
3.5.1 では Universal Test Client を使用して、MovieManagerLocal の管理メソッドにアクセスし、JPA
エンティティーである Movie の登録を行います。
3.5.2.では、3.5.1 で登録した Movie データが永続化されていることを、「JPA」パースペクティブの「デー
タ・ソース・エクスプローラー」ビューを使用して確認します。
なお、My Movie Web Application に関しては、Universal Test Client と「データ・ソース・エクスプローラ
ー」ビューのいずれを使用しても、データに対する CRUD 操作が可能です。
Universal Test Client
サーバー・ツールには、Web をベースにした Universal Test
Client が用意されており、これを使用することでローカルまた
はリモートのサーバー上で実行中のエンタープライズ Bean
および、その他の Java オブジェクトのメソッドをテストすること
ができます。
「データ・
データ・ソース・
ソース・エクスプローラー
エクスプローラー」ビュー
データベースに接続し、テーブルやビューを介してデータに
アクセスすることができます。データベース接続後は、データ
に対する CRUD 操作や、データのインポート(ロード)、エクス
ポート(抽出)など、データに関するさまざまな操作を行うことが
できます。
© 2010 IBM Corporation
- 117 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3.5.1
Universal Test Client を使用した
使用したデータ
したデータの
データの追加
1. 「Java EE」パースペクティブに切り替えます。
2. 「サーバー」ビューから、「localhost の WebSphere Application Server v7.0」を右クリックし、「追加
および削除」をクリックします。
3. 「追加および削除」ダイアログが表示されます。「MyMovieEAR」を選択し、「追加」ボタンをクリックし
ます。
4. 「終了」をクリックします。
5. 「localhost の WebSphere Application Server v7.0」を選択し、「サーバーを始動」アイコンをクリッ
クします。
© 2010 IBM Corporation
- 118 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
6. サーバーが始動したら、「localhost の WebSphere Application Server v7.0」を右クリックし、
「Universal Test Client」 -> 「実行」をクリックします。
7. Universal Test Client がブラウザー上に表示されます。
© 2010 IBM Corporation
- 119 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
8. 「JNDI エクスプローラー」をクリックします。
9. 「 JNDI
エ ク ス プ ロ ー ラ ー 」 か ら 、 [ ロ ー カ ル
EJB
Bean]
->
「com.ibm.example.websphere.jpa1sample.movie.MovieManagerLocal」をクリックします。
10. MovieManagerLocal が提供するメソッドの内、createMovie を選択します。「EJB Beans」 ->
「MovieManagerLocal」 -> 「MovieManagerLocal」 -> 「String createMovie(Movie)」をクリック
します。
11. 「パラメーター」セクションに Movie の役者、説明、監督、タイトルを入力します。
12. Movie の id は、セレクト・ボックスから「null(Integer)」を選択します。
© 2010 IBM Corporation
- 120 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
13. 「起動」をクリックします。
14. 結果のセクションでエラー・メッセージが表示されていないことを確認します。
15. 同様の手順で他の Movie データも登録します。
16. Movie データの登録が済んだら、サーバーを停止させます。「サーバー」ビューから、「localhost の
WebSphere Application Server v7.0」を選択し、「サーバーを停止」アイコンをクリックします。
© 2010 IBM Corporation
- 121 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3.5.2
データ・
データ・ソース・
ソース・エクスプローラー・
エクスプローラー・ビューを
ビューを使用した
使用したデータ
したデータの
データの確認
1. 「JPA」パースペクティブに切り替えます。
2. 「データ・ソース・エクスプローラー」ビューから、「データベース接続」 -> 「MyDB」を右クリックし、
「接続」をクリックします。
3. MyDB が展開され、データベース接続に成功したことを確認します。
注意！
注意！
WebSphere Application Server V7.0 が停止していないとデータベース接続に成功
しません。
4. 「MyDB」 -> 「MyDB」 -> 「スキーマ」 -> 「APP」 -> 「テーブル」 -> 「Movie」を右クリックし、
「データ」 -> 「すべての行を戻す」をクリックします。
© 2010 IBM Corporation
- 122 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
「データ」
データ」に対するオプション
するオプション
データのに対する操作のオプションとして、以下があります。
すべての行を戻す
テーブルやビュー内のすべての行を確認します。
編集
行の追加、更新、削除を行います。
ロード
入力ファイルから行情報をインポートします。
抽出
出力ファイルへ行情報をエクスポートします。
サンプル・コンテンツ
表内の行のサンプルを確認します。サンプルで確認できる結果セットは、「SQL
の結果ビューのオプション」設定により変更できます。
5. Universal Test Client から登録したデータを確認します。
6. データベース接続を切断します。「データ・ソース・エクスプローラー」ビューから、「データベース接
© 2010 IBM Corporation
- 123 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
続」 -> 「MyDB」を右クリックし、「切断」をクリックします。
注意！
注意！
データベー ス接続 を切断 し ないと、後 続のステッ プ で WebSphere Application
Servre V7.0 を始動する際に失敗します。
演習の
演習のチェックポイント
Universal Test Client を使用し、JPA 管理メソッドおよび JPA
エンティティーBean の動作を確認しました。また、「データ・ソ
ース・エクスプローラー」ビューを使用して、データが永続化さ
れていることを確認しました。
まとめ
この演習では以下のことを学習しました。
Universal Test Client の起動および利用方法。
「データ・ソース・エクスプローラー」ビューを使用したデ
ータベース接続方法およびデータ・アクセス方法。
© 2010 IBM Corporation
- 124 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
ビジネス・
ビジネス・ロジック層
ロジック層の作成
4
この演習では、My Movie Web Application のビジネス・ロジック層を作成します。演習にはおおよそ 20
分を要します。
ビジネス・ロジック層では以下のサービスを提供します。
・
映画一覧の取得サービス
・
フィードバックの投稿サービス
・
最近投稿されたフィードバック一覧の取得サービス
・
映画に対するフィードバック・サマリー（フィードバック一覧と評価の平均点）の取得サービス
4.1
EJB3.0 プロジェクトの
プロジェクトの作成
演習 3.1 での手順と同様に、EJB プロジェクトを作成します。なお、JPA1.0 ファセットの適用は必要あり
ません。
1. パースペクティブを「Java EE」に切り替えます。
2. メニュー・バーから、「ファイル」 -> 「新規」 -> 「EJB プロジェクト」をクリックします。
3. 「新規 EJB プロジェクト」ダイアログが開きます。以下の設定を行います。
設定項目
設定値
プロジェクト名
プロジェクト名
MyMovieEJB
デフォルト・
デフォルト・ロケーションの
ロケーションの使用
チェックを入れる
EJB モジュール・
モジュール・バージョン
3.0
EAR にプロジェクトを
プロジェクトを追加
チェックを入れる
EAR プロジェクト名
プロジェクト名
MyMovieEAR
© 2010 IBM Corporation
- 125 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
4. 「次へ」をクリックします。
5. 「Java」ページでデフォルトを受け入れ、「次へ」をクリックします。
6. 「EJB モジュール」ページで、以下の設定を行い、「終了」をクリックします。
設定項目
設定値
クライアントの
クライアントのインターフェースと
インターフェースとクラスを
クラスを保有する
保有する
チェックを外す
EJB クライアント JAR モジュールの
モジュールの作成
ejb-jar.xml デプロイメント記述子
デプロイメント記述子の
記述子の生成
© 2010 IBM Corporation
チェックを外す
- 126 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
7. 「エンタープライズ・エクスプローラー」ビューより、MyMovieEJB プロジェクトが作成されていることを
確認します。
演習の
演習のチェックポイント
EJB 3.0 対応の EJB プロジェクトを作成しました。
© 2010 IBM Corporation
- 127 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
ビジネス・
ビジネス・モデルの
モデルの作成
4.2
ビジネス・モデル「FeedbackSummary」を作成します。FeedbackSummary は、Movie と Movie に対す
る Feedback のリストを保持し、また、評価の平均を算出するビジネス・モデルです。
ビジネス・モデルの作成にあたり、FeedbackSummary から Movie や Feedback を参照する必要があり
ます。そのために、まず、MyMovieEJB プロジェクトから、MyMovieJPA プロジェクトへの従属関係を設
定します。
1. MyMovieEJB プロジェクトから MyMovieJPA プロジェクトを参照させます。「エンタープライズ・エク
スプローラー」ビューから、「MyMovieEJB」を右クリックし、「プロパティー」をクリックします。
2. 「プロパティー」ダイアログが開きます。「デプロイメント・アセンブリー」をクリックします。
3. 「マニフェスト項目」タブをクリックします。
4. 「追加」ボタンをクリックします。
© 2010 IBM Corporation
- 128 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
5. 「マニフェスト項目の追加」ダイアログが表示されます。「MyMovieJPA.jar」を選択し、「終了」をクリッ
クします。
マニフェスト項目
マニフェスト項目の
項目の追加
マニフェスト項目の追加は、J2EE モジュール (Web モジュー
ル、EJB モジュール、Java ユーティリティー・モジュール) に
おける参照関係を定義するために使用します。WebSphere
Application Server などの J2EE 仕様に基づくアプリケー
ション・サーバーはこの情報を使用してアプリケーション・モジ
ュールの動作に必要なライブラリーを検索します。
Rational Application Developer では、マニフェスト項目の
追加で定義されたプロジェクトの情報を使用して、Java ビル
ド・パスに含まれる「EAR ライブラリー」、「Web App ライブラリ
ー」の内容を自動的に構成します。
6. 「プロパティー」ダイアログに戻ります。「適用」をクリックの上、「終了」をクリックします。
© 2010 IBM Corporation
- 129 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
7. 「MyMovieEJB」を右クリックし、「新規」 -> 「クラス」 をクリックします。
8. 「新規 Java クラス」ダイアログが表示されます。以下を設定し、残りはデフォルトを受け入れ、「終了」
をクリックします。
設定項目
設定値
パッケージ
com.ibm.example.websphere.ejb3sample.movie
名前
FeedbackSummary
9. 作成された FeedbackSummary.java に、以下のコードをコピーします。
package com.ibm.example.websphere.ejb3sample.movie;
import java.util.List;
© 2010 IBM Corporation
- 130 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
import com.ibm.example.websphere.jpa1sample.movie.Feedback;
import com.ibm.example.websphere.jpa1sample.movie.Movie;
public class FeedbackSummary {
private Movie movie;
private List<Feedback> feedbacks;
private float average;
/**
* @return movie
*/
public Movie getMovie() {
return movie;
}
/**
* @param movie the movie to set
*/
public void setMovie(Movie movie) {
this.movie = movie;
}
/**
* @return feedbacks
*/
public List<Feedback> getFeedbacks() {
return feedbacks;
}
/**
* @param feedbacks the feedbacks to set
*/
public void setFeedbacks(List<Feedback> feedbacks) {
this.feedbacks = feedbacks;
this.setAverage(feedbacks);
}
/**
* @return average
*/
© 2010 IBM Corporation
- 131 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
public float getAverage() {
return average;
}
/**
* @param average the average to set
*/
private void setAverage(List<Feedback> feedbacks){
if(feedbacks.size() == 0){
this.average = 0.0f;
} else {
float sum = 0.0f;
for (Feedback rating : feedbacks) {
sum += rating.getRating();
}
this.average = sum/feedbacks.size();
}
}
}
FeedbackSummary クラスは、フィードバック対象である Movie とフィードバックのリスト、および、評価の
平均点を持ちます。また、これらの値にアクセスするためのアクセサ・メソッドを提供しています。
演習の
演習のチェックポイント
ビジネス・モデル FeedbackSummary を作成しました。
ビジネス・モデル作成にあたり、MyMovieEJB プロジェクトか
ら MyMovieJPA プロジェクトを参照させるために従属関係を
定義しました。
まとめ
この演習では以下のことを学習しました。
マニフェスト・エディターを使用した従属関係の設定方
法。
© 2010 IBM Corporation
- 132 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
4.3
セッション Bean の作成
1. 「プロジェクト・エクスプローラー」から、「MyMovieJPA」を右クリックし、「新規」 -> 「セッション Bean
(EJB 3.x)」をクリックします。
2. 「EJB 3.x セッション Bean の作成」ダイアログが開きます。以下を設定し、残りの設定項目はデフォ
ルトのままで、「次へ」をクリックします。
設定項目
設定値
Java パッケージ
com.ibm.example.websphere.ejb3sample.movie
クラス名
クラス名
MovieService
© 2010 IBM Corporation
- 133 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3. 次のセッション Bean の特定情報を入力するページでは、そのまま、「次へ」をクリックします。
4. 「可視化のためクラス図を選択」ページでは、デフォルトのまま、「終了」をクリックします。
5. 作成された MovieService.java に、以下のコードをコピーします。
package com.ibm.example.websphere.ejb3sample.movie;
import java.util.List;
import javax.ejb.EJB;
import javax.ejb.Stateless;
import com.ibm.example.websphere.jpa1sample.movie.Feedback;
import com.ibm.example.websphere.jpa1sample.movie.FeedbackManagerLocal;
import com.ibm.example.websphere.jpa1sample.movie.Movie;
import com.ibm.example.websphere.jpa1sample.movie.MovieManagerLocal;
/**
* Session Bean implementation class MovieService
*/
@Stateless
public class MovieService implements MovieServiceLocal {
@EJB
private MovieManagerLocal movieManager;
@EJB
private FeedbackManagerLocal feedbackManager;
/**
* Default constructor.
*/
public MovieService() {
// TODO Auto-generated constructor stub
}
public List<Movie> getMovieList() {
return movieManager.findAllMovies();
}
© 2010 IBM Corporation
- 134 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
public FeedbackSummary getFeedbackSummaryByMovieId(int movieId) {
Movie movie = movieManager.findMovieById(movieId);
List<Feedback> feedbacks =
feedbackManager.findByMovieId(movieId);
FeedbackSummary feedbackSummary = new FeedbackSummary();
feedbackSummary.setMovie(movie);
feedbackSummary.setFeedbacks(feedbacks);
return feedbackSummary;
}
public List<Feedback> getRecentFeedbackList() {
return feedbackManager.findRecentFeedbacks(5);
}
public void addFeedback(int movieId, int rating, String comment)
{
Feedback feedback = new Feedback();
Movie movie = movieManager.findMovieById(movieId);
feedback.setMovie(movie);
feedback.setRating(rating);
feedback.setComment(comment);
try {
feedbackManager.createFeedback(feedback);
} catch (Exception e) {
e.printStackTrace();
}
}
}
MovieService クラスは以下のサービスを提供します。
Movie の一覧を取得する(getMovieList)
Movie の id に該当する FeedbackSummary を取得する(getFeedbackSummaryByMovieId)
Movie に対して投稿された最新の Feedback の一覧を取得する(getRecentFeedbackList)
フィードバックを登録する(addFeedback)
© 2010 IBM Corporation
- 135 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
@Stateless アノテーション
クラス定義の前に@Stateless アノテーションを加えることで
このクラスがステートレス・セッション Bean の実装であることを
宣言します。
@EJB アノテーション
EJB ビジネス・インターフェース、または、ホーム・インターフ
ェースの前に@EJB アノテーションを加えることで、依存性を
注入します。WebSphere Application Server 等、J2EE 仕
様に基づいたアプリケーション・サーバー上で、アノテーショ
ンを付けた変数が、依存先の EJB への参照に基づいて自
動的に初期化されます。
5. 作成したメソッドをビジネス・インターフェースにプロモートします。
「 エ ン タ ー プ ラ イ ズ ・ エ ク ス プ ロ ー ラ ー 」 ビ ュ ー か ら 、 「 MyMovieEJB 」 -> 「 ejbModule 」 ->
「com.ibm.sample.websphere.ejb3sample.movie」 -> 「MovieManager」を右クリックし、「Java
EE ツール」 -> 「メソッドのプロモート」をクリックします。
6. 「メソッドのプロモート」ダイアログが開きます。すべてのメソッドを選択し、「OK」をクリックします。
© 2010 IBM Corporation
- 136 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
7. ビジネス・インターフェース MovieServiceLocal.java を開き、メソッドがプロモートされていることを
確認します。
ここまでで、MovieServiceLocal.java は以下のようになっているはずです。
package com.ibm.example.websphere.ejb3sample.movie;
import com.ibm.example.websphere.jpa1sample.movie.Feedback;
import com.ibm.example.websphere.jpa1sample.movie.Movie;
import java.util.List;
import javax.ejb.Local;
@Local
public interface MovieServiceLocal {
List<Movie> getMovieList();
FeedbackSummary getFeedbackSummaryByMovieId(int movieId);
© 2010 IBM Corporation
- 137 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
List<Feedback> getRecentFeedbackList();
void addFeedback(int movieId, int rating, String comment);
}
演習の
演習のチェックポイント
ビジネス・サービスを提供する MovieService を作成しました。
まとめ
この演習では以下のことを学習しました。
© 2010 IBM Corporation
ステートレス・セッション Bean の作成方法。
EJB3.0 アノテーションの使用方法。
- 138 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
5
Web UI 層とビジネス・
ビジネス・ロジック層
ロジック層の接続
この演習では、My Movie Web Application の WebUI 層を 4 章で作成したビジネス・ロジック層と接続し
ます。演習にはおおよそ 30 分を要します。
接続するためにビジネス・ロジック層の MovieService を RPC アダプター・サービスとして公開します。こ
れに伴い、1.3 節で述べた機能拡張に対応した Web ページの変更を行います。
RPC アダプター・
アダプター・サービス
JavaScript またはクライアント・サイド・コードが、サーバー・
サイドのロジックを直接起動することをサポートするパターンを
Web Remote Procedure Calls といいます。
Web 2.0 Feature Pack for WebSphere に含まれる RPC
アダプターは、開発者が AJAX アプリケーションや他の単純
なクライアントのプログラミング・スタイルを補完する仕方で、コ
マンド・ベースのサービスを素早く簡単に作成するのに役立
つようにデザインされています。RPC アダプターは汎用サー
ブレットとして実装されており、登録済みの JavaBeans に対
して HTTP インターフェースを提供します。
© 2010 IBM Corporation
- 139 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
5.1
RPC アダプター・
アダプター・サービスの
サービスの作成
RPC アダプター・サービスを利用するために、「サーバー・サイド・テクノロジー」ファセットを有効にしま
す。
1. 「Web」パースペクティブに切り替えます。
2. 「エンタープライズ・エクスプローラー」から、「MyMovieWEB」を右クリックし、「プロパティー」をクリッ
クします。
3. 「プロパティー」ダイアログが開きます。
4. 「プロジェクト・ファセット」をクリックします。
5. 以下を設定の上、「適用」をクリックします。
プロジェクト・
プロジェクト・ファセット
バージョン
サーバー・
サーバー・サイド・
サイド・テクノロジー
1.0.0.1
6. 「OK」をクリックします。
サーバー・ サイ ド・ テクノロジー・ ファセットを使用可 能にし たことにより、RPCAdapter.jar およ び
JSON4J.jar といったライブラリーが参照可能になります。
次に、RPC アダプター・サービスを作成します。
© 2010 IBM Corporation
- 140 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
7. ShowMovies.html を開きます。「エンタープライズ・エクスプローラー」ビューで、「MyMovieWEB」
> 「WebContent」を展開し、ShowMovies.html をダブル・クリックします。すると、「ページ・デー
タ」ビューが使用可能になります。
8. 「ページ・データ」ビューから、「RPC アダプター・サービス」を右クリックし、「新規」 -> 「RPC アダプ
ター・サービス」をクリックします。
9. 「RPC アダプター・サービスの公開」ダイアログが開きます。「EJB セッション Bean」にチェックを入
れ、「参照」をクリックします。
10. 「公開する EJB の選択」ダイアログが表示されます。「参照の追加」をクリックします。
11. 「EJB 参照の追加」ダイアログが表示されます。以下を選択し、「終了」をクリックします。
設定項目
設定値
ワークスペース
ワークスペースにある
スペースにあるエンタープライ
にあるエンタープライ
チェックを入れる
ズ Bean
エンタープライズ Bean
「 MyMovieEAR 」
-> 「 MyMovieEJB 」
->
「MovieService」
© 2010 IBM Corporation
- 141 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
12. 「公開する EJB の選択」ダイアログに戻ります。EJB 参照名「ejb/MovieService」を選択し、「OK」を
クリックします。
13. 「RPC アダプター・サービスの公開」ダイアログに戻ります。以下を設定し、残りはデフォルトを受け
入れ、「次へ」をクリックします。
設定項目
設定値
EJB バー
3.0
ジョン
メソッド
すべてにチェックを入れる
（ addFeedback(int, int, String), getFeedbackSummaryByMovieId(int),
getMovieList(), getRecentFeedbackList() ）
14. 「メソッドの構成」ページに移ります。addFeedback メソッドを選択し、HTTP メソッドを「POST」に変
© 2010 IBM Corporation
- 142 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
更します。
15. 残りのメソッドは HTTP メソッドが「GET」のままで、「終了」をクリックします。
16. 「ページ・データ」ビューに RPC アダプター・サービスが追加されたことを確認します。
RPC アダプター・
アダプター・サービスのその
サービスのその他
のその他の公開方法
公開方法
RPC アダプター・サービスは、EJB や POJO の Java ファイルからも公開でき
ます。公開を行うには、「エンタープライズ・エクスプローラー」ビューから、EJB
や Java ファイルを右クリックし、「サービス」 -> 「RPC アダプター・サービスの
公開」をクリックします。
© 2010 IBM Corporation
- 143 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
演習の
演習のチェックポイント
ビジネス・サービス「MovieService」を RPC アダプター・サー
ビスとして公開しました。
まとめ
この演習では以下のことを学習しました。
「ページ・データ」ビューを使用した RPC アダプター・サ
ービスの公開方法。
© 2010 IBM Corporation
RPC アダプター・サービスのその他の公開方法。
- 144 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
Web ページの
ページの修正
5.2
この演習では、1.3 節で述べた機能拡張に対応した Web ページの変更を行います。
以下の変更を行います。
・
ShowMovies.html ロード時の振る舞い
・
feedbackDialog の submit 時の振る舞い
・
DataGrid への onMouseOver 時の振る舞い
5.2.1
ShowMovies ロード時
ロード時の振る舞いの変更
いの変更
ShowMovies.html ロード時の振る舞いとして、以下を変更します。
① DataGrid のデータを、MovieList.json から RPC アダプター・サービス「getMovieList」呼び出しへ
切り替える
② 「History of Ratings and Comments」セクションのフィードバック・データを、オンメモリーでの管理
から RPC アダプター・サービス「getRecentFeedbackList」へ切り替える
まず、①の MovieList.json から RPC アダプター・サービス呼び出しへ切り替えを行います。
1. ShowMovies.html を開きます。
2. dojo.addOnLoad の含まれる<script>タグを特定します。
3. dojo.addOnLoad 内にある dojo.xhrGet 関数を特定します。
4. dojo.xhrGet ブロック内にある変数 url を RPC アダプター・サービスの URL へ変更します。まず、
url の値を空にします。
<script type="text/javascript">
dojo.addOnLoad(function() {
dojo.xhrGet({
url : "",
5. 「 ペ ー ジ・ デ ー タ 」 ビ ュ ー から 、 「 RPC ア ダ プ タ ー ・ サー ビ ス 」 -> 「 MovieServiceLocal 」 ->
「getMovieList()」 を右クリックし、「クリップボードへのサービス URL のコピー」をクリックします。
© 2010 IBM Corporation
- 145 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
6. 変数 url の値に、サービス URL をペーストします。
url : "/MyMovieWEB/RPCAdapter/httprpc/MovieServiceLocal/getMovieList",
7. load ブロック内にある newData の identifier 属性を、以下のように ”title” から ”id” に変更します。
var newData = {
identifier : "id",
items : response.result
};
次に、②の「History of Ratings and Comments」セクションのフィードバック・データを RPC アダプタ
ー・サービスから取得するように変更します。
8. 以下のコードを、dojo.xhrGet 関数の load ブロック内の最終行に追加します。
dijit.byId("RateAndComment").showRecentFeedbacks();
9. RateAndComment ウィジェットに showRecentFeedbacks メソッドを追加します。以下のコードを
showFeedbackTools メソッドの後に追加します。
showRecentFeedbacks : function() {
var grid = dijit.byId("gridId");
dojo.xhrGet({
url :
"/MyMovieWEB/RPCAdapter/httprpc/MovieServiceLocal/getRecentFeedbackList",
handleAs : "json",
load : function(response, ioArgs) {
© 2010 IBM Corporation
- 146 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
dojo.empty("feedbacklist");
for ( var i = 0; i < response.result.length; i++) {
var rating = response.result[i];
var movieTitle = rating.movie.title;
dojo.create("<li>",
{innerHTML : "<b>Title:</b>" +
movieTitle +
"<b>Rating:</b>" + rating.ratingValue +
"<br>
<b>Comments:</b> " + rating.comment},
"feedbacklist");
}
},
error : function(response, ioArgs) {
alert("An error occurred while invoking the service.");
}
});
},
© 2010 IBM Corporation
- 147 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
5.2.2
feedbackDialog の submit 時の振る舞いの変更
いの変更
feedbackDialog の評価、コメントが submit された時の振る舞いとして、RateAndComment.js の以下を
変更します。
③ feedbackDialog から submit された際に呼び出される saveFeedback メソッド内で、フィードバッ
ク・データをオンメモリーでの管理から RPC アダプター・サービス「addFeedback」へ切り替える
addFeedback は、パラメーターとして、Movie の id、評価、および、コメントが必要です。これに伴い、
ShowMovies.html および RateAndComment.js を以下のように変更します。
④ DataGrid から feedbackDialog を表示する際に呼び出される showFeedbackDialog メソッド内で、
Movie の id を RateAndComment ウィジェットの showFeedbackTools メソッドへ引き渡す
⑤ RateAndComment ウィジェットの showFeedbackTools は Movie の id を受け取り、movieId プロ
パティーに格納する
プロパティーに格納することによって、RateAndComment.js の saveFeedback メソッドは movieId プロ
パティーを参照し、addFeedback メソッドへパラメーターとして渡すことができます。
では、③の saveFeedback メソッドの内容を変更します。
1. まず、movieId を追加します。以下のコードを widgetsInTemplate プロパティーの後に追加します。
movieId : "",
2. saveFeedback メソッドを以下のコードで置き換えます。
saveFeedback : function() {
var userRating = this.getRating();
var userComment = this.getComment();
var deferred = dojo.xhrPost({
url :
"/MyMovieWEB/RPCAdapter/httprpc/MovieServiceLocal/addFeedback",
content : {movieId : this.movieId, rating : userRating,
comment : userComment},
handleAs : "json",
load : function(response, ioArgs) {
© 2010 IBM Corporation
- 148 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
dijit.byId("RateAndComment").showRecentFeedbacks();
},
error : function(response, ioArgs) {
alert("An error occurred while invoking the
service.");
}
});
this.dialogbox.hide();
this.setComment("");
this.setRating(0);
},
dojo.xhrPost
RPC アダプター・サービスである addFeedback は Post メソ
ッドです。Post メソッドの呼び出しには、dojo.xhrPost を使用
します。
次に、④の変更を行います。変更の対象は、ShowMovies.html の showFeedbackDialog メソッドで
す。
3. showFeedbackDialog メソッドを以下の内容で置き換えます。
function showFeedbackDialog(e) {
//IF A Click to rate!! cell was clicked
if (e.cellIndex == 4) {
var grid = dijit.byId("gridId");
var movieId =
grid.store.getValue(grid.getItem(e.rowIndex), "id");
var movieTitle =
grid.store.getValue(grid.getItem(e.rowIndex),
"title");
var rcwidget = dijit.byId("RateAndComment");
rcwidget.showFeedbackTools(movieId, movieTitle);
}
}
© 2010 IBM Corporation
- 149 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
次に、⑤の変更を行います。変更の対象は、RateAndComment.js の showFeedbackTools メソッドで
す。
4. showFeedbackTools メソッドを以下の内容で置き換えます。
showFeedbackTools : function(movieId,movieTitle) {
this.movieId = movieId;
this.movieTitle = movieTitle;
this.dialogbox.show();
},
© 2010 IBM Corporation
- 150 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
5.2.3
DataGrid
DataGrid へのオンマウス・
オンマウス・オーバー時
オーバー時の振る舞いの変更
いの変更
へ の オ ン マ ウ ス ・ オ ー バ ー 時 に 、 RPC
ア ダ プ タ ー ・ サ ー ビ ス
「getFeedbackSummaryByMovidId」から Feedback データを取得するように、以下の変更を行いま
す。
⑥ ShowMovies.html の showComments メソッド内で、show という関数を定義します。この関数は、
FeedbackSummary データ（評価の平均点と、評価およびコメントの一覧）を表示する html コードを
生成します。一方で、FeedbackSummary データを取得するのは RateAndComments.js に委譲し
ま す 。 そ の た め 、 Movie の
id
と
show
メ ソ ッ ド を
RateAndComments
の
showFeedbackSummaryByMovieId という新規メソッドに渡します。
⑦ RateAndComment ウィジェットに showFeedbackSummaryByMovieId メソッドを定義します。この
メソッドは、受け取った MovieId をパラメーターとし、FeedbackSummary データを RPC アダプタ
ー・サービスから取得し、その結果を show メソッドへ渡し、表示します。
まず、⑥の変更を行います。変更の対象は、showMovies.html の showComments です。
1. showMovies.html の showComments メソッドを以下のコードで置き換えます。
function showComments(e) {
var grid = dijit.byId("gridId");
var movieId = grid.store.getValue(grid.getItem(e.rowIndex), "id");
var show = function(feedbackSummary) {
if (feedbackSummary.feedbacks.length == 0) {
dijit.showTooltip("No comments made!", e.cellNode);
} else {
var list = "<b>Average:</b>" +
feedbackSummary.average + "<ul>";
for (var i = 0; i < feedbackSummary.feedbacks.length;
i++) {
var feedback = feedbackSummary.feedbacks[i];
list += "<li> rating : "
+ feedback.rating + "<br/>";
list += " comment : " + feedback.comment
+ "</li>";
}
list += "</ul>";
© 2010 IBM Corporation
- 151 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
dijit.showTooltip(list, e.cellNode);
}
};
dijit.byId("RateAndComment")
.showFeedbackSummaryByMovieId(movieid, show);
};
次に、⑦の追加を行います。追加の対象は、RatingAndComments.js です。
2. 以下のコードを、showRecentFeedback メソッドの後に追加します。
showFeedbackSummaryByMovieId : function(movieId,showFunction){
dojo.xhrGet({
url :
"/MyMovieWEB/RPCAdapter/httprpc/MovieServiceLocal/getFeedbackSummaryByMovieId",
handleAs : "json",
content : {movieId : movieId},
load : function(response, ioArgs) {
var feedbackSummary = response.result;
showFunction(feedbackSummary);
},
error : function(response, ioArgs) {
alert("An error occurred while invoking the service.");
}
});
},
3. ShowMovies.html および RateAndComments.js を保存します。
ここまでで、ShowMovies.html および RateAndCommnet.js は以下のようになっているはずです。
showMovies.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css"
href="dojo/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css"
© 2010 IBM Corporation
- 152 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
href="dojo/dijit/themes/tundra/tundra.css">
<title>ShowMovies</title>
<meta http-equiv="Content-Type" content="text/html;
charset=Windows-31J">
<script type="text/javascript"
djconfig="isDebug: false, parseOnLoad: true"
src="dojo/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("myDojo.RateAndComment");
dojo.require("dijit.Tooltip");
</script>
<style type="text/css">
@import "dojo/dojox/form/resources/Rating.css";
</style>
<script type="text/javascript">
dojo.addOnLoad(function() {
dojo.xhrGet({
url :
"/MyMovieWEB/RPCAdapter/httprpc/MovieServiceLocal/getMovieList",
handleAs : "json",
load : function(response, ioArgs) {
var newData = {
identifier : "id",
items : response.result
};
var dataStore = new
dojo.data.ItemFileReadStore({
data : newData,
id : "dataStoreId"
});
var grid = dijit.byId("gridId");
grid.setStore(dataStore);
© 2010 IBM Corporation
- 153 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
dijit.byId("RateAndComment").showRecentFeedbacks();
},
error : function(response, ioArgs) {
alert("An error occurred while invoking the
service.");
}
});
});
</script>
<script type="text/javascript">
function showComments(e) {
var grid = dijit.byId("gridId");
var movieId =
grid.store.getValue(grid.getItem(e.rowIndex), "id");
var show = function(feedbackSummary) {
if (feedbackSummary.feedbacks.length == 0) {
dijit.showTooltip("No comments made!",
e.cellNode);
} else {
var list = "<b>Average:</b>" +
feedbackSummary.average + "<ul>";
for (var i = 0; i <
feedbackSummary.feedbacks.length; i++) {
var feedback = feedbackSummary.feedbacks[i];
list += "<li> rating : "
+ feedback.rating + "<br/>";
list += " comment : " + feedback.comment
+ "</li>";
}
list += "</ul>";
dijit.showTooltip(list, e.cellNode);
}
};
dijit.byId("RateAndComment")
© 2010 IBM Corporation
- 154 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
.showFeedbackSummaryByMovieId(movieid,
show);
};
function hideComments(e){
dijit.hideTooltip(e.cellNode);
}
function showFeedbackDialog(e) {
//IF A Click to rate!! cell was clicked
if (e.cellIndex == 4) {
var grid = dijit.byId("gridId");
var movieId =
grid.store.getValue(grid.getItem(e.rowIndex), "id");
var movieTitle =
grid.store.getValue(grid.getItem(e.rowIndex),
"title");
var rcwidget = dijit.byId("RateAndComment");
rcwidget.showFeedbackTools(movieId, movieTitle);
}
}
function getContent(){
return "Click to rate!";
}
</script>
<link rel="stylesheet" type="text/css" title="Style"
href="dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" title="Style"
href="dojo/dojox/grid/resources/tundraGrid.css">
</head>
<body class="tundra">
<div dojoType="dijit.layout.BorderContainer" id="BorderContainer"
design="headline" style="height: 100%; width: 100%">
<div dojoType="dijit.layout.ContentPane" region="top" style="text-align:
© 2010 IBM Corporation
- 155 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
center">My Movie Web Application!</div>
<div dojoType="dijit.layout.ContentPane" id="" title="" region="center">
<table id="gridId" dojotype="dojox.grid.DataGrid" autowidth="true"
onRowMouseOut="hideComments" onRowMouseOver="showComments"
onCellClick="showFeedbackDialog" rowselector="20px">
<thead>
<tr>
<th field="title">タイトル</th>
<th field="director">監督</th>
<th field="actor">役者</th>
<th field="description">説明</th>
<th get="getContent">Rate and Comment!</th>
</tr>
</thead>
</table>
</div>
<div dojoType="dijit.layout.ContentPane" id="" title="" region="right">
<div dojoType="myDojo.RateAndComment" id="RateAndComment"></div>
</div>
</div>
</body>
</html>
RateAndComment.js
// dojo.provide allows pages use all types declared in this resource
dojo.provide("myDojo.RateAndComment");
//dojo.require the necessary dijit hierarchy
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.form.Rating");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
© 2010 IBM Corporation
- 156 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
dojo.require("dijit.TitlePane");
dojo.declare("myDojo.RateAndComment", [ dijit._Widget, dijit._Templated ], {
// Path to the template
templateString : dojo.cache("myDojo", "templates/RateAndComment.html"),
// Set this to true if your widget contains other widgets
widgetsInTemplate : true,
movieId : "",
movieTitle : "",
rcStore : new dojo.data.ItemFileWriteStore({
data : {
items : []
}
}),
// Override this method to perform custom behavior during dijit
// construction.
// Common operations for constructor:
// 1) Initialize non-primitive types (i.e. objects and arrays)
// 2) Add additional properties needed by succeeding lifecycle methods
constructor : function() {
},
getComment : function() {
return this.comments.attr("value");
},
getRating : function() {
return this.rating.attr("value");
},
© 2010 IBM Corporation
- 157 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
setComment : function(value) {
this.comments.attr("value", value);
},
setRating : function(value) {
this.rating.attr("value", value);
},
showFeedbackTools : function(movieId,movieTitle) {
this.movieId = movieId;
this.movieTitle = movieTitle;
this.dialogbox.show();
},
showRecentFeedbacks : function() {
var grid = dijit.byId("gridId");
dojo.xhrGet({
url :
"/MyMovieWEB/RPCAdapter/httprpc/MovieServiceLocal/getRecentFeedbackList",
handleAs : "json",
load : function(response, ioArgs) {
dojo.empty("feedbacklist");
for ( var i = 0; i < response.result.length; i++) {
var feedback = response.result[i];
var movieTitle = feedback.movie.title;
dojo.create("<li>",
{innerHTML : "<b>Title:</b>" +
movieTitle +
"<b>Rating:</b>" + feedback.rating +
"<br>
<b>Comments:</b> " + feedback.comment},
"feedbacklist");
}
},
© 2010 IBM Corporation
- 158 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
error : function(response, ioArgs) {
alert("An error occurred while invoking the
service.");
}
});
},
showFeedbackSummaryByMovieId : function(movieId,showFunction){
dojo.xhrGet({
url :
"/MyMovieWEB/RPCAdapter/httprpc/MovieServiceLocal/getFeedbackSummaryByMovieId",
handleAs : "json",
content : {movieId : movieId},
load : function(response, ioArgs) {
var feedbackSummary = response.result;
showFunction(feedbackSummary);
},
error : function(response, ioArgs) {
alert("An error occurred while invoking the
service.");
}
});
},
saveFeedback : function() {
var userRating = this.getRating();
var userComment = this.getComment();
var deferred = dojo.xhrPost({
url :
"/MyMovieWEB/RPCAdapter/httprpc/MovieServiceLocal/addFeedback",
content : {movieId : this.movieId, rating : userRating,
comment : userComment},
handleAs : "json",
load : function(response, ioArgs) {
© 2010 IBM Corporation
- 159 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
dijit.byId("RateAndComment").showRecentFeedbacks();
},
error : function(response, ioArgs) {
alert("An error occurred while invoking the
service.");
}
});
this.dialogbox.hide();
this.setComment("");
this.setRating(0);
},
getCommentsByMovieTitle : function(movieTitle) {
var comments = [];
var store = this.rcStore;
this.rcStore.fetch({
query : {
title : movieTitle
},
onComplete : function(items, request) {
dojo.forEach(items, function(item) {
comments.push(store.getValue(item,
"comment"));
});
}
});
return comments;
},
// When this method is called, all variables inherited from superclasses are
// 'mixed in'.
// Common operations for postMixInProperties
// 1) Modify or assign values for widget property variables defined in the
// template HTML file
© 2010 IBM Corporation
- 160 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
postMixInProperties : function() {
}
});
演習の
演習のチェックポイント
RPC アダプター・サービスを使用して、WebUI 層とビジネス・
ロジック層を接続しました。また、接続に伴い、Web ページを
変更しました。
まとめ
この演習では以下のことを学習しました。
© 2010 IBM Corporation
RPC アダプター・サービスの呼び出し方。
- 161 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
6
アプリケーションの
アプリケーションのデバッグ・
デバッグ・テスト
5 章までで My Movie Web Application が完成しました。
ただし、アプリケーションにはバグが含まれているかもしれません。
この演習では、Firebug を利用してアプリケーションのデバッグを行います。その後、コード・カバレッジ
を利用して、あるテスト・シナリオにおけるソース・コードの網羅性を調べます。
演習にはおおよそ 30 分を要します。
6.1
Firebug 統合による
統合によるデバッグ
によるデバッグ
1. Web ブラウザーを Firebug に設定します。メニュー・バーより、「ウィンドウ」 -> 「Web ブラウザー」
-> 「Firefox with Firebug」を選択します。
注意！
注意！
Firefox が存在しない、あるいは前提のバージョン(3.5 以降)を満たしていない場合で
は、Firefox with Firebug が表示されない場合があります。
この場合、手動で設定を行う必要があります。手順は以下です。
7. メニュー・バーより、「ウィンドウ」 -> 「設定」をクリックします。
8. 「一般」 -> 「Web ブラウザー」を選択します。
9. 「外部ブラウザーを使用」を選択し、「新規」をクリックします。
10. 「外部 Web ブラウザーの編集」ダイアログが表示されます。以下を設定の
© 2010 IBM Corporation
- 162 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
上、「OK」をクリックします。
設定項目
設定値
名前
Firefox with Firebug
ロケーショ
（Firefox のインストール・ディレクトリー）¥firefox.exe
ン
パラメータ
-fireclipse
ー
-no-remote
-profile
${webtools.debug.profile}
11. 「適用」をクリックの上、「OK」をクリックします。
2. ShowMovies.html を 実 行 し ま す 。 「 エ ン タ ー プ ラ イ ズ ・ エ ク ス プ ロ ー ラ ー 」 ビ ュ ー か ら
ShowMovies.html を右クリックし、「実行」 -> 「サーバーで実行」をクリックします。
© 2010 IBM Corporation
- 163 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
3. 「サーバーで実行」ダイアログが開きます。以下を設定の上、「次へ」をクリックします。
設定項目
設定値
サーバー選択
サーバー選択の
選択の方法
既存のサーバーを選択
使用する
使用するサーバー
するサーバーの
サーバーの選択
localhost の WebSphere Application Server v7.0
4. 「追加および削除」ページでは、MyMovieEAR を「構成済み」欄へ追加の上、「終了」をクリックしま
す。
5. Firebug が起動します。
© 2010 IBM Corporation
- 164 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
6. DataGrid 内にカーソルを乗せて、FeedbackSummary を表示させようとします。
7. エラー・ダイアログが表示されました。「OK」をクリックします。
8. Firebug の右下を見ると、「1 件のエラー」と表示されています。このリンクをクリックします。
9. Firebug のコンソールが開きます。最後の行に「movieid is not defined」というメッセージが表示さ
れています。
© 2010 IBM Corporation
- 165 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
Firebug 上でのエラー
でのエラー
Firebug 上でのエラーは、RAD の「問題」ビューと同期が取ら
れます。
10. RAD に戻ります。
11. 「問題」ビューで、「movieid is not defined」と示されていることが確認できます。この行をダブル・ク
リックします。
© 2010 IBM Corporation
- 166 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
12. 問題が発生している行へ、ナビゲートされます。
13. 変数 movieId を宣言しているのに、RateAndComment の showFeedbackSummaryByMovieId
へのパラメーターが movidid となっていることを確認します。
© 2010 IBM Corporation
- 167 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
14. movieid を movieId に変更し、保存します。すると、「問題」ビュー、および、エディター上の当該エ
ラーが無くなります。
15. Firebug に戻り、ページの再読み込みをします。
© 2010 IBM Corporation
- 168 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
16. 再度 dataGrid にカーソルを乗せると FeedbackSummary データが表示されることを確認します。
17. Movie データの登録が済んだら、サーバーを停止させます。「サーバー」ビューから、「localhost の
WebSphere Application Server v7.0」を選択し、「サーバーを停止」アイコンをクリックします。
演習の
演習のチェックポイント
チェックポイント
My Movie Web Application のデバッグを行いました。
まとめ
この演習では以下のことを学習しました。
© 2010 IBM Corporation
Firefox with Firebug の起動方法
Firebug と RAD の同期
- 169 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
コード・
コード・カバレッジによる
カバレッジによる網羅性
による網羅性の
網羅性の確認
6.2
この演習では、My Movie Web Application のコードをテストし、カバレッジ（網羅性）の観点からテストが
十分できているかを確認します。対象コードはビジネス・ロジック層である MyMovieEJB とします。テスト
の合格基準として、以下のテスト・ケースをすべて実行し、パッケージ、ソース・ファイル、タイプ、メソッド
すべてにおいて、80%の行がカバーされていることとします。
テスト・ケース
・
アプリケーション起動時に、映画の一覧が表示される
・
アプリケーション起動時に、最近投稿された映画のフィードバックが表示される
・
映画にカーソルを乗せると、フィードバック一覧と評価の平均点が表示される
・
映画に対するフィードバックを登録する
また、テストの結果はレポートとして出力し、My Movie Web Application の開発依頼者であるお客様に
提供します。
© 2010 IBM Corporation
- 170 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
1. MyMovieEJB に対して、コード・カバレッジを使用可能にします。「エンタープライズ・エクスプローラ
ー」から、「MyMovieEJB」を右クリックし、「プロパティー」をクリックします。
2. 「プロパティー」ダイアログが表示されます。「コード・カバレッジ」をクリックします。
3. 「コード・カバレッジを使用可能にする」にチェックを入れ、「適用」をクリックします。
© 2010 IBM Corporation
- 171 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
許容できる
許容できるコード
できるコード・
コード・カバレッジ・
カバレッジ・レベルの
レベルの設定
パッケージやソース・ファイル、タイプ（Java クラス）、メソッドに
対して、どの単位で、どの程度のカバレッジなら許容できるか
を設定します。単位には、行、ブロック、メソッド、タイプがあり
ます。
たとえば、パッケージ・カバレッジで、タイプ 100%とした場合、
パッケージに含まれる全 Java クラスが使用されないと、結果と
して許容できないと判断できます。
4. 「コード・カバレッジが使用不可」ダイアログが表示されます。コード・カバレッジ統計を生成するには、
サーバーの再始動が必要です。「OK」をクリックします。
5. 「OK」をクリックします。
6. ShowMovies.html を 実 行 し ま す 。 「 エ ン タ ー プ ラ イ ズ ・ エ ク ス プ ロ ー ラ ー 」 ビ ュ ー か ら
ShowMovies.html を右クリックし、「実行」 -> 「サーバーで実行」をクリックします。
© 2010 IBM Corporation
- 172 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
7. 「サーバーで実行」ダイアログが開きます。以下を設定の上、「次へ」をクリックします。
設定項目
設定値
サーバー選択
サーバー選択の
選択の方法
既存のサーバーを選択
使用する
使用するサーバー
するサーバーの
サーバーの選択
localhost の WebSphere Application Server v7.0
8. 「追加および削除」ページでは、MyMovieEAR を「構成済み」欄へ追加の上、「終了」をクリックしま
す。
9. My Movie Web Application が起動します。この時点で、以下のテスト・ケースが実行されました。
・
アプリケーション起動時に、映画の一覧が表示される
・
アプリケーション起動時に、最近投稿された映画のフィードバックが表示される
10. 映画情報の上にカーソルを乗せて、フィードバック一覧と評価の平均点を確認します。この時点で、
以下のテスト・ケースが実行されました。
・
映画にカーソルを乗せると、フィードバック一覧と評価の平均点が表示される
© 2010 IBM Corporation
- 173 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
11. 映画にフィードバックを登録します。「Click to rate!」をクリックし、「Rate and Comment!」ダイアログ
からフィードバックを投稿します。この時点で、すべてのテスト・ケースが実行されました。
12. RAD に戻って、カバレッジを確認します。「エンタープライズ・エクスプローラー」ビューから、
「MyMovieEJB」 -> 「ejbModule」 配下をすべて展開します。パッケージ、ソース・ファイル、タイプ
（Java クラス）、メソッド名の横にコード・カバレッジ・インディケーターが表示され、何%カバーされた
かがわかります。
© 2010 IBM Corporation
- 174 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
コード・
コード・カバレッジ・
カバレッジ・インディケーター
コード・カバレッジ・インディケーターは、タイプ、メソッド、ブロック、行単位で表示可能です。
設定するには、メニュー・バーの「ウィンドウ」 -> 「設定」 -> 「コード・カバレッジ」から、「コ
ード・カバレッジ・インディケーター」にて行います。
上図の例では、すべてのコード・カバレッジ・インディケーターにチェックを入れています。す
ると、「エンタープライズ・エクスプローラー」ビュー上では、チェックを入れたすべてのカバレ
ッジが表示されます。
© 2010 IBM Corporation
- 175 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
13. MovieService.java の addFeedback メソッドが赤く表示されています。これはカバーされた割合が
許容できない値であることを示しています。
14. どの行がカバーされなかったのかを確認します。addFeedback をダブル・クリックします。
15. MovieService.java が開き、addFeedback メソッドにナビゲートされます。
エディター左側に緑と赤のインディケーターがあります。緑はカバーされた行を、赤はカバーされな
かった行を表します。これより、カバーされなかったのは catch ブロックであることがわかります。これ
により、テストの合格基準を満たすには、例外処理のテストをしなくてはならないことがわかります。
© 2010 IBM Corporation
- 176 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
それでは、この結果をレポートとして出力し、お客様に提供します。
16. メニュー・バーから「実行」 -> 「コード・カバレッジ」 -> 「レポートの生成」をクリックします。
17. 「コード・カバレッジ・レポート」ダイアログが表示されます。以下を設定の上、「実行」をクリックしま
す。
設定項目
設定値
起動の
起動の選択
MyMovieEJB
レポートの
レポートのフォーマットおよび
フォーマットおよびロケーション
およびロケーション
HTML レポート
レポートの
レポートの表示と
表示と保存
チェックを入れる
レポートの
レポートの保存先
C:¥code_coverage_report¥html
© 2010 IBM Corporation
- 177 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
18. カバレッジ・レポートが生成され、ブラウザー上に表示されます。
© 2010 IBM Corporation
- 178 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
19. 左上セクション「全パッケージ」から、「com.ibm.example.websphere.ejb3sample.movie」をクリッ
クします。
20. パッケージに含まれるソース・ファイルのカバレッジ・パーセントが表示されます。
21. 右セクション「コード・カバレッジ・レポート」から、ソース・ファイル「MovieService」をクリックします。
© 2010 IBM Corporation
- 179 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
22. クラスとメソッドのカバレッジ・パーセントが表示されます。
© 2010 IBM Corporation
- 180 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
レポートの
レポートの生成 ワークベンチ・
ワークベンチ・レポート・
レポート・フォーマット
「コード・カバレッジ・レポート」ダイアログの「レポートのフォーマットおよびロケーショ
ン」を選択すると、RAD ワークベンチ上でレポートを確認することができます。
確認できる内容は HTML と変わりません。しかし、ワークベンチ・レポートの「レポー
ト」タブでは、ソース・ファイルや Java クラス、メソッドをダブル・クリックすると、該当
箇所にナビゲートされ、エディター上でどの行がカバーされているかを確認するの
に便利です。
ワークベンチ・レポートの「レポート」タブ
ワークベンチ・レポートの「要約」タブ
© 2010 IBM Corporation
- 181 -
IBM Rational Application Developer V8.0 新機能ハンズオン資料
演習の
演習のチェックポイント
My Movie Web Application にカバレッジの品質検証を行い
ました。
まとめ
この演習では以下のことを学習しました。
© 2010 IBM Corporation
コード・カバレッジの設定方法
カバレッジ・レポートの確認方法
- 182 -