仮想フォームの使用方法

この記事では、NetBeans IDE 6.0 または 6.1 で仮想フォームを使用する方法について説明します。

目次

• サンプルのインストール
• 「仮想フォームを表示」ボタン
• 映画管理の概要
• 選択的処理の要件
• 仮想フォームの概要
• 送信される値の保持と破棄
• 「internalVirtualForm」プロパティー
• 「仮想フォーム」ダイアログ
• 「仮想フォームを構成」ダイアログ
• 仮想フォームと、変更時の自動送信
• 仮想フォームとページフラグメント
• 仮想フォームと標準のデータ表コンポーネント
• まとめ

このチュートリアルに従うには、次のソフトウェアとリソースが必要です。

* 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」を参照してください。

サンプルのインストール

注: NetBeans 6.0 または 6.1 を使用している場合は、「新規プロジェクト」ウィザードからサンプルアプリケーションを使用できます。「ファイル」>「新規プロジェクト」>「サンプル」>「Web」>「Visual JSF」>「映画管理」を選択してから手順 3 に進んでください。

1. 最初に、MovieAdmin.zip ファイルの内容を展開します。このファイルには、MovieAdmin と MoviesClassLibrary の 2 つのプロジェクトフォルダが含まれます。
2. IDE を起動し、プロジェクトをすべて終了して、MoviesClassLibrary プロジェクトを開きます。

3. MovieAdmin プロジェクトを開きます。

   注: ライブラリ参照を解決する必要があるので、Page 1.jsp にはエラーが表示されます。
4. 「プロジェクト」ウィンドウで「MovieAdmin」プロジェクトノードを右クリックし、「プロパティー」を選択します。
5. 「プロジェクトプロパティー」ダイアログの「カテゴリ」ツリーで「ライブラリ」を選択し、「プロジェクトを追加」ボタンをクリックします。
6. 「プロジェクトを追加」ダイアログで MoviesClassLibrary プロジェクトの場所まで移動し、MoviesClassLibrary を選択して「プロジェクト JAR ファイルを追加」ボタンをクリックします。
7. 「閉じる」をクリックします。
8. 「プロジェクト」ウィンドウで「MoviesClassLibrary」プロジェクトノードを右クリックし、ポップアップメニューから「構築」を選択します。
9. IDE を終了し、ふたたび IDE を開いて MoviesClassLibrary を MovieAdmin プロジェクトで使用できるようにします。

「仮想フォームを表示」ボタン

サンプルをインストールしたら、「プロジェクト」ウィンドウで「Page1.jsp」ノードをダブルクリックして Page1.jsp をビジュアルデザイナで開きます。タブの下のツールバーに、「仮想フォームを表示」ボタン を含む複数のボタンが表示されます。このボタンをクリックして、ページで使用されている仮想フォームを表示します。

映画管理の概要

映画管理のサンプルは、映画レンタル会社用の仮想の管理アプリケーションです。この会社では、映画の所蔵に関するデータをデータストアに保存しており、従業員は管理アプリケーションを使用してデータを変更できます。また、顧客が所蔵を閲覧できる外部 Web サイトも別にあります。外部 Web サイトにも同じデータストアを使用しています。

注: 実際のアプリケーションでは、リレーショナルデータベースやその他の外部データストアを使用します。この映画管理のサンプルでは、仮想フォームに重点を置いているので、データは単にセッション内のオブジェクトとして保存しています。

図 2 に、映画管理アプリケーションの Page1.jsp がブラウザに表示されているところを示します。従業員は「Current Genre」ドロップダウンリストから項目を選択して、特定のジャンルの映画を表示できます。表では、タイトル、年、長さ (分)、レーティング、画像 URL、および説明の各フィールドを編集できます。変更内容は、従業員が「Update」ボタンをクリックするか、表のページングコントロール (ある場合) を使用したときに保存されます。従業員がいずれかの行の「Remove」ボタンをクリックすると、映画を所蔵から削除できます。いずれかの行で「Preview」ボタンをクリックすると Preview.jsp が表示され、従業員は外部 Web サイトを閲覧している顧客に表示される映画の詳細ページをプレビューできます。表の下には、映画を所蔵に追加するための、一連のコントロールが表示されます。

ヒント: サンプルを実行して映画を所蔵に追加する場合は、プロジェクト内にある画像ファイルの相対パスではなく、マシン上の画像ファイルへのファイルベースの URL を入力できます。このショートカットを使用すると、これらの画像ファイルをプロジェクトに追加する手間が省略できます。

