< 前へ | 次へ >

演習 1.2: データベースへの接続と Web ページ上でのデータの表示

この演習では、データベースに接続する方法と Web ページ上でデータ・レコードを表示する方法を学習します。 関連レコード・リストを Web ページに追加する方法も学習します。
このタスクについて

このチュートリアルの Web サイトは、JavaServer Faces コンポーネントを備えた動的 Web ページを使用して データベースにアクセスし、情報をページ上に表示します。 このチュートリアルでは、関連レコードおよび関連レコード・リストを使用してデータベース内のデータを表し、 データ・テーブルや通常の HTML 表の形式でデータをページに表示できるようにします。 これらのコンポーネントが Java™ アクセス Bean を使用します。

データ・アクセス Bean についてさらに学習したい方に

データ・アクセス Bean は、エンタープライズ Bean を表す Java Bean です。 この Bean は、通常、JavaServer Pages (JSP) ファイル、サーブレット、または別のエンタープライズ Bean とインターフェースをとるエンタープライズ Bean を用いるクライアント・プログラムで使用されます。アクセス Bean を使用すれば、エンタープライズ Bean のライフ・サイクルを管理する複雑さから保護されます。 言い換えれば、Java Bean のプログラムを作成する場合と同じくらいの容易さで、 エンタープライズ Bean のプログラムを作成することができ、 エンタープライズ Bean のクライアント・プログラムを簡素化して、全体の開発時間を削減できます。

JavaServer Faces および Faces コンポーネントについてさらに学習したい方に

JavaServer Faces は、サーバーで実行する動的 Web アプリケーションのためのユーザー・インターフェース (UI) のビルドを支援するテクノロジーです。 JavaServer Faces フレームワークは、サーバー要求全体にわたって UI 状態を管理し、クライアントが活動化するサーバー・サイド・イベントを開発するための単純なモデルを提供します。 JavaServer Faces は Model/View/Controller (MVC) フレームワークを基にしています。 これは、JavaServer Faces の場合、コントローラーはサーブレットであり、 モデルは JavaBeans™ で表現され、ビューはアプリケーション・コードをほとんど使用しないか、 あるいは全く使用しない JavaServer Faces コンポーネントで構成されるということを意味しています。 このモデルのゴールは、コンテンツをプレゼンテーションから分離することです。

Faces コンポーネントなどのツールは、ご使用の Web アプリケーションでのこのテクノロジーの使用を支援します。 Faces コンポーネントには、ページ内に JavaServer Faces インターフェースを表す JavaServer Page (JSP) カスタム・タグ・ライブラリーが組み込まれています。 このウィザードは、Faces コンポーネントの使用を可能にする JSP ファイルの作成を支援します。 Faces コンポーネントにより、「パレット」ビューの Faces ドロワーからコンポーネントをドラッグして、作成中の Web ページにドロップすることによって、Web アプリケーションを開発することができます。

例えば、入力 1 行テキスト領域をドラッグして、ページ上のフォームにドロップできます。 次に、「実行」ボタンをこの入力 1 行テキスト領域の横にドラッグ・アンド・ドロップできます。 最後に、この入力 1 行力テキスト領域をユーザーのデータ・ソースに結合することができます。 これで、エンド・ユーザーは Web アプリケーションからユーザーのデータ・ソースにデータを入力できるようになります。

さらに、Faces コンポーネントを使用してビルドされたアプリケーションには、 その基礎であるプログラム・ロジックとは独立して、ユーザー・インターフェースをレンダリングできる利点があります。 このことは、ユーザーのアプリケーションが、 ブラウザーまたはハンドヘルド・デバイスなどのさまざまなプラットフォーム上で実行し、 データにアクセスできることを意味しています。
パレットの拡張 Faces コンポーネント・ドロワー

関連レコード・リストの追加

このタスクについて
この演習では、 データベースにあるすべての案内広告を表示するための関連レコード・リストを作成します。 次に、データベースに接続して、 関連レコード・リストの中で必要とする情報を保持しているテーブルを選択します。 最後に、この関連レコード・リストを、データ・テーブルのページに表示します。
  • 関連レコードは、データベースの 1 つのレコードだけに接続します。 このケースでは、1 つの関連レコードは、サンプル・データベースの単一案内広告を表します。 関連レコードを使用すれば、新規レコードの作成、既存レコードの編集、または古いレコードの削除を行えます。
  • 関連レコード・リストは、データベースの複数のレコードに接続します。 このケースでは、関連レコード・リストはサンプル・データベースの 2 つからすべてまでの任意の数の案内広告を表示します。
  • データ・テーブルは、関連レコード・リストからデータをページに表示します。 データ・テーブルは、単にレコード・リストの場所を指定するだけであり、HTML 表と同じようにデータを行と列にフォーマット設定するわけではありません。
    データ・テーブルについてさらに学習したい方に

    データ・テーブルは、 関連レコード・リストのようなデータ・オブジェクトを保持する Faces JSP ページのコンポーネントです。 データ・テーブルには HTML 表のように行と列があるように見えますが、これは HTML 表のようには機能しません。 テーブル内と同様に入出力コントロールをフォーマットしたい場合は、 パレットの拡張 Faces コンポーネント・ドロワーから、「パネル - グループ・ボックス」を使用します。 この方法は『演習 2.2: データ・テーブルのフォーマット』に説明してあります。

    「プロパティー」ビューを使用して、 以下のようにデータ・テーブルをさまざまな方法でカスタマイズすることができます。
    • 列順を追加、除去、および変更する
    • テキストおよび背景をフォーマットする
    • ヘッダー、フッター、および余白を追加する
    • 結果を表示するページングを追加する

