Faces (JSF) の開発

動的 Web アプリケーションを作成するために使用できる Web テクノロジーはいくつかありますが、JavaServer Faces では、フォームをベースとするアプリケーションを容易に作成する機能が提供されます。いくつかのビューにより、JavaServer Faces テクノロジーを簡単に Web アプリケーションに実装することができます。 「ページ・データ」ビュー (定義済みのデータ・ソースを表示)、 「パレット」ビューの「拡張 Faces コンポーネント」ドロワー、「標準 Faces コンポーネント」ドロワー、および「Faces Client コンポーネント」ドロワー (ユーザー・インターフェース (UI) コンポーネントの追加や、そのページへのデータ・ソースの定義が簡単に行える)、 および「パレット」ビューの「データ」ドロワー (新規データ・ソースを定義したり、JavaBeans™ などのデータ・コンポーネントや関連レコード・リストをページにドラッグしたりできる) があります。
注: 一部の Faces Client コンポーネントおよびクライアント・データの使用は推奨されません。
以下については、使用を推奨しません。
  • クライアント・データおよびその関連ツール (「クライアント・データ」ビューなど)
  • Faces Client コンポーネント
    • <odc:dataGrid> (データ・グリッド)
    • <odc:webService> (Web サービス)
    • <odc:clientData>
    • <odc:clientBinder>

JSF アプリケーションを作成する手順は、次のとおりです。

  1. 動的 Web プロジェクトを作成する。 Web プロジェクトは、すべての Web アプリケーション・リソースのコンテナーです。 (Faces JSP ファイルは、J2EE 1.3 または J2EE 1.4 動的 Web プロジェクト内にのみ収容できます。)
    1. 「プロジェクト・エクスプローラー」ビューで右クリックし、「新規」 > 「動的 Web プロジェクト」を選択する。「新規動的 Web プロジェクト」ウィザードが開きます。
    2. 「プロジェクト名」フィールドで、Web プロジェクトの名前を入力する。
    3. ドロップダウン・リストから「ターゲット・ランタイム」を選択する。
    4. 「構成」ドロップダウン・リストで、「Faces プロジェクト」を選択する。
      注: 「Faces プロジェクト」オプションが表示されていない場合は、「次へ」をクリックします。ウィザードの「プロジェクト・ファセット」ページで、「基本 Faces サポート」および「拡張 Faces コンポーネント」プロジェクト・ファセットを選択します。ウィザードで、他の必須の依存ファセットを選択するよう、プロンプトが出ます。 拡張 Faces コンポーネントにはすべての hx タグが含まれます。
    5. ウィザードの説明に従ってください。
    Web プロジェクトに Faces リソースを追加する場合は、Faces ツールが自動的に使用可能にされます。
  2. そのプロジェクトに Faces JSP ファイルを作成する。 JSF 使用可能化 JSP ファイルは、動的 Web プロジェクト内の Web ページになります。
  3. データ・コンポーネントを JSP ファイルに追加する。 「パレット」ビューの「データ」ドロワーからコンポーネントを Web ページへドラッグする。 Java™ Beans や Web サービスのような一般的なデータ・コンポーネントを追加することも、 関連データベース・レコードを追加することもできます。
    • 操作可能な関連レコード・コンポーネントとして、次の 2 つがあります。
      • 単一の関連レコード : このコンポーネントは、 一般的には、単一の関連レコードを戻し、レコードのプロパティーが、 入力コンポーネントまたは出力コンポーネントにバインドされます。
      • 関連レコード・リスト : このコンポーネントは関連レコードのリストを戻し、 データ・テーブルまたはその他のコンポーネントにバインドすることができます。 さらに、JavaBean 配列から複数要素を表示し、JavaBean 配列にバインドすることもできます。
      関連レコードおよび関連レコード・リストを使用する利点は、 リレーショナル・データベースから情報を検索、作成、更新、または削除可能であることや、 この情報をオプションでバインドし、エンド・ユーザーに対して表示できることです。
    • Java Beans や Web サービスを使用したい場合は、 パレット上の「ページ・データ」ビューや「データ」ドロワーからこれらの項目をドラッグします。
    デフォルトでは、パレットからデータ・コンポーネントを追加すると、 次の 2 つのことが起こります。
    • データ・ソースが定義される (さらに、「ページ・データ」ビューに表示される)。
    • 「データ・コントロールの追加」または「入出力コントロールの追加 (Add input/output controls)」が選択された場合に、適切な Faces コンポーネントがページに追加され、定義済みのデータ・ソースと一緒に使用される。

      こうした Faces コンポーネントは、定義済みデータ・ソースにバインドされます。例えば、 関連レコード・リストが使用される場合は、データ・テーブルが Web ページに追加されます。 関連レコードが使用される場合は、コンポーネントのテーブルが Web ページに追加されます。 関連レコードの各フィールドは、テーブル内の行として示されます。 各行に収められるコンポーネントは、追加されるデータの型や、Web ページ内での 関連レコードの使用方法 (つまり、作成用、更新用、または表示用のいずれであるか) に 応じて決まります。

  4. ページの設計を続行するには、他の JSF コンポーネントをパレットからページへドラッグする。 入力フィールド、コマンド・ボタン、ハイパーリンク、タブ付きパネル、 およびメディア・プレイヤーなどのコンポーネントをドロップできます。
  5. 各コンポーネントのプロパティーを編集する。 Page Designer の「デザイン」または「ソース」ページのコンポーネントがフォーカスされている場合、 「プロパティー」ビューはそのコンポーネントに使用可能なプロパティーを表示します。 Faces コンポーネントをパレットから直接追加する場合、 そのコンポーネントの「プロパティー」ビューにある定義済みデータ・ソースにバインドすることが可能です。
  6. スクリプト記述イベントを Web ページに追加するには「クイック編集」ビューを使用する。 例えば、Faces JSP ファイルの Faces コンポーネントにアクションを割り当てることができます。
  7. Faces コンポーネントを使用してページを開発するたびに、定期的に JSP ファイルをテストする。 Faces コンポーネントは動的データを使用するために、サーバー上で実行してプレビューを行う必要があります。 プレビュー・ページ (「Faces JSP ファイル」下部のタブ上にある) は、それほど精密ではありません。
  8. サーバーで Web プロジェクトを実行する。プロジェクト・エクスプローラーで、ファイルを右クリックして、「実行」 > 「サーバーで実行」を選択します。 Web アプリケーションのテストおよびデプロイについてさらに学習されたい方は、サーバーの資料を参照してください。