「Preview」ページでは、従業員は映画の詳細をプレビューできるだけでなく、プレビューしている映画のジャンルを変更することもできます。

選択的処理の要件

Page1.jsp には興味深い問題が 1 つあります。新しく現在のジャンルを選択するときに、「Current Genre」ドロップダウンリストの入力は処理し、ページ上のほかの入力は処理しないようにします。ほかの入力が処理された場合、これらの入力に変換または妥当性検査のエラーがあると、送信が拒否され、ジャンルが変更されません。これは望ましくない結果です。同様に、「Update」ボタンがクリックされたときに、表の中の入力は処理し、「Add Movie」セクションの入力は処理しないようにする必要があります。「Add Movie」セクションのフィールドに変換または妥当性検査のエラーがあった場合、送信は拒否され、表の中のフィールドは更新されません。これも望ましくありません。「Preview」、「Remove」、「Add」の各ボタンにも同様の選択的処理要件があります。

このように、ユーザーが特定の送信コンポーネントを操作したときに特定の入力を選択的に処理することは、Web アプリケーションで一般的かつ重要な要件です。入力の処理とは、入力の変換と妥当性検査を行い、入力に関連する値変更イベントを起動し、入力をバインド先 (コンポーネントがバインドされている場合) にマッピングすることです。入力コンポーネントは、テキストフィールド、テキスト領域、ドロップダウンリスト、ラジオボタンなど、ユーザー入力を受け取る任意のコンポーネントです。技術的には、入力コンポーネントは EditableValueHolder インタフェースを実装するコンポーネントです。送信コンポーネントは、Web ページを送信し、入力処理を開始する任意のコンポーネントです。これには、ボタンやリンク (ActionSource インタフェースを実装) だけでなく、「変更時に自動送信」機能がオンになっている入力コンポーネントも含まれます。したがって、コンポーネントが入力コンポーネントと送信コンポーネントの両方になることも可能です。映画管理アプリケーションの Page1.jsp にある「Current Genre」ドロップダウンリストはこのようなコンポーネントです。

Page1.jsp の完全な選択的処理の要件は次のとおりです。

• 「Current Genre」ドロップダウンリスト。新しい現在のジャンルが選択されたときは、「Current Genre」ドロップダウンリストで Web ページを自動送信し、ドロップダウンリストの入力を排他的に処理します。ページ上のほかの入力は無視します。
• 「Update」ボタン。「Update」ボタンがクリックされたときは、表の中のフィールドだけを処理し、「Add Movie」セクションのフィールドは処理しません。このとき、現在のジャンルの選択も変更されていないので処理の必要はありません。
• 「Preview」ボタンと「Remove」ボタン。「Preview」ボタンまたは「Remove」ボタンがクリックされたときはどの入力も処理しません。この場合は、表コンポーネントと DataProvider API によって、ボタンがクリックされた行にアクセスできるので、入力を処理する必要がありません。表の中のフィールドまたは「Add Movie」セクションに入力された内容は無視する必要があります。このときも、現在のジャンルの選択は変更されていないので処理の必要はありません。
• 「Add」ボタン。「Add」ボタンがクリックされたときは、「Add Movie」セクションの入力だけを処理します。

Page1.jsp には、このほかにも選択的処理の要件があります。表にページングコントロールが表示されている場合、これらが操作されたときは、表の中の入力だけを処理します。このようにしないと、表以外のフィールドの変換や妥当性検査のエラーが原因で送信が拒否されます。

十分に強力な選択的処理メカニズムがなければ、これらの要件を満たすことはできません。JavaServer Faces コンポーネントの「immediate」プロパティーを使用してある程度の選択的処理を行うことも可能ですが、この方法はこのような GUI の構築には不十分です。この GUI の問題は、ユーザーが使用する送信コンポーネントごとに選択的処理を行う必要がある入力コンポーネントのグループがあるので、グループが複数になることです。GUI 内の特定のコンポーネントの「immediate」プロパティーを設定して、1 つのグループのコンポーネントを選択的処理することは指定できますが、複数のグループはできません。

仮想フォームの概要

仮想フォームは、ページの入力コンポーネントおよび送信コンポーネントのグループを定義します。入力コンポーネントは仮想フォームに所属します。送信コンポーネントは仮想フォームを送信します。Web サイトのユーザーが仮想フォームを送信するコンポーネントを操作すると、仮想フォームの所属コンポーネントが処理され、ページ上の残りの入力は無視されます。

