課題 2.3: ファイル・アップロード・コンポーネントの使用

始める前に、『課題 2.2: データ・テーブルのフォーマット』を完了しておく必要があります。

写真の列が表示されているので、 ユーザーが案内広告のための写真をアップロードできるようにする機能を提供する必要があります。 この機能は new_record.jsp および update_record.jsp のページでは、特に重要です。 ファイル・アップロード・コンポーネントにより、ユーザーは自分のファイル・システムを参照し、 ファイルをデータベースにアップロードして、ただちに、このファイルをデータベースで見えるようにすることができます。

ファイル・アップロード・コンポーネントを使用する手順は、 作成と更新の両方の場合で類似しているので、この課題では、 更新ページで任意のリストのための現在のイメージを変更できます。 お望みであれば、更新ページの使用を終了するときに、 新規レコード・ページに同じ変更を行うことができます。

現在の写真をページへ追加

デモを見る

更新フォームは、いくつかの静的テキストと update_record 関連レコードの列にバインドされたいくつかの入力コンポーネントを持つ HTML 表と何ら変らないことに気がつくでしょう。 このことが分かれば、行と列を追加して、HTML 表の変更とちょうど同じようにフォームを変更することができます。 以下の手順で、現在の写真を表示する新しい行を追加します。

行と列を追加することは、関連レコード・リストを表示するデータ・テーブルでは、かなり複雑です。 列をデータ・テーブルに追加するための情報については、 『課題 1.2: 関連レコード・リストとデータ・テーブル・コンポーネントを扱う作業』 の『デフォルト・データ・テーブルのチューニング』を参照してください。

  1. 「プロジェクト・エクスプローラー」ビューで、「update_record.jsp」ページをダブルクリックする。
  2. カーソルをテーブルの最初の (左上部の) セルに置く。 このセルはラベル付きの ID です。
  3. メニュー・バーで、「テーブル」>「行の追加」>「上に追加」と順にクリックして、 レコード用の現在の写真が入ることになるテーブルの上部に新規行を作成する。
  4. この新しい行の左端のセルに、現在の写真: (Current photo:) と入力してラベルとしての役割をもたせる。
  5. パレットの Faces コンポーネント・ドロワーから、「イメージ」コンポーネントを新規行の右端のセルにドラッグする。

    直前の課題とは違って、ユーザーにはサイズの制約なしでフル・イメージを見ることを許可します。 したがって、「プロパティー」ビューで幅と高さを変更しないでください。

  6. 「ページ・データ」ビューから「写真 (PHOTO)」列を新規イメージ・コンポーネントにドラッグして、 このイメージ・コンポーネントを update_record の「写真 (PHOTO)」列にバインドする。 これで、イメージ・コンポーネントが、データベースの写真 (PHOTO) 列にバインドされました。
  7. 「プロパティー」ビューで、 「」フィールドの横の「ページ・データ・オブジェクトの選択」ボタン をクリックする。 「ページ・データ・オブジェクトの選択」ウィンドウが開きます。
  8. + 記号をクリックして、update_record 関連レコード・リストを展開する。
  9. イメージ・タイプ (ストリング) (IMAGETYPE (string))」をクリックする。
  10. OK」をクリックする。

    これで、写真がある場合は、ページに案内広告のための現在の写真が表示されます。 このページは下図のようになるはずです。

    現行ページの外観

ファイル・アップロード・コンポーネントをページに追加する

デモを見る

次に、新規行をテーブルの下部に追加して、ファイル・アップロード・コンポーネントを入れます。

  1. 「電話: テキスト」が入っているセルの内側をクリックして、カーソルを最終行に置く。
  2. メニュー・バーで、「テーブル」>「行の追加」>「下に追加」と順にクリックする。
  3. 新規行の最初のセルに、ラベルとして 新規の写真: (New photo) と入力する。
  4. パレットの Faces コンポーネント・ドロワーから、 「ファイル・アップロード」コンポーネントを新しい行の最終セルにドラッグする。
  5. イメージ・コンポーネントのバインドと同じ方法で、ファイル・アップロード・コンポーネントを update_record 関連レコードの「写真 (PHOTO)」列にバインドする。 {PHOTO} が 1 行テキスト領域に表示されて、このコンポーネントが「(PHOTO)」 列にバインドされていること、およびアップロードされるファイルがこの列に置かれることを示します。

    このページは下図のようになるはずです。

    現行ページの外観

  6. 必要であれば、このページを保管してテストする。

課題 2.4: ナビゲーション規則の使用』を始める準備が完了しました。

ご利用条件 | フィードバック
(C) Copyright IBM Corporation 2000, 2004. All Rights Reserved.