レベル: 初級 米持 幸寿, テクノロジー・エバンジェリスト, IBM
2004年 2月 18日 本記事では、簡単なJavaクラスを呼び出すWebアプリケーションをFaces機能を使って作る手順を紹介します。
WebSphere Studio V5.1.1から、Java ServerFacesという新しい機能（現段階ではベータ機能）が登場し、Webアプリケーションが「より簡単に、楽しく」作れるようになりました。
本記事では、簡単なJavaクラスを呼び出すWebアプリケーションをFaces機能を使って作る手順を紹介します。
次のステップで、サンプル・アプリケーションを作ってみましょう。
- Webプロジェクトを追加する
- Javaクラスを追加する
- Faces JSPを追加する
Faces技術をつかうJSPファイルです。
- ページデータを定義する
Facesアプリケーションが実行中に使用するデータです。
- 部品を配置する
画面を作ります。
- ナビゲーションを定義する
画面遷移を定義します。
- イベント処理をコーディングする
ボタンがクリックされたときのプログラムを記述します。
- 実行してみる
サンプル・アプリケーション
ここでは、ブラウザーに二つのパネルを表示するアプリケーションを作ってみることとします。
一つめのパネルは、「商品番号入力」画面です。このパネルには、入力フィールドが一つあり、「表示」ボタンがあります。
表示ボタンを押すと、入力された商品番号の商品を検索し、商品情報詳細を表示します。
しかし、もし商品情報が間違っている（商品番号が存在しない）場合は、商品番号入力画面に戻り、「商品番号が間違っています」とエラーを表示します。
ここで、整理しておきましょう。
画面に使われる情報は、以下のとおりです。
（ ）内は変数として使う場合の名前です。
- 商品番号（id）
- メッセージ（message）
- 名称（name）
- 価格（price）
このような商品検索を行うことができるJavaクラスが既存すると仮定して話を進めます。
1. Webプロジェクトを追加する
エンタープライズ・アプリケーション「JSF」とWebプロジェクト「JSFWeb」をワークスペースに追加してください。
手順：Webプロジェクトの準備
WebSphere StudioでWebアプリケーションを開発する場合、「Webプロジェクト」を作り、その中に作成していきます。
ここでは、Webアプリケーションを空のワークスペース上に作成する手順を説明します。
「Webプロジェクト」はJ2EE仕様のWARファイルとなりますが、WebSphere Studio上では、EARファイルを表す「エンタープライズ・アプリケーション・プロジェクト」を同時に作成し、関連づける必要があります。
新規メニューから「エンタープライズ・アプリケーション」を選択します。
「新規エンタープライズ・アプリケーション・プロジェクト」ダイアログが表示されたら、「J2EE 1.3 の〜」が選択されているのを確認して、「次へ」ボタンをクリックします。
プロジェクト名に適当な名前を付けます。（ここではJSFを指定）
「EARモジュール・プロジェクト」パネルが表示されます。
このパネルでは、EARファイルに含める他のJARファイルを選択します。
最初はなにも表示されないので、「新規モジュール」ボタンをクリックして、必要なモジュールを追加します。
ここでは、Webアプリケーションが作成したいので、「Webプロジェクト」以外の三つ（アプリケーション・クライアント、EJB、コネクター）の選択をはずし、「終了」ボタンをクリックします。
先程の画面に戻り、Webプロジェクト（ここでは、JSFWeb）が選択状態で表示されます。
「終了」ボタンをクリックしてください。
以上で、EARファイルを表すエンタープライズ・アプリケーション・プロジェクトとWARファイルを表すWebプロジェクトが作成されました。
Webアプリケーションの開発作業には、Webパースペクティブを使いますので、切り替えておきましょう。
WebSphere Studioワークベンチの左側にある「パースペクティブを開く」ボタンをクリックし、「その他」を選択します。
（このメニューに「Web」が表示されれば、それをクリックしてもかまいません。）
パースペクティブの選択ダイアログで「Web」を選択し、「OK」ボタンをクリックします。
以上で、Webアプリケーション開発の準備が整いました。
2. Javaクラスを追加する
Javaクラスとして、以下の三つのクラスを追加してください。
（コメントは削除してあります。）
Product.java（商品情報を表すJava Beanです）
package com.yone;
public class Product {
private String id;
private String name;
private int price;
public Product(){}
public Product(String i, String n, int p){
id = i;
name = n;
price = p;
}
public String getId() {
return id;
}
public String getName() {
return name;
}
public int getPrice() {
return price;
}
public void setId(String string) {
id = string;
}
public void setName(String string) {
name = string;
}
public void setPrice(int i) {
price = i;
}
}
|
InvIdException.java（商品番号が間違っていることを示す例外クラスです）
package com.yone;
public class InvIdException extends Exception {
}
|
ProductFinder.java（Productオブジェクトを検索する検索クラスです）
package com.yone;
public class ProductFinder {
public static Product find(String id) throws InvIdException {
Product result = null;
if(id.equals("001")) {
return new Product(
id,
"ハードディスク",
12800
);
} else
if(id.equals("002")) {
return new Product(
id,
"メモリー",
25800
);
} else {
throw new InvIdException();
}
}
}
|
手順：WebプロジェクトへJavaクラスを追加する
Webプロジェクトでは、Javaクラスを「Javaリソース」ディレクトリーに追加します。
ここに置かれたJavaのクラスファイルは、自動的にコンパイルされて適切な場所（WEB-INF\classes）に置かれます。
クラスを追加するには、クラス追加ウィザードを使います。
- Webパースペクティブで操作する。
- Javaリソース・フォルダーを右クリックする。
- メニューから「新規」 -> 「クラス」を選択する。
ウィザードが表示されたら、パッケージ名と名前（クラス名）を指定します。
写真では、パッケージ名に「com.yone」、名前に「Product」を指定しました。
クラスが追加されると、専用のエディターでオープンされます。ソースコードを入力してください。
画像では、privateのフィールドが三つ、引数なしのコンストラクター、引数をもつコンストラクターがコーディングされています。
ここでは、GetterとSetterを自動生成して見ましょう。
クラス名の宣言部分に文字カーソルを置いた状態で、編集画面上を右クリックし、メニューから「ソース」 -> 「GetterおよびSetterの生成」を選択します。
「GetterおよびSetterの生成」ダイアログが表示されます。
すべてを選択状態にし、「OK」ボタンを押します。
エディターの「×」マークをクリックしてエディターを閉じます。
保管するか聞いてきますので、「はい」をクリックしてください。
3. Faces JSPを追加する
Webアプリケーションに、次の2つのFaces JSPファイルを追加してください。
- prod_input.jsp
- prod_output.jsp
手順：WebプロジェクトへFaces JSPを追加する
Faces JSPファイルは、WebプロジェクトのWebContentsフォルダーの下に置きます。直下に置いた場合、URLは、コンテキスト・ルートの直下となります。サブフォルダーを付けると、コンテキストルートの後ろにフォルダー名を付けた形式となります。
ナビゲーター・ビューで「WebContents」フォルダーを右クリックし、メニューから「新規」 -> 「Faces JSPファイル」を選択します。
「新規Faces JSPファイル」ダイアログが表示されたら、ファイル名を指定して、「終了」ボタンを押します。
（ここでは、ファイル名に「prod_input.jsp」を指定しました。
追加されたJSPファイルがエディターで自動的にオープンされます。
Faces JSPファイルが追加されたら、それぞれのファイルの先頭に「商品番号入力」「商品情報詳細」と見出し1を追加します。
商品番号入力の編集画面で右クリックしてページのプロパティーを開き、ページ・タイトルを「商品番号入力」と変更します。
エディターのタブ部分をドラッグして並べて両方が表示されるようにしましょう。
それぞれのページに、それぞれ別の素材集のスタイルシートをドロップして、画面の見栄えが代わるようにしてください。
（画面の遷移がわかりやすいようにするためです）
4. ページデータを定義する
prod_input.jspファイルのエディターを選択（エディターのタブをクリックすると青くなる）して、ワークベンチの左中央に表示されている「ページ・データ」ビューを表示してください。
このビューは、アプリケーション（ページ）が実行中に保持されるデータを表示しています。
データにはスコープ（寿命）が3つあります。 リクエスト、セッション、アプリケーションです。リクエストが最も短く、次の画面を表示した時点で消えてしまいます。セッションは、ブラウザーを再起動するまで維持されます（タイムアウトもあります）。アプリケーションは、サーバー上のアプリケーションが稼働中は維持されます。
ここでは、セッション・スコープにデータを維持してみましょう。
ページ・データの「sessionScope」を右クリックし「セッション変数の追加」をクリックします。
変数名に「id」、タイプに「String」を指定します。
右側にある「...」ボタンをクリックして一覧から選択することもできます。
同様の手順で、変数名「message」、タイプ「String」も追加します。
次に、検索した結果を維持するためのクラスを追加します。
sessionScopeを右クリックし、メニューから「新規作成」 -> 「JavaBean」を選択します。
「管理Beanの追加」ダイアログが表示されます。
「新規」ボタンを押して、Beanを追加します。
名前に「product」、クラスに「com.yone.Product」（これは、ブラウズ・ボタンをクリックして選択したほうが無難）有効範囲に「session」を選択します。
「OK」ボタンをクリックします。
もとの画面に戻りますので、「OK」ボタンをクリックします。
これで、JavaBeanがページデータに追加されました。
図のようになっていることを確認してください。
5. 部品を配置する
では画面を作っていきましょう。
prod_input.jspのエディターを選択（エディターのタブをクリックすると青くなる）して、今度はワークベンチの右側にある「パレット・ビュー」を見てください。中に「Facesコンポーネント」というタブがあるはずですので、クリックして開きます（これをドロワー＝引き出しといいます）。
prod_input.jspのタイトルの下に「商品番号：」と入力し、その下にパレットのFacesコンポーネントから「入力」をドラッグしてドロップします。
次に、ページ・データのsessionScopeの下に表示されている「id」をドラッグして、先程追加した「入力」コンポーネントの上にドロップします。（正しい位置に来たところで、）「ここにドロップして"id"を制御"text1"にバインドします」と表示されます。
正しくバインドされると、入力フィールドの内側に｛id｝と表示されます。
入力フィールドを選択（斜線がかかります）して、右向き矢印キー（->）を2回押したあと、改行を入力します（2回おさないと、動作がおかしくなります）。
改行した位置にパレットのFacesコンポーネントの「コマンド - ボタン」をドラッグしてドロップします。
さらにその下に左側のページ・データから「message」をドラッグしてドロップします。エラー・メッセージを赤くしたければ、｛message」を選択した状態で、色ビューで赤色を選択することで設定できます。
以上で、入力ページの作成は終了です。
次に、商品情報詳細画面を作ります。
こちらは、id、name、priceをページデータ・ビューからドラッグしてドロップするだけです。
ワークベンチ右側に表示されているパレットのHTMLタグ・ドロワーから表をドロップし、組み合わせて画面を作ってください。
表にページ・データをドロップする際に「ドロップ操作の選択」というダイアログ・ボックスが表示されます。ここでは、表示するためにドロップするので、「出力コンポーネント」を選択します。
ナビゲーターからprod_input.jspをドラッグして、一番したにドロップし、リンクを追加します。これで、入力画面にもどれるようになります。
6. ナビゲーションを定義する
次にナビゲーションを定義します。
ナビゲーションとは、画面遷移順のことです。
ナビゲーションは「キーワード」と「次の画面」の組み合わせで定義していきます。ここでは、入力画面のボタンに、「success」なら出力画面へ、「failed」なら入力画面へ進むようにナビゲーションを定義します。
prod_input.jspのエディターを選択し、画面にはりつけたボタン（「実行依頼」と表示されている）をクリックして選択します。ワークベンチの左下にある「属性」ビューを表示し、ナビゲーション・タブをクリックして表示してください。
下にある「登録」ボタンをクリックします。
「ナビゲーション・ルール」の追加ダイアログが表示されたら、ページに「prod_output.jsp」を選択し、別名に「success」を指定します。
「OK」ボタンをクリックします。これで一覧に追加されます。
同様に「prod_input.jsp」へナビゲートするための「failed」を追加してください。
7. イベント処理をコーディングする
さぁ、最後のステップです。
ここで初めてプログラムを書きます（既存クラスは既存していたことにしてください）。既存クラスを呼び出すためのコードはたった1行で、あとはsessionScopeのページデータにアクセスすることと、戻り値としてキーワードを返すだけです。
さきほどの続きなら、prod_input.jspのボタンが選択されているはずですね（選択されてないなら、選択してください）。
ワークベンチの中央下にある「高速編集」というタブをクリックして表示したのち、一覧の「コマンド」をクリックしてください。これは、ボタンが押されたときに自動的に呼ばれるコードの断片を示しています。
このビューに表示されるreturn null; は必要ないので、削除し、以下のコードを入力してください。
try{
com.yone.Product p = com.yone.ProductFinder.find(
sessionScope.get("id").toString()
);
sessionScope.put("product",p);
sessionScope.put("message",null);
return "success";
} catch(com.yone.InvIdException e) {
sessionScope.put("message","IDが間違っています");
return "failed";
}
|
このコードは、
以下をやってみる。
- 与えられた「id」で検索する
- 見つかったらproductオブジェクトをsessionScopeに貼りつける
- メッセージをクリアする
- 「success」を返す
InvIdExceptionになったら、
ここでは、これをコピー＆ペーストすればいいと思いますが、入力支援を使いながら、効率良く入力が可能です。
これで開発は終わりです。
編集中のエディターをすべて閉じ、内容を保管してください。
8. 実行してみる
実行してみましょう。
ナビゲーター・ビューでprod_input.jspを右クリックしてメニューを表示し、「サーバーで実行」をクリックします。サーバーの選択はそのまま「終了」ボタンをクリックします（初めての場合、サーバーの準備などで若干時間がかかります）。
間違えた番号が入力されると・・・
正しい入力ならば・・・
たった数行のJavaコードで、ここまできちんと動作するWeb画面が完成しました。
参考文献
著者について  | | | 1987年に日本アイ・ビー・エム入社。メインフレームOS、ミドルウェアの障害対応、障害解析ソフトウェアの開発、ワークフローシステム開発、オブジェクト指向開発、Web開発など経験。2000年より、ソフトウェアのテクノロジーエバンジェリストとして活動中。 |
記事の評価
| 