次の点に注意してください。

• 1 つの仮想フォームには、0 以上の所属コンポーネントと 1 つまたは複数の送信コンポーネントを含めることができます。
• 仮想フォームに所属できるのは入力コンポーネントだけです。送信コンポーネントとは Web ページを送信可能なコンポーネント (「変更時に自動送信」機能をオンにした入力コンポーネントを含む) であるため、このようなコンポーネントはすべて仮想フォームの送信コンポーネントになることができます。
• 仮想フォームに形状の制限はありません。所属コンポーネントと送信コンポーネントが視覚的に近くに配置されている必要はありません。
• 入力コンポーネントは複数の仮想フォームに所属できますが、送信コンポーネントは最大で 1 つの仮想フォームだけを送信できます。
• 入力コンポーネントは、仮想フォームの送信コンポーネントと、1 つまたは複数の仮想フォームの所属コンポーネントの両方になることができます。
• 送信コンポーネントが仮想フォームを送信しない場合、ユーザーがそのコンポーネントを操作したときは通常どおりリテラルフォームが送信されます。

1 つのグループだけを定義できる「immediate」プロパティーとは異なり、仮想フォームはページ内で任意の数を使用できるので、強力なソリューションとなります。また、「immediate」プロパティーは JavaServer Faces のライフサイクルを変更するので上級開発者に適しています。仮想フォームはライフサイクルを変更しないので、簡単に使用できます。

図 3 に、映画管理アプリケーションの Page1.jsp を IDE のビジュアルエディタで表示しているところを示します。仮想フォームは色分けされています。実線は所属を表し、点線は送信を表します。次の 4 つの仮想フォームを使用しています。

• genre。「Current Genre」ドロップダウンリストは genre 仮想フォーム (青) の所属コンポーネントと送信コンポーネントの両方です。この仮想フォームの所属コンポーネントと送信コンポーネントの両方であることを示すため、上と左のボーダーは実線で、下と右のボーダーは点線になっています。
• update。表内の、タイトル、年、長さ (分)、レーティング、画像 URL、説明の各フィールドが update 仮想フォーム (緑) に所属し、「Update」ボタンがこのフォームを送信します。
• preview/remove。「Preview」ボタンと「Remove」ボタンが preview/remove 仮想フォーム (赤) を送信します。このフォームに所属コンポーネントはありません。
• add。「Add Movie」セクションで、ジャンル、タイトル、年、長さ (分)、レーティング、画像 URL、説明の各フィールドがすべて add 仮想フォーム (黄) に所属し、「Add」ボタンがこのフォームを送信します。

注: Page1.jsp では、グループパネル内にメッセージリストコンポーネントが埋め込まれています。ビジュアルエディタでメッセージリストはボーダーが赤く、グループパネルはボーダーが細かい破線になっています。これらのコンポーネントのボーダーは仮想フォームに関係がないので、混同しないように注意してください。

重要なので繰り返しますが、仮想フォームには 1 つまたは複数の送信コンポーネントがあってもかまいませんが、1 つの送信コンポーネントで送信できる仮想フォームは最大で 1 つです。したがって、たとえば preview/remove 仮想フォームには「Preview」ボタンと「Remove」ボタンの 2 つの送信コンポーネントがあります。ただし、各ボタンはその 1 つの仮想フォームだけを送信し、複数の仮想フォームを送信することはできません。また、映画管理アプリケーションでは違いますが、入力コンポーネントが複数の仮想フォームに含まれてもかまわず、またこれは一般的なことです。さらに、Page1.jsp では、各仮想フォームに関連付けられているコンポーネントが視覚的に近くにありますが、これは仮想フォームメカニズムの要件ではありません。

Page1.jsp で使用している 4 つの仮想フォームは、このページの選択的処理の要件を次のように満たしています。

