Visual Web JSF アプリケーションの開発について
このチュートリアルでは、NetBeans IDE 6.0 または 6.1 での Visual Web JSF アプリケーションの開発について簡単に説明します。Web アプリケーション開発の一般的な段階で、Visual Web JSF アプリケーションの機能と JavaServer Faces 1.2 (Woodstock) のコンポーネントを使用する方法を示します。
このチュートリアルは、特定の順序で学習を進める必要はありません。最初にざっと目を通してから、時間に余裕があれば各節に戻ることもできます。手順どおりのチュートリアルを実行する場合は、まずはじめに「JSF Web アプリケーションの開発」を試してください。
目次
このチュートリアルに従うには、次のソフトウェアとリソースが必要です。
| NetBeans IDE |
Web および Java EE の version 6.1 または 6.0 |
| Java Development Kit (JDK) |
version 6 または
version 5 |
JavaServer Faces コンポーネント /
Java EE プラットフォーム |
1.2 と Java EE 5* または
1.1 と J2EE 1.4
|
| GlassFish アプリケーションサーバー |
V2 |
| Travel データベース |
一部の節で必須 |
* NetBeans IDE の Java EE 5 機能を活用するためには、GlassFish アプリケーションサーバー V2 UR2 などの、Java EE 5 仕様に完全に準拠したアプリケーションサーバーを使用してください。別のサーバーを使用している場合は、「リリースノート」と「FAQ」で既知の問題やその回避策を確認してください。サポートされているサーバーと Java EE プラットフォームについては、「リリースノート」を参照してください。
NetBeans IDE 6.1 を使用している方へ
- NetBeans 6.1 でプロジェクトを作成すると新しいオプションが含まれますが、これらのオプションはデフォルトのままでかまいません。たとえば、「ライブラリの格納用に専用フォルダを使用」チェックボックスは選択しないままにします。
- NetBeans IDE 6.1 には、要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。
プロジェクトの開始
プロジェクトは、Web アプリケーションを開発するための作業環境です。NetBeans IDE で、アプリケーションサーバーとして GlassFish V2 以降を指定して Visual Web JSF アプリケーションプロジェクトを作成する場合、IDE は JavaServer Faces 1.2 のコンポーネントを使用する Java EE 5 に基づいた Web アプリケーションを作成できます。デフォルトでは、Web アプリケーションは、BluePrints プロジェクトの規則に準拠した Web アプリケーション用ディレクトリ構造内に作成されます。
試してみましょう
-
次のリストから、適切な方法で IDE を起動します。
- Windows、Solaris、および Linux。 NetBeans のデスクトップアイコンをダブルクリックします。
- Mac。 MacOS では、実行可能ファイルは
/Applications/NetBeans/ ディレクトリにインストールされています。このフォルダにある NetBeans アイコンをダブルクリックします。
-
Visual Web JSF アプリケーションプロジェクトを作成します。
- メインメニューから「ファイル」>「新規プロジェクト」を選択します。
- 「新規プロジェクト」ウィザードで、「Web」カテゴリおよび「Web アプリケーション」プロジェクトの種類を選択し、「次へ」をクリックします。
- プロジェクトに「GettingStarted」という名前を付けます。デフォルトのプロジェクトの場所を確認します。必要に応じて、別の場所を参照して選択することもできます。
NetBeans 6.1 ユーザーへの注意事項: NetBeans 6.1 では、プロジェクトを作成すると新しいオプションが含まれますが、これらのオプションはデフォルトのままでかまいません。たとえば、「ライブラリの格納用に専用フォルダを使用」チェックボックスは選択しないままにします。
-
サーバーを選択し、Java EE バージョンを選択します。
たとえば、デフォルトサーバーが GlassFish V2 で、Java EE 5 がデフォルトの Java EE のバージョンであるとします。
- 「次へ」をクリックします。
- 「フレームワーク」パネルで Visual Web JavaServer Faces フレームワークを選択します。
- 「完了」をクリックして、新規プロジェクトをデフォルトの場所または手順 c で選択した場所に作成します。
- 選択した (またはデフォルトの) プロジェクトフォルダにプロジェクトディレクトリが作成され、プロジェクトと同じ名前が付けられます。
-
「プロジェクト」ウィンドウを開きます。次の図に示すように、「プロジェクト」ウィンドウでは項目がカテゴリ別にまとめられています。各ノードを展開して、そのカテゴリに何が含まれているのかを確認します。
- 「Web ページ」ノードの下には「Page1.jsp」ノードがあります。このページはデフォルトで作成され、開始ページとなります。ノードの横にある矢印のアイコン
は、このページが開始ページであることを示します。別のページを開始ページにする場合は、そのページのノードを右クリックし、ポップアップメニューから「開始ページとして設定」を選択します。
-
「ファイル」タブをクリックするか、メインメニューから「ウィンドウ」>「ファイル」を選択すると、「ファイル」ウィンドウが前面に表示されます。このウィンドウでは、物理的な場所に基づいて項目が構成されています。各ノードを展開すると、その構造を確認できます。「ApplicationBean1.java」ノードや、その下のいくつかのノード (「Page1.java」など) の横にあるバッジ 
に注目してください。このバッジは、ファイルをコンパイルする必要があることを示しています。IDE では、プロジェクトを構築するとファイルが自動的にコンパイルされます。
- 上の図の「GettingStarted」>「src」>「java」>「gettingstarted」>「Page.java」ノードに注目してください。この Java クラスは、Page1.jsp ファイルのバッキング Bean です。IDE では、プロジェクトにページを追加すると、ページの
.jsp ファイルと .java ファイルが作成されます。.jsp ファイルと .java ファイルについては、次の節で詳しく説明します。
関連情報
- メインメニューから、「ヘルプ」>「ヘルプの目次」を選択してヘルプファイルを開きます。左側の「目次」区画で、「Web アプリケーション」>「Web アプリケーションについて」>「Web アプリケーションの手順」を選択します。
Web ページの作成
Visual Web JSF アプリケーションでは、HTML ページではなく、JSP (JavaServer Pages) テクノロジとページ Beans (バッキング Beans) を使用します。JSP ページは、ブラウザ (クライアント) に表示される HTML 応答をサーバーが生成するためのテンプレートです。ページ Bean には、HTML 応答を生成するときやユーザーがページを送信したあとにサーバーで実行されるロジックが含まれています。
Visual Web JSF アプリケーションに Web ページを追加すると、JSP ファイルと Java ソースファイルが作成されます。Web ページは、主にビジュアルデザイナと「プロパティー」ウィンドウを使って作成します。JSP コードと Java コードは、デザイン内容を実装するように自動的に変更されます。ほとんどの作業は、ビジュアルデザイナおよび「プロパティー」ウィンドウから行うことができます。
注: IDE で生成される JSP ページは JSP ドキュメントです。JSP ドキュメントは XML ドキュメントであるため、整形式でなければなりません。多くの JSP 要素は XML 構文に準拠していますが、コメント、宣言、指示、式、スクリプトレットなど、XML に準拠していない要素もあります。JSP ドキュメントの構文については、『JavaServer Pages Syntax Reference』を参照してください。
試してみましょう
注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。
-
次の図に示すように、「プロジェクト」ウィンドウで、「Web ページ」ノードを右クリックし、「新規」>「Visual Web JSF ページ」を選択します。
-
デフォルトのファイル名「Page2」のまま、「完了」をクリックします。次の図に示すように、編集領域にあるビジュアルデザイナで Page2 が開きます。
-
次の図に示すように、編集用ツールバーの「Java」ボタンをクリックすると、ページ Bean のソースコードが表示されます。編集領域に Java ソースが表示されている場合、「ナビゲータ」ウィンドウにはメンバーのフィールドとメソッドがすべて一覧表示されます。ページのソースコードには、アプリケーション Bean、セッション Bean、および要求 Bean にアクセスするためのメソッドが記述されています。この 3 種類の Bean については、このチュートリアルの「データの保存と受け渡し」の節を参照してください。
-
ソースには、ページが要求されてからページの描画が完了するまでの間の特定のライフサイクルイベント中に呼び出されるメソッドも記述されています。
ヒント: 「ナビゲータ」ウィンドウでメンバーをダブルクリックすると、ソースコードエディタが開き、そのメンバーの宣言部分にカーソルが移動します。また、「ナビゲータ」ウィンドウ内をクリックし、メンバーの名前の最初の数文字を入力すると、「高速検索」ダイアログが開きます。次の図に示すように、リスト内で希望するエントリが強調表示されるまで入力し続けます。そのあと Enter キーを押すと、ソースコードエディタが開き、そのメンバーの宣言部分に移動します。
-
次の図に示すように、編集用ツールバーの「JSP」ボタンをクリックすると、ページの JSP コードが表示されます。JSP ページで JSP ドキュメント構文がどのように使用されているかに注目してください。
注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。
-
編集用ツールバーの「デザイン」ボタンをクリックすると、ビジュアルデザイナに切り替わり、ページの構造が「ナビゲータ」ウィンドウに表示されます。「Page2」ノードの下のノードを開くと、次の図に示すようなノードが表示されます。JSP ファイル内のタグが、「ナビゲータ」ウィンドウではノードとして表示されます。
関連情報
Web ページへのコンポーネントの追加
Web ページのデザインは、「パレット」ウィンドウからコンポーネントをドラッグし、ビジュアルデザイナ内の Web ページにドロップして行います。次の図に、Page2 にボタン、テキストフィールド、メッセージ、ドロップダウンリスト、およびラジオボタングループの各コンポーネントを配置したところを示します。これらのコンポーネントはすべて「パレット」の「基本」セクションにあります。図中のコンポーネントは、プロパティーを変更することでカスタマイズしています。プロパティーについては、この節の後半で学習します。
注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。
注: 「パレット」に用意されたコンポーネントは、ビジュアルデザイナおよび「プロパティー」ウィンドウでプロパティーを使用できるよう、デザイン時 API に従って拡張された JSF (JavaServer Faces) コンポーネントです。IDE を使用して構築する Web アプリケーションでその他のコンポーネントを使用することはできますが、デザイン時 API の要件に従ってカスタマイズされていない限り、そのコンポーネントに対して IDE の対話式デザイン時機能を使用できません。Java EE バージョンが Java EE 5 に設定されていると、「パレット」には JSF 1.2 コンポーネントが表示されます。プロジェクトを作成するときに Java EE バージョンを 1.3 または 1.4 に設定すると、「パレット」には JSF 1.1 コンポーネントが表示されます。
使用するコンポーネントのほとんどは、「パレット」ウィンドウの「Woodstock 基本」、「Woodstock レイアウト」、および「Woodstock 複合」の各セクションにあります。よく使用するコンポーネントを機能ごとにグループ化して次の表に示します。
表 1: 入力コンポーネント
| コンポーネント |
説明 |
パレットのセクション |
| テキストフィールド |
単一行の入力フィールド。 |
(Woodstock) 基本 |
| テキスト領域 |
複数行の入力フィールド。 |
(Woodstock) 基本 |
| ドロップダウンリスト |
ドロップダウンメニュー (コンボボックス)。 |
(Woodstock) 基本 |
| リストボックス |
コンポーネントの設定に応じて、ユーザーが 1 つまたは複数の項目を選択できるリスト。 |
(Woodstock) 基本 |
| チェックボックス |
ユーザーが選択 (チェック) または選択解除できる単一ボックス。 |
(Woodstock) 基本 |
| ラジオボタン |
ユーザーが選択 (チェック) できる単一ラジオボタン。 |
(Woodstock) 基本 |
| パスワードフィールド |
ユーザーの入力を隠すため、入力文字を別の文字に置き換えて表示する入力フィールド。 |
(Woodstock) 基本 |
| ファイルアップロード |
テキスト入力フィールドと参照ボタンを含むコンポーネント。参照ボタンをクリックすると、アップロードするファイルを指定するためのファイル選択用ダイアログが表示されます。アプリケーションでは、ユーザーがページを送信したときに、指定したファイルがアップロードされます。
| (Woodstock) 基本 |
| 追加・削除 |
2 つのリスト (1 つは使用可能なオプション用、もう 1 つは選択済みのオプション用) と、リスト間でオプションを移動するためのボタン、および選択済みのオプションの順序を入れ替えるためのボタン。
| (Woodstock) 複合 |
| カレンダ |
選択した日付の入力フィールドおよびカレンダ
| (Woodstock) 基本 |
表 2: 表示コンポーネント
| コンポーネント |
説明 |
パレットのセクション |
| ラベル |
入力フィールドに関連付け、フォントスタイルを指定できるテキストフィールド。 |
(Woodstock) 基本 |
| 静的テキスト |
テキストを表示するフィールド。 |
(Woodstock) 基本 |
| 画像 |
インライン画像。 |
(Woodstock) 基本 |
| メッセージ |
特定のコンポーネントにリンクし、そのコンポーネントに関する妥当性検査エラーやその他のメッセージを表示するためのテキストフィールド。 |
(Woodstock) 基本 |
| メッセージグループ |
実行時エラーメッセージ、プログラムによって生成されたエラーメッセージ、およびページ上の複数のコンポーネントに関する妥当性検査エラーやその他のメッセージ (オプション) を表示するためのテキストフィールド。 |
(Woodstock) 基本 |
| ページ警告 |
警告コンポーネント (次の表を参照) と似ていますが、アイコンと情報を別のページで表示するために使用します。 |
(Woodstock) レイアウト |
| 警告 |
警告、エラー、または何らかのイベントの正常終了などを示すアイコンと情報テキストを表示します。 |
(Woodstock) 複合 |
| 非表示フィールド |
データを保持したり情報をサーバーに渡したりするのに使用できる不可視フィールド。 |
(Woodstock) 基本 |
| ページセパレータ |
ユーザーが選択した任意のページ幅にサイズを調整する水平行。 |
(Woodstock) レイアウト |
| フォーム |
フォームを追加するために使用されます。 |
(Woodstock) レイアウト |
| インラインヘルプ |
ページにインラインで表示される、短いヘルプ情報を提供します。 |
(Woodstock) 複合 |
| バブルヘルプ |
マウスを合わせたときに表示されます。遅延や、バブルを表示する時間を手動で設定できます。 |
(Woodstock) 複合 |
| アコーディオン |
Tab キーによる垂直方向の移動に使用します。 |
(Woodstock) 複合 |
表 3: グループ化コンポーネント
| コンポーネント |
説明 |
パレットのセクション |
| チェックボックスグループ |
2 つ以上のチェックボックスをグリッドレイアウトで表示します。 |
(Woodstock) 基本 |
| ラジオボタングループ |
2 つ以上のラジオボタンをグリッドレイアウトで表示し、一度に 1 つのボタンだけが選択できます。 |
(Woodstock) 基本 |
| 表、表行グループ、および表列 |
データベース表や配列などの複合データ型のデータを表示します。 |
(Woodstock) 基本 |
| グリッドパネル |
行と列のレイアウトでコンポーネントを配置します。 |
(Woodstock) レイアウト |
| グループパネル |
フローレイアウトモードで一連のコンポーネントをグループ化します。 |
(Woodstock) レイアウト |
| レイアウトパネル |
フローレイアウトモードまたはグリッドレイアウトモードで一連のコンポーネントをグループ化するときに使用します。 |
(Woodstock) レイアウト |
| タブセットおよびタブ |
同じページに異なるレイアウトを表示します。ナビゲーションツールとしても使用できます。 |
(Woodstock) レイアウト |
| ページフラグメントボックス |
複数のページに表示するコンポーネントをグループ化します。 |
(Woodstock) レイアウト |
| プロパティーシート、プロパティーシートセクション、およびプロパティー |
1 列のラベル付きコンポーネントを配置し、コンポーネントをセクションに分割します。 |
(Woodstock) レイアウト |
| パンくずリスト |
右山かっこ (>) で区切った一連のリンクコンポーネントを配置します。 |
(Woodstock) 複合 |
表 4: アクションコンポーネント
| コンポーネント |
説明 |
パレットのセクション |
| ボタン |
関連付けられているフォームを送信するボタン。 |
(Woodstock) 基本 |
| ハイパーリンク |
URL またはフォームを送信するテキストフィールド。 |
(Woodstock) 基本 |
| 画像ハイパーリンク |
URL またはフォームを送信する画像。 |
(Woodstock) 基本 |
| タブ |
タブセットまたはタブのサブコンポーネント。タブは必要に応じて URL またはフォームを送信できます。 |
(Woodstock) レイアウト |
| 共通タスク |
ユーザーがタスクを実行する Visual Web JSF ページへのリンク。 |
(Woodstock) 複合 |
「プロパティー」ウィンドウにあるコンポーネントのプロパティーシートを使用して、コンポーネントの外観や動作を変更したり、コンポーネントをデータにバインドしたり、コンポーネントをイベントハンドラに関連付けたりします。
リストボックスコンポーネントのプロパティーを次の図に示します。
試してみましょう
「Web ページの作成」節の「試してみましょう」の説明に従って作成した「Page2」を開くか、必要に応じてページを作成します。
「パレット」ウィンドウの「基本」セクションと「レイアウト」セクションからさまざまなコンポーネントをドラッグし、そのプロパティーをいろいろ変えてみます。たとえば、次の手順に従います。
注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。
- 「ボタン」コンポーネントをページにドラッグし、「ここをクリック!」と入力して、Enter キーを押します。
text」プロパティーの値が「ここをクリック!」になります。primary」プロパティーのチェックボックスを選択して、ボタンの外観がどのように変化するかを確認します。
注: IE 7 では、JSF 1.2 の「ボタン」コンポーネントの幅に影響する既知の問題があります。問題を回避するには、「ボタン」コンポーネントをレイアウトコンポーネント (グリッドパネル、グループパネル、またはレイアウトパネル) 内に配置します。レイアウトコンポーネントのサイズを変更すると、「ボタン」コンポーネントのサイズが自動的に変更されます。
- 「テキストフィールド」コンポーネントをページにドラッグします。次に、「ラベル」コンポーネントをページにドラッグし、「
名前:」と入力して Enter キーを押します。Ctrl-Shift キーを押しながら「ラベル」コンポーネントをクリックし、「テキストフィールド」コンポーネントまでドラッグしてからマウスボタンを離します。「ラベル」コンポーネントを選択し、for プロパティーが「テキストフィールド」コンポーネントの「id」に設定されたことを確認します。「labelLevel」プロパティーを「強 (1)」に設定します。
- 「テキストフィールド」の右側に「メッセージ」コンポーネントをドラッグします。Ctrl-Shift キーを押しながら「メッセージ」コンポーネントをクリックし、「テキストフィールド」コンポーネントまでドラッグします。「ラベル」コンポーネントの場合と同様に、「メッセージ」コンポーネントの「
for」プロパティーが、「テキストフィールド」コンポーネントの id に設定されます。
- 「ドロップダウンリスト」コンポーネントをページにドラッグし、「
label」プロパティーを「色」に設定します。ドロップダウンリストコンポーネントを右クリックし、「デフォルトオプションを設定」を選択して「オプションカスタマイザ」ダイアログを開きます。
- Tab キーを押して「表示」列の「項目 1」を編集モードにし、「
青」と入力します。Tab キーを 2 回押し、「項目 2」を「白」に変えます。Tab キーをさらに 2 回押し、「項目 3」を「緑」に変えます。「了解」をクリックします。変更内容が、ビジュアルデザイナでコンポーネントに反映されます。
-
同様の手順で、「青」、「白」、「赤」の 3 つの選択肢がある「ラジオボタングループ」コンポーネントを作成します。ただし、「オプションカスタマイザ」ダイアログはまだ閉じないでください。
「オプションカスタマイザ」ダイアログで「項目を選択」チェックボックスを選択し、「選択」列のいずれかのラジオボタンを選択して、その項目がデフォルトで選択されるようにします。「了解」をクリックして変更内容を適用し、「オプションカスタマイザ」ダイアログを閉じます。「プロパティー」ウィンドウで、「columns」プロパティーを「3」に設定して、ラジオボタンを縦方向ではなく横方向に並べます。
- ページの空白部分でページ背景を右クリックし、「ブラウザでプレビュー」を選択して、コンポーネントがブラウザでどのように描画されるかを確認します。
関連情報
ヘルプの表示
IDE には、IDE に関するヘルプ項目の含まれたヘルプビューアがあります。また、ウィンドウ、ダイアログ、またはパレットのコンポーネントにフォーカスがあるときに F1 キーを押すと、ヘルプビューアが開き、その項目に関する情報が表示されます。メインメニューから「ヘルプ」>「ヘルプの目次」を選択して、「Web アプリケーション」までスクロールすると、コンポーネントに関するヘルプなど、Visual Web JSF Pack のヘルプ項目にアクセスできます。
試してみましょう
- チェックボックスグループの「プロパティー」ウィンドウ内をクリックします。F1 キーを押して、「チェックボックスグループ」コンポーネントのプロパティーに関するトピックを表示します。
- 「パレット」の「基本」セクションで「テキストフィールド」コンポーネントのノードを選択します。F1 キーを押して、「テキストフィールド」コンポーネントに関するトピックを表示します。
Web アプリケーションの構築とテスト
プロジェクトをテストする準備が整ったら、F6 キーを押すか、メインメニューから「実行」>「主プロジェクトを実行」を選択します。IDE で次の処理が実行されます。
- 保存する必要のあるファイルが保存されます。
コンパイルする必要のあるファイルがコンパイルされます。
コンパイル中に問題が発生した場合は、関連するエラーメッセージが「出力」ウィンドウ (下図) に表示され、一連の構築・実行プロセスは中断されます。エラーメッセージ内のリンクをクリックすると、ソースコード内でコンパイルエラーの原因となった箇所に移動します。- アプリケーションサーバーが起動していない場合、自動的に起動されます。
アプリケーションをアプリケーションサーバーに配備します。
配備中に問題が発生した場合は、関連するエラーメッセージが「出力」ウィンドウに表示され、一連の構築・実行プロセスは中断されます。ブラウザが開き、配備されたアプリケーションの URL がブラウザに送信され、ブラウザに開始ページが表示されます。
注: 開始ページ以外のページにコンポーネントを追加した場合は、現時点では Web ブラウザに表示されません。アプリケーションの開始ページからほかのページへの移動方法については、後述の節の「試してみましょう」を参照してください。
大幅な変更を行った場合、複数の項目を削除した場合、または予期しない動作が発生する場合は、メインメニューから「構築」>「主プロジェクトの生成物を削除して構築」を選択します。これにより、プロジェクトの build ディレクトリと dist ディレクトリの内容が削除され、Web アプリケーションの配備が取り消され、再度アプリケーションの構築と配備が行われます。
試してみましょう
- プロジェクトが 2 ページ未満の場合は、「プロジェクト」ウィンドウで「Web ページ」ノードを右クリックし、「新規」>「Visual Web JSF ページ」を選択して新しいページを作成します。
- ビジュアルデザイナで開始ページ (緑の矢印 のあるページ) を開きます。
- 「ハイパーリンク」コンポーネントをページにドラッグし、「次のページ
- 「ハイパーリンク」コンポーネントの「プロパティー」ウィンドウで、「
url」プロパティーの省略符号ボタン (
) をクリックし、プロジェクト内の別のページを選択して「了解」をクリックします。「url」プロパティーが「/faces/<ページ名>.jsp」に設定されることに注目してください。
- F6 キーを押し、アプリケーションを構築して実行します。
- 構築プロセス中に「出力」ウィンドウに表示されるメッセージに注目してください。また、サーバーのログ出力がそのサーバーのタブに表示されることにも注目してください。
- IDE からブラウザに送信される URL を確認します。
- ブラウザに開始ページが表示されたら、「次のページ」リンクをクリックします。
-
IDE に戻り、「サービス」ウィンドウで、「サーバー」、そのサーバーのノードを順に展開し、そのあと「アプリケーション」>「Web アプリケーション」を展開して、次の図に示すようにプロジェクトのノードがあることを確認してください。
関連情報
- メインメニューから、「ヘルプ」>「ヘルプの目次」を選択してヘルプビューアを開きます。「目次」区画で、「Web アプリケーション」>「Web アプリケーションの作成」>「Web アプリケーションの作成について」を選択します。
Web ページの接続とユーザーアクションの処理
ユーザーが URL を入力するか、リンクをクリックするか、ボタンをクリックすると、ブラウザによって要求がサーバーに送信されます。サーバーでは、要求が JSP ページに対応付けられ、その JSP ページおよびそれに関連付けられているページ Bean を使って応答が表示されます。
ページナビゲーションは次のいずれかの方法で指定できます。
- 「ハイパーリンク」コンポーネントなどのリンクコンポーネントをページに追加したり、「ツリーノード」コンポーネントを「ツリー」コンポーネントに、「タブ」コンポーネントを「タブセット」コンポーネントに追加したりします。そのあと「
url」プロパティーを「/faces/<ページ名>.jsp」に設定します。「url」プロパティーをナビゲーションに使用すると、データが送信されません。Web アプリケーションがナビゲート先に移動するだけです。
- ページフローエディタを使ってアクションをページにマップし、ビジュアルデザイナおよび Java ソースエディタを使ってアクション処理メソッドを作成します。アクション処理メソッドをページナビゲーションに使用すると、フォームデータが送信および処理されてから、Web アプリケーションが指定されたナビゲート先へ移動します。
ページフローエディタにアクセスするには、ビジュアルデザイナ内のページの背景を右クリックし、「ページナビゲーション」を選択します。
ページフローエディタに、プロジェクト内のすべてのページのページアイコン 
が表示されます。ページフローエディタでページアイコンの + 要素をクリックすると、アイコンが拡大し、そのアクションコンポーネント (ボタン、ハイパーリンク、またはタブなどの、「action」プロパティーを持つコンポーネント) がすべて表示されます。各コンポーネントの横にはコネクタポートがあります。次の図では、ハイパーリンクのコネクタポートが鎖のようになり、ボタンが矢印を示しています。次の図に示すように、コネクタポートからページアイコンにドラッグして、そのアクションの要求と、その要求に対する応答として表示するページを対応付けます。マウスボタンを離すと、次の図で「nextPage」というラベルの付いた接続のように、その接続のビジュアル表現が追加されます。
注: ページが送信されると、Web アプリケーションでは変換と妥当性検査が行われてから、アクションメソッドが実行されます。変換または妥当性検査が失敗した場合は、アクションメソッドは呼び出されません。開発中はページに「メッセージグループ」コンポーネントを追加することによって、アクションメソッドが呼び出されない原因となる、予期しない変換または検査エラーを発見できます。
試してみましょう
注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。
- 「Page1」と「Page2」という 2 つのページを作成します。「Page1」を右クリックして「開始ページとして設定」を選択し、Page1 を開始ページにします。
- 「ハイパーリンク」コンポーネントを Page1 にドラッグし、「
次のページ
- 「ボタン」コンポーネントを Page2 にドラッグし、「
戻る」と入力して、Enter キーを押します。
-
「ボタン」コンポーネントをダブルクリックして、ボタンのアクションメソッドを表示します。
アクションメソッドが null を返すことを確認します。アクションメソッドが null を返すと、アプリケーションはページを再表示します。
- ツールバーの「デザイン」をクリックしてビジュアルデザイナに切り替えます。
- ビジュアルデザイナで、Page2 の背景を右クリックし、「ページナビゲーション」を選択します。
- ページフローエディタで、Page1.jsp のアイコンをクリックしてページのアイコンを拡大し、hyperlink1 コンポーネントのコネクタポートから Page2.jsp のアイコンまでリンクをドラッグします。
- case1 コネクタラベルをダブルクリックして編集モードに変更し、「
nextPage」と入力して Enter キーを押します。
- 同様の手順で、Page2.jsp のボタンから Page1.jsp へのコネクタを作成し、「
go」という名前を付けます。
- 編集用ツールバーの「XML」をクリックし、サーバーに配備される実際のマッピング XML を確認してからページフローエディタを閉じ、変更内容を保存するかどうかを確認するメッセージが表示されたら「保存」をクリックします。
-
Page2 で、「ボタン」コンポーネントをダブルクリックして、ボタンのアクションメソッドを表示します。
アクションメソッドが文字列 "go" を返すことを確認します。ページフローエディタで作成したマッピングで、Page2.jsp が "go" を返したら Page1.jsp を表示するようサーバーに指示しています。
- F6 キーを押してアプリケーションを実行し、ページ間の新しいナビゲーションを試します。
関連情報
- Web アプリケーションでのページの移動
- ナビゲーションエディタを開いて F1 キーを押すか、メインメニューから「ヘルプ」>「ヘルプの目次」を選択してヘルプビューアを開きます。そのあと「目次」区画で「Web アプリケーション」>「Web アプリケーションの作成と編集」>「ページ」>「ページフローエディタについて」を選択します。
Java コードの編集
IDE の Java エディタには、プログラミングプロセスを円滑にするための機能が数多くあり、このチュートリアルですべてを紹介することはできません。Java エディタウィンドウ内をクリックして F1 キーを押すと、このエディタのほとんどの機能についてのヘルプを取得できます。
次に、さらに役に立つ編集機能のいくつかを説明します。
-
コード補完。コード補完を使用すると、何文字か入力し、クラス、メソッド、変数などのリストから項目を選択するだけで、式が自動的に完成します。コード補完ボックスを表示するには、Ctrl-スペースキーを押します。次の図に示すように、コード補完ボックスは、パッケージ名、変数、またはメソッド呼び出しに続けてピリオドを入力したあとに操作を停止した場合にも表示されます。
- Javadoc。コード補完機能では、関連する Javadoc もすべて表示されます。また、型、フィールド、またはメソッドを右クリックし、「Javadoc を表示」を選択すると、その項目の Javadoc を表示できます (Javadoc がある場合)。使用可能な Javadoc を調べるには、「ヘルプ」>「Javadoc 参照」を選択します。Shift-F1 キーを押して、「Javadoc 索引検索」ツールを表示することもできます。
- インポートを修正。Ctrl-Shift-I を押すと、必要なインポート文を自動的に追加します。
エラー検出。コンパイルされないすべての文の左端には、赤のエラーボックスが表示されます。次の図に示すように、ボックスの上にマウスポインタを置くと、エラーの説明が表示されます。右マージンには、エラーストリップも表示されます。このストリップは、表示されているコード行だけでなく、ファイル全体を現しています。エラーストリップ内の赤い線はコードのエラーを示しています。赤い線をダブルクリックすると、誤りのある文にジャンプします。ファイルのコンパイル時、コンパイルエラーはすべて「出力」ウィンドウに表示されます。エラーメッセージをクリックすると、エラーを含むコードが Java エディタで表示されます。
Java エディタキーボードショートカット。次の表に示すように、簡単なキーの組み合わせで数多くの一般的な編集機能を実行できます。ショートカットについては、メインメニューから「ヘルプ」>「ヘルプの目次」を選択してヘルプビューアを開いたあと、「目次」区画で「IDE 基本」>「キーボードショートカット」>「エディタのショートカット」を選択してください。
| アクション |
ショートカット |
| コードを整形 |
Alt-Shift-F |
| 現在の行を削除 |
Ctrl-E |
| 強調表示された対応する括弧に挿入ポイントを移動 |
Ctrl-[ |
| 括弧で囲まれた部分を選択する。 |
Ctrl-Shift-[ |
コードテンプレート。コードテンプレートは、次の例に示すように、スペースキーを押すと完全な語句に展開される短い文字のグループです。すべてのコードテンプレートの一覧を表示するには、「ツール」>「オプション」 (Microsoft Windows システムの場合)、または「NetBeans」>「設定」 (Macintosh システムの場合) を選択したあと、「基本オプション」>「編集」>「エディタ」>「コードテンプレート」を選択し、「コードテンプレート」プロパティーの省略符号ボタン () をクリックします。たとえば、以下のような言語コードです。
| コード |
省略名 |
for (Iterator it = collection.iterator(); it.hasNext();)
{Object elem = (Object) it.next();} |
forc |
for (int i = 0; i < arr.length; i++) {} |
fori |
try {|} catch (Exception ex)
{log("Error Description", ex); } finally {} |
trycatch |
コードクリップ。Java エディタが開いているときは、「パレット」ウィンドウに、ソースファイルにドラッグ＆ドロップできる便利なコードクリップが数多くあります。アプリケーション Bean や要求 Bean のソースファイルなど、管理 Bean のソースファイル用のコードクリップが表示されません。
注: ツールバーで「JSP」をクリックして JSP エディタを開くと、「パレット」ウィンドウに JSP ファイルで使用できる JavaScript ツールチップが表示されます。- 高速検索。「ナビゲータ」ウィンドウ内をクリックし、メソッドまたはフィールドの名前の入力を始めると、「高速検索」ダイアログが表示され、リスト内で最初に一致するエントリが強調表示されます。Enter キーを押すと、ソースコードの Java エディタでそのエントリの宣言部分に移動します。
試してみましょう
注: 次の演習では、destroy メソッドのコードを入力します。このコードは、編集機能を試すために入力します。通常はこのメソッドにこのようなコードは入力しません。手順を完了したら、コードは削除してください。
- ページを作成するか、既存のページを開きます。「ハイパーリンク」コンポーネントをページにドロップします。編集用ツールバーの「Java」をクリックして、Java ソースコードを表示します。
- 左端を右クリックし、「行番号を表示」を選択します。Java ソースで Ctrl-G キーを押し、「行へ移動」ダイアログに「100」と入力し、Enter キーを押します。
- 「ナビゲータ」ウィンドウのタブをクリックしてから
destroy() をダブルクリックし、ソースコード内でこのメソッドに移動します。destroy() メソッドで「getSessionBean1().」と入力し、操作をいったん停止します。コード補完ボックスが表示されます。「d」と入力すると、ボックスのリストが「destroy()」に絞り込まれます。Enter キーを押して選択項目を確定します。Ctrl-スペースキーを押します。今度は「this.getH」と入力していったん停止すると、コード補完ボックスが表示されます。getHyperlink1() にカーソルを移動し、Enter キーを押します。ピリオドを入力して操作をいったん停止し、コード補完ボックスが表示されたら「set」と入力します。コード補完ボックスのリストが set で始まるすべてのメソッドに絞り込まれたら、「te」と入力してリストを「setText(Object text)」に絞り込み、Enter キーを押します。ピリオドのあとに setText() が挿入され、カーソルは括弧内に移動します。「こんにちは」と入力し、End キーを押して、「;」を入力します。
- 改行して「
serr」と入力し、Tab キーを押して省略名をSystem.err.println("") に展開します。行末のセミコロンを削除します。F9 キーを押してファイルをコンパイルします。「出力」ウィンドウに、エラーへのリンクが複数表示されます。ウィンドウに表示される最初のリンクをクリックします。エラーの原因となった文が表示されます。削除したセミコロンを戻します。
- 改行して「
getSes」と入力し、Ctrl-K キーを押します。文字列が、ソースコードの現在の行より上にある最初に一致した単語に置き換えられます。
- コードをクリーンアップするには、
destroy メソッド本体の最初の行にカーソルを置き、Ctrl-E キーを押して行を削除します。Ctrl-E キーを使って、メソッド本体の残りの行を削除します。
- 編集用ツールバーの各アイコンの上にマウスポインタを置いて、各機能を操作してみます。
- Java ソース内を右クリックし、ポップアップメニューから「コード折り畳み」を選択します。サブメニューにあるさまざまな操作を試してみます。
- 「パレット」からコードクリップをドラッグして、どのようなコードがあるのかを確認します。
関連情報
- メインメニューから「ヘルプ」>「ヘルプの目次」を選択してヘルプビューアを開いたあと、「目次」区画で「Java アプリケーション」>「ソースファイルの編集」>「ソースファイルの編集について」を選択します。
- メインメニューから「ヘルプ」>「ヘルプの目次」を選択してヘルプビューアを開いたあと、「目次」区画で「IDE 基本」>「キーボードショートカット」>「一般的なエディタのショートカット」を選択します。
- Java エディタユーザーズガイドの FAQ
ユーザー入力の処理
IDE には、入力の確認と書式設定を簡易化するためのバリデータオブジェクトとコンバータオブジェクトが用意されています。これらのオブジェクトは、「パレット」の対応するセクションにあります。
バリデータは、「テキストフィールド」コンポーネントなどの入力コンポーネントにバインドします。バインドするには、バリデータを入力コンポーネントの上にドロップします。たとえば、ビジュアルデザイナでページに「テキストフィールド」コンポーネントを追加したあと、「パレット」の「バリデータ」セクションから「長さバリデータ」をドラッグし、テキストフィールドの上にドロップします。
別の方法として、バリデータをページにドロップし、入力コンポーネントの「validator」プロパティーをそのバリデータオブジェクトに設定することもできます。たとえば、ページの空白部分に「Long 範囲バリデータ」をドロップします。これによって、「ナビゲータ」ウィンドウに longRangeValidator1 が追加されます。次に、ビジュアルデザイナで「テキストフィールド」コンポーネントなどの入力コンポーネントを選択し、その「validatorExpression」プロパティーのドロップダウンリストから「longRangeValidator1」を選択します。同じバリデータを複数のコンポーネントに対して使用できます。
コンバータについてもメカニズムは同じです。コンバータは、「静的テキスト」コンポーネントなどの出力コンポーネントに関連付けることもできます。コンポーネントをデータプロバイダのフィールドにバインドすると、変換が自動的に行われます。データプロバイダへのバインドについては、「データベースへの接続」の節で学習します。
バリデータの「プロパティー」ウィンドウを使用して、最小値と最大値、最小長と最大長などの妥当性検査の規則を設定します。同様に、コンバータの「プロパティー」ウィンドウを使用して、値の一致パターンや妥当性検査を行うために呼び出すメソッドなどの変換の規則を設定します。数値コンバータには特殊なダイアログがあり、数値コンバータをページまたは可視コンポーネントにはじめてドロップしたときに表示されます。
「パレット」の「基本」セクションには、変換エラー、妥当性検査エラー、および必須フィールドメッセージが自動的に表示される「メッセージ」コンポーネントと「メッセージグループ」コンポーネントがあります。「メッセージグループ」コンポーネントには、汎用エラーメッセージ、実行時エラー、およびすべてのコンポーネントのエラーメッセージ (任意) が表示されます。「メッセージ」コンポーネントには、バインド先コンポーネントのメッセージだけが表示されます。「メッセージ」コンポーネントを別のコンポーネントにバインドするには、「メッセージ」コンポーネントの「for」プロパティーを設定するか、Ctrl-Shift キーを押しながら「メッセージ」コンポーネントをクリックし、バインド先のコンポーネントまでドラッグします。
プログラムによってカスタムのエラーメッセージを「メッセージグループ」コンポーネントに送信するには、任意のページ Bean で error、warn、fatal、または info の各メソッドを使用します。このメソッドの詳細については、「ツール」>「Javadoc 索引検索」を選択し、ドロップダウンリストのテキストフィールドに「FacesBean」と入力して「検索」をクリックしてください。
試してみましょう
注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。
- ページを作成し、「ボタン」コンポーネントをページにドラッグします。ボタンのテキストを「
変換」に設定します。
- 「テキストフィールド」コンポーネントをページにドラッグします。「テキストフィールド」コンポーネントの「プロパティー」ウィンドウで、「
required」プロパティーのチェックボックスを選択します。
- 「テキストフィールド」コンポーネントの上に「ラベル」コンポーネントをドロップし、「
価格:」と入力して、Enter キーを押します。
- 「ラベル」コンポーネントの「プロパティー」ウィンドウで、「
for」プロパティーのドロップダウンリストから「textField1」を選択します。ビジュアルデザイナでラベルにアスタリスクが表示され、ラベルに関連付けられている「テキストフィールド」コンポーネントへの入力が必須であることを示します。
-
「パレット」で「バリデータ」セクションを展開します。「Double 範囲バリデータ」をドラッグし、「テキストフィールド」コンポーネントの上にドロップします。「ナビゲータ」ウィンドウで、新規に作成した「doubleRangeValidator1」ノードを選択します。次の図に示すように、バリデータの「プロパティー」ウィンドウで、「maximum」プロパティーを「10.0」、「minimum」プロパティーを「1.0」に設定します。
-
「パレット」で「コンバータ」セクションを展開します。「数値コンバータ」をドラッグし、「テキストフィールド」コンポーネントの上にドロップします。次の図に示すような「数値書式」ダイアログが表示されます。「種類」ドロップダウンリストから「通貨」を選択し、「ロケール」ドロップダウンリストから「英語 (アメリカ合衆国)」を選択して、「了解」をクリックします。
-
「メッセージ」コンポーネントをページに追加します。Ctrl-Shift キーを押しながらコンポーネントをクリックし、「テキストフィールド」コンポーネントまでドラッグします。
「メッセージ」コンポーネントの「for」プロパティーが、「テキストフィールド」コンポーネントの「id」に設定されます。
- 「メッセージグループ」コンポーネントをページに追加します。
-
このページを開始ページに設定し、アプリケーションを実行します。価格を入力しない、「1.5」を入力する、数値以外の値を入力する、また $10.00 を超える価格を入力して、ボタンをクリックしてみます。最後にテキストフィールドに「$1.50」と入力し、ボタンをクリックします。
数値書式に準拠していない値、および指定された範囲外の値がすべて拒否されます。「メッセージ」コンポーネントと「メッセージグループ」コンポーネントに表示されるさまざまなメッセージを確認します。
- 「メッセージグループ」コンポーネントの「
showGlobalOnly」のチェックボックスを選択して、同じように操作してみます。
関連情報
データの保存と受け渡し
情報を保存してほかのページで使用するには、アプリケーション Bean、セッション Bean、および要求 Bean を使用します。
- アプリケーション Bean は、「ドロップダウンリスト」コンポーネントの静的なオプションリストなど、すべてのユーザーセッションに適用される情報に使用します。
- セッション Bean は、ユーザーのログイン名など、ユーザーのセッション中にほかのページで使用する情報を保存するために使用します。
-
次のページで使用するためだけに情報を保存する場合は、要求 Bean を使用します。
要求が終了すると、要求 Bean に格納した値は削除されます。「要求」とはクライアントからサーバまでの HTTP 要求の、単一伝送とそれに対応する応答であり、その応答は別のページになることもあります。多くの場合、要求はボタンやリンクのクリックで開始し、それに対する応答として HTML ページが表示されて終了します。
注: 要求 Bean がインスタンス化されるのは、要求を開始するページで値が要求 Bean のプロパティーに保存されている場合だけです。たとえば、このあとで説明するように、入力コンポーネントが要求 Bean のプロパティーにバインドされている場合にインスタンス化されます。
警告: ナビゲーション規則の <navigation-case> 要素内に <redirect> 要素を含めた場合は、要求 Bean を使用できません。これらの規則は、ページフローエディタで「ソース」ボタンをクリックすると表示されます。ページが送信されると、後続のページが要求 Bean に格納された値を使用する前に <redirect> 要素がページをリダイレクトして要求を終了します。
注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。
セッション Bean にプロパティーを追加する
「ナビゲータ」ウィンドウで、「SessionBean1」ノードをダブルクリックします。
Java エディタで SessionBean1.java が開きます。- public class SessionBean1 extends AbstractSessionBean の下に、「
answer」プロパティーを追加します。
- 必要に応じてインポートを修正します。
-
エディタ内を右クリックし、「リファクタリング」>「フィールドをカプセル化」を選択します。結果ダイアログで、プロパティーが読み取り専用の場合は取得メソッドを作成し、プロパティーが読み取り/書き込みの場合は取得メソッドと設定メソッドの両方を作成します。
プロパティーは「ナビゲータ」ウィンドウの「SessionBean1」の下にサブノードとして表示されますが、通常はすぐには表示されません。
要求 Bean やアプリケーション Bean にプロパティーを追加する場合も、同様の手順に従います。詳細については、FAQ「How do I add properties to managed beans in NetBeans IDE ?」を参照してください。
注: ページ Bean (各ページに対して IDE で作成されるバッキング Bean) にプロパティーを追加することもできます。ページ Bean にプロパティーを追加するには、ページの Java コードを開き、プロパティー宣言をコンストラクタ public class Page1 extends AbstractPageBean に追加して、前述のようにフィールドをカプセル化します。ページ Bean がインスタンス化されると、ページ Bean のプロパティー値が失われます。たとえば、ページを再表示する「ボタン」コンポーネントをユーザーがクリックすると (つまりアクションメソッドが null を返すと)、そのページ Bean の新しいインスタンスが作成され、ページ Bean のプロパティー値は再初期化されます。ポストバックに値を渡す場合は「非表示フィールド」コンポーネントを使用します。
コンポーネントを Bean のプロパティーに関連付けるには、コンポーネントを右クリックし、「データにバインド」を選択します。次の図に示すように、「データにバインド」ダイアログで、「オブジェクトにバインド」タブを選択し、Bean のプロパティーを選択します。
注: ほとんどのコンポーネントでは、ポップアップメニューに「プロパティーのバインド」と「データにバインド」という 2 つのバインドアクションが表示されます。「プロパティーのバインド」ダイアログでは、コンポーネントの任意のプロパティーを管理 Bean のプロパティーまたはデータプロバイダのフィールドにバインドできます。「データにバインド」ダイアログは、コンポーネントの値を保持するプロパティーを管理 Bean のプロパティーまたはデータプロバイダのフィールドにバインドするためのショートカットになっています。「データプロバイダにバインド」タブを使用すると、ページまたは管理 Bean に追加した任意のデータプロバイダにバインドできます。「オブジェクトにバインド」タブを使用すると、ページのプロパティーまたは管理 Bean のプロパティーにバインドできます。
試してみましょう
-
RequestBean1.java にプロパティーを追加します。プロパティーの名前を parm にし、String に設定してユーザーが読み取り/書き込みアクセスできるようにします。
新しく追加されたプロパティーが「ナビゲータ」ウィンドウに表示されないことがあります。プロパティーを表示するには、ビジュアルデザイナ内を右クリックし、ポップアップメニューから「再表示」を選択します。次の手順のように、RequestBean1 ソースファイルを開いて保存し、プロパティーを表示することもできます。
- ファイルを閉じて保存します。
- 「ボタン」コンポーネントと「テキストフィールド」コンポーネントを含む、「First」という名前のページを作成します。
- 「テキストフィールド」コンポーネントを右クリックし、ポップアップメニューから「データにバインド」を選択します。「オブジェクトにバインド」タブをクリックし、「RequestBean1」>「parm」を選択して、「了解」をクリックします。
- 「Next」という名前のページを作成します。「ボタン」コンポーネントと「静的テキスト」コンポーネントを追加します。
- First ページの「テキストフィールド」コンポーネントの場合と同じ手順で、Next ページの「静的テキスト」コンポーネントを「RequestBean1」>「parm」にバインドします。
- ページの背景を右クリックし、ポップアップメニューから「ページナビゲーション」を選択します。
- ページフローエディタで、First ページの「ボタン」コンポーネントから Next ページへのコネクタを作成します。Next ページの「ボタン」コンポーネントはそのままにします。ボタンがクリックされた時に、Next ページ自体が再表示されるようにするためです。
- First.jsp を開始ページに設定し、アプリケーションを実行します。値を入力し、ボタンをクリックします。First ページで入力した値が Next ページに表示されます。バックグラウンドでは、RequestBean1 がインスタンス化され、「テキストフィールド」コンポーネントの値が「parm」プロパティーに保存されます。次に、「parm」プロパティーの値が応答 (Next ページの HTML) のために取得されます。応答が表示されたあと、RequestBean1 インスタンスが破棄されます。
- Next ページのボタンをクリックして、Next ページを再表示します。「静的テキスト」コンポーネントに値が表示されなくなります。これは、値が格納された RequestBean1 インスタンスの存続期間が、要求の開始から終了まで、すなわち First ページが送信されてから Next ページの HTML がクライアントに返されるまでの間に限られるためです。
関連情報
データベースへの接続
次の図に示すように、「サービス」ウィンドウには、IDE に登録されたすべてのデータベースを示す「データベース」ノードがあります。NetBeans IDE には、このチュートリアルのこれ以降で使用するサンプルの TRAVEL データベースが用意されています。
プロジェクトからデータベースにアクセスするには、最初に IDE をデータベースに接続する必要があります。これは、IDE を起動し、データベースに接続するプロジェクトを開くたびに行う必要があります。
データベースのバッジが壊れているような表示 
で、データベースのノードを展開できない場合は、IDE がデータベースに接続されていません。TRAVEL データベースを接続するには、「サービス」ウィンドウでデータベースノードを右クリックし、ポップアップメニューから「接続」を選択します。「接続」ダイアログが表示された場合は、「パスワード」に「travel」と入力し、「セッション中はパスワードを保存」を選択します。
既存のプロジェクトを開いたときに、ビジュアルデザイナにエラー画面が表示されることがあります。通常、これはビジュアルデザイナがデータベースから情報を取得する必要があるが、IDE がデータベースに接続されていないことが原因です。データベースサーバーに接続し、エラー画面の「続行」ボタンをクリックすると問題が解決するはずです。
ページをデータベース表に関連付けるには、データソースセクションから表をドラッグし、コンポーネントまたはページにドロップします。次の図に示すように、この操作を行うと、データプロバイダがページに追加され、次の図に示すように、行セットが SessionBean1 クラスに追加されます。
行セットオブジェクトでデータベースに接続し、クエリーが実行され、結果セットが管理されます。データプロバイダオブジェクトは、データベース表、ArrayList オブジェクト、エンタープライズ JavaBeans オブジェクトなどのさまざまな複合データにアクセスするための共通のインタフェースです。一般に、行セットオブジェクトを操作するのは、クエリーのパラメータを設定するときだけです。その他のほとんどの場合は、データプロバイダオブジェクトを使ってデータのアクセスや操作を行います。
データプロバイダをプロジェクトに追加したあとは、コンポーネントを右クリックして「データにバインド」を選択することで、コンポーネントをデータプロバイダにバインドできます。「データにバインド」ダイアログで、「データプロバイダにバインド」タブをクリックして、このタブを前面に表示します。「<コンポーネント ID> にバインドするデータプロバイダを選択」ドロップダウンリストには、プロジェクトのすべてのデータプロバイダが表示されます。このリストから、コンポーネントにバインドするデータプロバイダを選択します。データプロバイダを選択したら、コンポーネントにバインドする適切なデータ列を選択します。「ドロップダウンリスト」コンポーネントなどの一部のコンポーネントは、値フィールドと表示フィールドの両方を選択する必要があります。
次の図に示すように、データを取得するための SQL クエリーを定義するには、クエリーエディタを使用します。行セットオブジェクトを介してこのエディタにアクセスできます。
試してみましょう
- ページを作成し、それを開始ページに設定して、「リストボックス」コンポーネントをドロップします。
- 「サービス」ウィンドウで、「データベース」を展開し、TRAVEL データベースの jdbc ノードを展開して、「表」ノードを展開します。
-
TRIPTYPE ノードをページにドラッグします。
注: TRAVEL データベースのバッジが壊れていて、データベースのノードを展開できない場合は、IDE がデータベースに接続されていません。TRAVEL データベースを接続するには、「サービス」ウィンドウでデータベースノードを右クリックし、ポップアップメニューから「接続」を選択します。「接続」ダイアログが表示された場合は、「パスワード」に「travel」と入力し、「セッション中はパスワードを保存」を選択して、「了解」をクリックします。
- 「リストボックス」コンポーネントを右クリックし、ポップアップメニューから「データにバインド」を選択します。
- 「データにバインド」ダイアログで、「データプロバイダにバインド」タブをクリックし、「データプロバイダを選択」ドロップダウンリストで「tripTypeDataProvider」が選択されていることを確認します。
- 「値フィールド」を「TRIPTYPE.TRIPTYPEID」(デフォルト) に設定し、「表示フィールド」を「TRIPTYPE.DESCRIPTION」に設定します。「閉じる」をクリックします。
- アプリケーションを実行して、表のデータがリストボックスに表示されていることを確認します。
- 「ナビゲータ」ウィンドウで「SessionBean1」を展開し、「triptypeRowSet」ノードをダブルクリックしてクエリーエディタを開きます。グリッドパネルの「DESCRIPTION」行で、「ソート方法」列のフィールドをクリックし、ドロップダウンリストから「昇順」を選択します。
- クエリーエディタを閉じるには、jdbc:derby://localhost:1527/travel のようにラベル付けされたクエリーエディタのタブの X をクリックして、再度プログラムを実行します。項目がアルファベット順に表示されます。
-
(省略可能) ページの Java ソースコードにある _init メソッド内で、データプロバイダを行セットに関連付けるコードを確認します。このメソッドはデフォルトで折り畳まれています。コードを展開するには、左端に表示されるコード折り畳みボックスをクリックします。
「プロジェクト」ウィンドウで「ソースパッケージ」>「gettingstarted」>「SessionBean1」ノードをダブルクリックして、セッション Bean の Java ソースコードを表示します。セッション Bean の _init メソッド内で、行セットのコードでクエリーがどのように実装されているかを確認します。
関連情報
- Web アプリケーションの開発
- データバウンドコンポーネント.
- メインメニューから「ヘルプ」>「ヘルプの目次」を選択してヘルプビューアを開き、「目次」区画で「Web アプリケーション」>「Web アプリケーションの作成」>「データへのコンポーネントのバインド」を展開してこの節の下の内容を読みます。
Web アプリケーションのデバッグ
次の図に示すように、IDE にはプログラムの問題の追跡に使用できるデバッガが組み込まれています。このデバッガを使って、ブレークポイントやウォッチポイントの設定、コードのステップ実行、およびカーソルが置かれているコード文までの実行を行うことができます。
ブレークポイントを設定するには、Java エディタでページの左端をクリックします。ウォッチポイントを設定するには、変数または式を右クリックし、「新規ウォッチポイント」を選択します。デバッガを実行するには、メインメニューから「実行」>「主プロジェクトをデバッグ」を選択するか、「実行」>「カーソルまで実行」を選択します。
ヒント: 問題の診断と解決に使用できるその他の機能をいくつか次に示します。
- クライアントサーバー通信を監視し、HTTP 要求を再実行するには、HTTP モニターを使用します。ページに複数の入力フィールドがあり、すべてのフィールドに再入力せずに HTTP 要求を再作成したい場合などは、要求を再実行すると便利です。
- コンポーネント内に診断メッセージを表示するには、「メッセージグループ」コンポーネントをページに追加し、
error、warn、fatal、または info の各メソッドを使用します。
log メソッドを使用すると、サーバーログに診断メッセージを送信できます。
試してみましょう
注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。
- 新しいページを作成するか、既存のページを再利用して、そのページを開始ページに設定します。「静的テキスト」コンポーネントを追加し、その「
text」プロパティーを「こんにちは」、「id」プロパティーを「helloText」に設定します。
-
「ボタン」コンポーネントを追加します。「ボタン」コンポーネントをダブルクリックして、アクションメソッド (button1_action) を表示し、メソッドの本体を次のコードに置き換えます。
| コード例 1: button1_action メソッド |
String oldString = (String) this.helloText.getText();
this.helloText.setText("さようなら");
String newString = (String) this.helloText.getText();
return null;
|
Alt-Shift-F キーを押して、コードを再フォーマットできます。
oldString を右クリックし、「新規ウォッチポイント」を選択して、「了解」をクリックします。newString についても同じ操作を行います。
IDE の最下部に「ウォッチポイント」タブウィンドウが開き、ウォッチポイントが設定されている各式がウィンドウに表示されます。 左端の部分をクリックして、メソッド本体の最初の文にブレークポイントを設定します。
クリックした場所にピンク色のボックスが表示され、選択したコードの行全体の背景がピンク色になります。
- メインメニューから「実行」>「主プロジェクトをデバッグ」を選択します。
- Web ブラウザにページが表示されたら、ボタンをクリックします。デバッガが
button1_action メソッドで停止したら、「デバッガ」ウィンドウの「ウォッチポイント」タブをクリックして、newString と oldString の現在の値を確認します。
- メインメニューから「実行」>「ステップオーバー」を選択するか、ツールバーの「ステップオーバー」ボタン
をクリックします。「ウォッチポイント」タブを確認します。コードをもう 2 回ステップオーバーして、「ウォッチポイント」タブの「値」列を確認します。
- 「局所変数」タブと「呼び出しスタック」タブを確認します。
- 「実行」>「デバッガセッションを終了」を選択してデバッガセッションを終了します。
関連情報
- メインメニューから「ヘルプ」>「ヘルプの目次」を選択してヘルプビューアを開いたあと、「目次」区画で「Java アプリケーション」>「アプリケーションのデバッグ」を選択して、デバッグについてのトピックを読みます。
- メインメニューから「ヘルプ」>「ヘルプの目次」を選択してヘルプビューアを開いたあと、「目次」区画で「IDE 基本」>「サーバーとデータベース」>「HTTP 監視」>「HTTP 監視について」を選択します。
- 「NetBeans IDE Tutorial for Web Applications」の「Running and Monitoring the Application」の節
まとめ
- Web アプリケーションを構築するには、まず Visual Web JSF Application プロジェクトを作成します。
- 「プロジェクト」ウィンドウで「Web ページ」ノードを右クリックし、「新規」>「Visual Web JSF ページ」を選択してページを追加します。
- ページをデザインするには、「パレット」からビジュアルデザイナ内のページにコンポーネントをドラッグします。
- アプリケーションを保存、構築、配備、および実行するには、メインツールバーの「主プロジェクトを実行」ボタン
をクリックします。
- ページナビゲーションを指定するには、ページフローエディタを使用します。また、リンクコンポーネントをページに追加し、その「
url」プロパティーの値を設定することもできます
- 書式設定と妥当性検査の規則を指定するには、バリデータオブジェクトとコンバータオブジェクトをコンポーネントにドロップします。
- 実行時エラーメッセージを表示するには、「メッセージ」コンポーネントと「メッセージグループ」コンポーネントを使用します。
- ページ間で値の保存と受け渡しを行うには、RequestBean1、SessionBean1、および ApplicationBean1 の各クラスのプロパティーを使用します。
- データベース表のデータプロバイダオブジェクトと関連する行セットを作成するには、「サービス」ウィンドウの「データベース」セクションからページまたはそのいずれかのコンポーネントに表をドラッグします。
- コンポーネントをデータプロバイダのフィールドや Bean のプロパティーにバインドするには、「データにバインド」メニュー項目を使用します。
- 行セットオブジェクトへの入力を行う SQL クエリーを変更するには、行セットに対してクエリーエディタを開きます。
- 実行時の問題を診断するには、デバッガ、HTTP モニター、サーバーログ、および「メッセージグループ」コンポーネントを使用します。
関連項目
更新日: 2008 年 4 月 15 日
