課題 2.3: ファイル・アップロード・コンポーネントの使用
始める前に、『課題 2.2: データ・テーブルのフォーマット』を完了しておく必要があります。
写真の列が表示されているので、
ユーザーが案内広告のための写真をアップロードできるようにする機能を提供する必要があります。
この機能は new_record.jsp および update_record.jsp のページでは、特に重要です。
ファイル・アップロード・コンポーネントにより、ユーザーは自分のファイル・システムを参照し、
ファイルをデータベースにアップロードして、ただちに、このファイルをデータベースで見えるようにすることができます。
ファイル・アップロード・コンポーネントを使用する手順は、
作成と更新の両方の場合で類似しているので、この課題では、
更新ページで任意のリストのための現在のイメージを変更できます。
お望みであれば、更新ページの使用を終了するときに、
新規レコード・ページに同じ変更を行うことができます。
現在の写真をページへ追加
更新フォームは、いくつかの静的テキストと
update_record 関連レコードの列にバインドされたいくつかの入力コンポーネントを持つ
HTML 表と何ら変らないことに気がつくでしょう。
このことが分かれば、行と列を追加して、HTML
表の変更とちょうど同じようにフォームを変更することができます。
以下の手順で、現在の写真を表示する新しい行を追加します。
行と列を追加することは、関連レコード・リストを表示するデータ・テーブルでは、かなり複雑です。
列をデータ・テーブルに追加するための情報については、
『課題 1.2: 関連レコード・リストとデータ・テーブル・コンポーネントを扱う作業』
の『デフォルト・データ・テーブルのチューニング』を参照してください。
- 「プロジェクト・エクスプローラー」ビューで、「update_record.jsp」ページをダブルクリックする。
- カーソルをテーブルの最初の (左上部の) セルに置く。
このセルはラベル付きの ID です。
- メニュー・バーで、「テーブル」>「行の追加」>「上に追加」と順にクリックして、
レコード用の現在の写真が入ることになるテーブルの上部に新規行を作成する。
- この新しい行の左端のセルに、現在の写真:
(Current photo:) と入力してラベルとしての役割をもたせる。
- パレットの Faces
コンポーネント・ドロワーから、「イメージ」コンポーネントを新規行の右端のセルにドラッグする。
直前の課題とは違って、ユーザーにはサイズの制約なしでフル・イメージを見ることを許可します。
したがって、「プロパティー」ビューで幅と高さを変更しないでください。
- 「ページ・データ」ビューから「写真 (PHOTO)」列を新規イメージ・コンポーネントにドラッグして、
このイメージ・コンポーネントを update_record の「写真 (PHOTO)」列にバインドする。
これで、イメージ・コンポーネントが、データベースの写真 (PHOTO) 列にバインドされました。
- 「プロパティー」ビューで、
「型」フィールドの横の「ページ・データ・オブジェクトの選択」ボタン
をクリックする。
「ページ・データ・オブジェクトの選択」ウィンドウが開きます。
- + 記号をクリックして、update_record 関連レコード・リストを展開する。
- 「イメージ・タイプ (ストリング) (IMAGETYPE (string))」をクリックする。
- 「OK」をクリックする。
これで、写真がある場合は、ページに案内広告のための現在の写真が表示されます。
このページは下図のようになるはずです。

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

- 必要であれば、このページを保管してテストする。
『課題 2.4: ナビゲーション規則の使用』を始める準備が完了しました。