• genre。従業員が「Current Genre」ドロップダウンリスト内の選択項目を変更すると、genre 仮想フォームが送信されます。この仮想フォームの所属コンポーネントはドロップダウンリストだけなので、この入力だけが処理されます。ページ上のほかの入力は無視されます。その結果、ほかの入力に関連付けられているコンバータやバリデータによって送信が拒否されません。
• update。従業員が「Update」ボタンをクリックすると、update 仮想フォームが送信されます。表の中の入力だけが仮想フォームに所属しているので、これらの入力が処理され、ほかの入力は無視されます。その結果、「Add Movie」セクション内のフィールドに対するコンバータとバリデータによって送信が拒否されません。
• preview/remove。従業員が「Preview」ボタンまたは「Remove」ボタンをクリックすると、preview/remove 仮想フォームが送信されます。この仮想フォームには所属コンポーネントがないので、処理される入力はありません。前述のように、ボタンがクリックされるときに表コンポーネントと DataProvider API によって行にアクセスできるので、処理される入力はありません。その結果、ページ上のコンバータやバリデータによって送信が拒否されません。
• add。従業員が「Add」ボタンをクリックすると、add 仮想フォームが送信されます。「Add Movie」セクションの入力だけが仮想フォームに所属しているので、これらの入力が処理され、その他のすべての入力は無視されます。その結果、表の中のフィールドに対するコンバータやバリデータによって送信が拒否されません。

送信される値の保持と破棄

同じページを再表示させる仮想フォームがユーザーから送信された場合、仮想フォーム実装のデフォルトの動作では、所属していないコンポーネントの送信された値が維持および表示されます。これによって、処理されなかったユーザー入力が失われることを防ぎます。たとえば、ユーザーが「Add Movie」セクション内のフィールドにデータを入力したとします。その後、ユーザーは「Add」ボタンをクリックする前に「Current Genre」ドロップダウンの選択項目を変更するか、表の中のデータを変更して「Update」ボタンをクリックしたとします。この場合、「Add Movie」セクション内の入力フィールドが所属しない仮想フォームが送信されます。これらの入力フィールドにユーザーが入力した内容が失われないように、ページが再表示されるとき、これらの入力フィールドには、コンポーネントの値ではなく、送信された値が維持され、表示されます。送信された値とは、ユーザーが Web ページを送信するときに入力フィールドに入力されていた、未変換、未検査の入力値です。値とは、コンポーネントの現在の値です。

ただし、ユーザー操作によっては、デフォルトの動作をオーバーライドしたほうがいい場合もあります。このような場合は、所属していないコンポーネントの送信された値を維持および表示するのではなく、送信された値を明示的に破棄し、コンポーネントの値を表示します。たとえば、表の中の入力フィールドは genre 仮想フォームに所属していません。したがって、ユーザーが「Current Genre」ドロップダウンの選択項目を変更し、続いてページが再表示されるとき、デフォルトの動作では、表の中の入力フィールドの送信された値が維持および表示されます。すると、新しいジャンルではなく前のジャンルの映画が表に表示されます。これは望んでいる動作ではありません。したがって、送信された値を currentGenreDropDown_processValueChange メソッドで明示的に破棄することでデフォルトの動作をオーバーライドする必要があります。

// the genre virtual form, in which only the currentGenreDropDown
// participates, has been submitted
// make sure the input fields in the movies table do not
// retain their submitted values
form1.discardSubmittedValues("update");

ここで、update 仮想フォーム (表の中のすべての入力フィールド) の所属コンポーネントは、送信された値を明示的に破棄しています。その結果、それらの値が表示されます。つまり、表には、前のジャンルではなく新しいジャンルの映画が表示されます。

フォームコンポーネントには、所属していない入力フィールドの送信された値を破棄するための、次のメソッドがあります。

public void discardSubmittedValues(String virtualFormName)
public void discardSubmittedValue(EditableValueHolder inputField)

上記の 1 つ目のメソッドは仮想フォームの名前を受け付けます。指定された仮想フォームに属しているコンポーネントの送信された値を破棄します。仮想フォームは、送信された仮想フォーム以外を指定する必要があります。指定された仮想フォームが現在の要求中に送信された場合には、このメソッドは IllegalArgumentException をスローします。

上記の 2 つ目のメソッドは、単一の入力フィールドを EditableValueHolder オブジェクトとして受け付けます。指定された入力フィールドの送信された値を破棄します。指定する入力フィールドは所属していない必要があります。このメソッドは、送信された仮想フォームに指定された入力フィールドが所属する場合に IllegalArgumentException をスローします。

「internalVirtualForm」プロパティー

表コンポーネントには「internalVirtualForm」プロパティーがあり、デフォルトで false に設定されています。Page1.jsp の表では、このプロパティーを true に設定しています。これで、仮想フォームが表の内部で使用されます。その結果、ページングコントロールが使用された場合に、表の中の入力だけが処理されます。そして、表の外のフィールドに対するコンバータやバリデータによって送信が拒否されません。

「仮想フォーム」ダイアログ