新規関連レコード・リストを作成するには、以下のとおりに実行します。

  1. Web パースペクティブの「エンタープライズ・エクスプローラー」ビューで、「ClassifiedsTutorial」 > 「WebContent」と展開する。
  2. 「WebContent」フォルダーで、「all_records.jsp」をダブルクリックする。 エディターで、all_records.jsp ファイルが開きます。
  3. デフォルトのテキスト Insert content here を削除する。
  4. 「パレット」ビューで、「データおよびサービス」ドロワーを展開する。
  5. 「SDO 関連レコード・リスト」コンポーネントを「パレット」から空のコンテンツ領域にドラッグする。 「関連レコード・リストの追加」ウィンドウが開きます。
  6. 「名前」フィールドに「all_recordlist」と入力する。 関連レコード・リストおよび関連レコード名は、変数名に関する Java 標準命名規則に準拠している必要があります (例えば、スペースを含むことはできません)。
  7. 「データ・コントロールの追加」が選択されていることを確認する。 「データ・コントロールの追加」が選択されていれば、ウィザードによりデータ・テーブルが作成され、レコード・リストがページに表示されます。 選択されていない場合、ウィザードはレコード・リストを作成するだけで、ページ上にそのデータは表示しません。 ここでは、ウィザードにデフォルトのデータ・テーブルを作成させ、ユーザーは後からそれをカスタマイズします。 「関連レコード・リストの追加」ウィンドウは、次のようになるはずです。
    「関連レコード・リストの追加」ウィンドウ

    「次へ」をクリックする。

  8. ウィザードの次のページにある「名前」フィールドで、「新規」をクリックして新規データベース接続を作成する。 「プロファイル参照」ダイアログが開きます。
  9. 「プロファイル参照」ダイアログで、「新規」をクリックする。 「新規接続プロファイル」ダイアログが開きます。
  10. 「接続プロファイルのタイプ」リストで、「Derby」を選択してから「次へ」をクリックする。 「接続プロファイルの作成」ダイアログが開きます。
  11. 「名前」フィールドに DerbyDB と入力し、「開始時に自動接続」を選択して、「次へ」をクリックする。
  12. 「ドライバー」フィールドで、「Derby 10.2 - 組み込み JDBC ドライバーのデフォルト」を選択する。
  13. 「データベース・ロケーション」フィールドで「参照」をクリックして、「<workspace_location>¥ClassifiedsTutorial¥WebContent¥database」を選択する。ここで、「<workspace_location>」は現行ワークスペースのディレクトリーです。 「終了」をクリックする。
  14. 「プロファイル参照」ダイアログで、「DerbyDB」をクリックして、「OK」をクリックする。 「関連レコード・リストの追加」ウィザードに戻ります。
  15. 「プロジェクトのデータベース接続の構成」をクリックする。 「JDBC 接続プロパティー」ウィンドウが開きます。
  16. 「ランタイム接続の詳細」セクションの隣にある「編集」をクリックする。ランタイム接続のタイプとして「ドライバー・マネージャー接続の使用」を選択する。「終了」をクリックし、「OK」をクリックすると、「関連レコード・リストの追加」ダイアログに戻ります。 Derby データベースへの接続を作成したので、 表示するテーブルまたはレコード・リストを選択する必要があります。 「関連レコード・リストの追加」 ウィザードには、データベースのテーブルが表示されます。
  17. 「W5SAMPLE」を展開し、「ADS」を選択する。 「次へ」をクリックする。このウィザードの残りのページで、ユーザーのレコード・リストから列を除外して、拡張オプション (例えば、主キーの定義、他のテーブルへの関係の追加、フィルターおよびソート条件の指定) を実行することができます。 これらのページについては、後続の課題でさらに学習します。
    「関連レコード・リストの追加」ダイアログ
  18. ダイアログの「関連レコードの追加」ページで、関連レコード・リストに組み込む列を指定する。「次へ」をクリックする。
  19. このチュートリアルで表示すべき項目は、各案内広告のタイトル、説明、 カテゴリー、価格、および電話番号のみです。 デフォルトでは、すべての列が選択されています。 以下を除くすべての列をクリックしてクリアし、表示を抑止します。
    • MAINCATEGORY: String
    • TITLE: String
    • DESCRIPTION: String
    • PRICE: BigDecimal
    • PHONE: String
  20. Web ページでのデータ・テーブル表示の編成を洗練させることができる。 列を選択し、上矢印および下矢印をクリックして望ましい位置に再配列することができます。
    列を次の順序に配置します。
    • TITLE
    • DESCRIPTION
    • MAINCATEGORY
    • PRICE
    • PHONE
    「終了」をクリックします。
    Web ページは、次のように表示されるはずです。
    現在のページの外観
  21. このページを保管します。
タスクの結果
次の演習では、このページが実際の Web サーバーでどのように表示されるかを確認します。データ・テーブルと JavaServer Faces コンポーネントをフォーマットするには多くのオプションがあります。 これらのオプションの一部は、次のモジュールで取り上げています。 ページ上の種々の JavaServer Faces コンポーネント (例えば、データ・テーブル、および個々の出力コンポーネント) について、 独自に「プロパティー」ビューを調べてみることもできます。

演習のチェックポイント

演習 1.2 が完了しました。この演習では、データベースに接続する方法と、Web ページ上で関連レコード・リストを使用してデータ・レコードを表示する方法を学習しました。
< 前へ | 次へ >
フィードバック