実行時に、HTML とフォーム・タグが作成されます。 Web アプリケーションがデプロイされた後に、ユーザーは Web アプリケーションから直接、 データにアクセスしたり、操作したりすることができます。
制約事項: HTML ファイルから Faces JSP ファイルにリンクするには、HTML ページ内で <filename>.jsp か ら <filename>.faces を 参照している、ファイルの名前を変更してください。 実際の Faces JSP ファイル拡張子の名前を変更しないでください。 参照リンクを HTML ファイル内の .faces 拡張子に 変更すると、Links Builder は作動しません。

JSF 使用可能化 Web ページにおける動的情報の表示について、さらに学習される場合は、以下のチュートリアルに従ってください。

チュートリアル: JavaServer Faces による Web ページでの動的情報の表示。 このチュートリアルでは、新聞の案内広告欄として機能する動的 Web サイトの設計方法を学習します。この Web サイトは、JavaServer Faces (JSF) コンポーネントおよび Service Data Objects (SDO) コンポーネントを使用する、完全な J2EE サンプル・アプリケーションです。Web アプリケーションでは JSF テクノロジーを使用して、案内広告データが保管されているデータベースにリンクする動的 Web ページを作成します。チュートリアル: JavaServer Faces による Web ページでの動的情報の表示。 このチュートリアルでは、新聞の案内広告欄として機能する動的 Web サイトの設計方法を学習します。この Web サイトは、JavaServer Faces (JSF) コンポーネントおよび Service Data Objects (SDO) コンポーネントを使用する、完全な J2EE サンプル・アプリケーションです。Web アプリケーションでは JSF テクノロジーを使用して、案内広告データが保管されているデータベースにリンクする動的 Web ページを作成します。


フィードバック