NetBeans IDE では、仮想フォームの作成、削除、名前の変更、色の変更が可能です。これらの操作を行うには、ビジュアルエディタ自体 (コンポーネントではない) を右クリックし、仮想フォームのコンテキストメニュー項目を選択します。次の図に示すように「仮想フォーム」ダイアログが開きます。

このダイアログの使用方法は簡単です。仮想フォームに関連付けられている色を変更するには、色のセルをクリックし、リストから色を選択します。仮想フォームの名前を変更するには、名前のセルをダブルクリックし、名前を変更します。このダイアログで仮想フォームの作成と削除を行うこともできます。

「仮想フォームを構成」ダイアログ

「仮想フォーム」ダイアログでは、仮想フォームの作成、削除、名前の変更、色の変更が可能ですが、各仮想フォームの所属コンポーネントと送信コンポーネントは設定できません。これらの操作は「仮想フォームを構成」ダイアログで行います。「仮想フォームを構成」ダイアログを開くには、ビジュアルエディタまたは「アウトライン」ウィンドウで 1 つまたは複数のコンポーネントを選択し、そのコンポーネントを右クリックして「仮想フォームを構成」コンテキストメニュー項目を選択します。表示されるダイアログで、選択したコンポーネントが所属する仮想フォームを指定できます。選択したコンポーネントが送信する仮想フォームも指定できます。「仮想フォーム」ダイアログと同様に、「仮想フォームを構成」ダイアログでも、仮想フォームの作成、削除、名前の変更、色の変更が可能です。次の図に、Page1.jsp で「Add Movie」セクションの入力コンポーネントをすべて選択した場合の「仮想フォームを構成」ダイアログを示します。

仮想フォームと、変更時の自動送信

一般的な送信コンポーネントはボタンおよびリンクコンポーネントですが、ドロップダウンリストのような入力コンポーネントも送信コンポーネントとして扱うことができます。映画管理サンプルの Page1.jsp では、「Current Genre」ドロップダウンリストが genre 仮想フォームの所属コンポーネントと送信コンポーネントです。この設定は、「仮想フォームを構成」ダイアログを使用して行われています。ただし、ドロップダウンリストが実際に Web ページを送信するように設定するには、コンポーネントを右クリックして「変更時に自動送信」をオンにする必要もありました。ボタンとリンクコンポーネントは、それ自身が Web ページを送信するため「変更時に自動送信」オプションはありません。

仮想フォームとページフラグメント

NetBeans IDE では、ページフラグメント内の仮想フォームはサポートされていません。ページフラグメント内のコンポーネントの選択的処理を設定するには、コンポーネントの「immediate」プロパティーを true に設定します。このソリューションはいくつかのケースに使用できますが、1 つのグループのコンポーネントに対してのみ選択的処理を設定できるという制限があります。

仮想フォームと標準のデータ表コンポーネント

一般的なケースではありませんが、標準のデータ表コンポーネント (新しい表コンポーネントではない) 内に仮想フォームを送信するボタンまたはリンクが必要な場合は、ボタンまたはリンクの「onClick」(または「onclick」) プロパティーにスクリプトを追加する必要があります。「id」プロパティーが button1 であるボタンコンポーネントが標準のデータ表コンポーネントの中にあるとします。この場合、ボタンの「onClick」プロパティーに次のように追加する必要があります。

コード例 3:

common_leaveSubmitterTrace(this.form,'button1');

このスクリプトがないと、ボタンは仮想フォームを送信できません。これは、標準のデータ表コンポーネント (新しい表コンポーネントではない) の中のボタンとリンク (入力コンポーネントではない) だけに適用されます。

まとめ

この技術記事では、NetBeans IDE の新しい仮想フォームの機能について説明しました。仮想フォームは、ページ上の入力 (所属) コンポーネントと送信コンポーネントのグループを定義し、ユーザーが送信コンポーネントを操作したときに、所属コンポーネントが排他的に処理され、ページ上の残りの入力は無視されるようにします。次の点も学びました。

• 映画管理サンプルアプリケーションの選択的処理の要件と、仮想フォームがこれらの要件を満たすための強力で包括的なソリューションとなること。
• IDE の「仮想フォーム」ダイアログと「仮想フォームを構成」ダイアログでページの仮想フォームの構成を変更する方法。
• 入力コンポーネントの「変更時に自動送信」機能をオンにして仮想フォームを送信する方法。
• 仮想フォームは、JavaServer Faces のライフサイクルを変更しないので、「immediate」プロパティーよりも使用が容易。

関連項目

• Web アプリケーションの学習

ページの先頭へ