< 前へ | 次へ >

演習 2.2: ファイル・アップロード・コンポーネントの使用

この演習から、ユーザーが案内広告用ピクチャーをアップロードできるようにする方法を学習します。 この機能は new_record.jsp および update_record.jsp のページでは、特に重要です。 ファイル・アップロード・コンポーネントにより、ユーザーは自分のファイル・システムを参照し、 ファイルをデータベースにアップロードして、ただちに、このファイルをデータベースで見えるようにすることができます。
このタスクについて

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

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

このタスクについて

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

行と列を追加することは、関連レコード・リストを表示するデータ・テーブルでは、かなり複雑です。 列をデータ・テーブルに追加するための情報については、演習 1.2: データベースへの接続と Web ページ上でのデータの表示 を参照してください。

  1. 「エンタープライズ・エクスプローラー」ビューで、「update_record.jsp」ページをダブルクリックする。
  2. カーソルをテーブルの最初の (左上部の) セルに置く。 このセルはラベル付きの ID です。
  3. メインメニューから「表」 > 「指定して追加」をクリックします。 「行または列の追加」ダイアログが開きます。 「」をクリックし、次に「選択されたセルの上」をクリックします。 これにより、 レコード用の現在の写真が入ることになるテーブルの上部に新規行が作成されます。「OK」をクリックします。
  4. この新しい行の左セルに、ラベルとして「現在の写真: (Current photo:)」と入力します。
  5. パレットの Faces コンポーネント・ドロワーから、「イメージ」コンポーネントを新規行の右端のセルにドラッグする。 直前の演習とは違って、ユーザーにはサイズの制約なしでフル・イメージを見ることを許可します。 したがって、「プロパティー」ビューで幅と高さを変更しないでください。
  6. 「ページ・データ」ビューから「写真 (PHOTO)」列を新規イメージ・コンポーネントにドラッグして、 このイメージ・コンポーネントを update_record の「写真 (PHOTO)」列にバインドする。 これで、イメージ・コンポーネントが、データベースの写真 (PHOTO) 列にバインドされました。
  7. グラフィック・イメージを選択した状態で、「プロパティー」ビューに進み、「型」フィールドの隣にある「ページ・データ・オブジェクトの選択」ボタン をクリックする。「ページ・データ・オブジェクトの選択」ウィンドウが開きます。
  8. 「update_record (サービス・データ・オブジェクト)」 > 「update_record (ADS)」 > 「イメージ・タイプ (ストリング) (IMAGETYPE (String))」をクリックします。
  9. OK」をクリックすると、写真がある場合は、ページに案内広告のための現在の写真が表示されます。このページは、次のようになるはずです。
    現行ページの外観

ページへのファイル・アップロード・コンポーネントの追加

このタスクについて
次に、新規行をテーブルの下部に追加して、ファイル・アップロード・コンポーネントを入れます。
  1. 最終行をクリックして、カーソルを最終行に置く。
  2. メニュー・バーで、「表」 > 「行を下へ追加」とクリックする。
  3. 新規行の最初のセルに、ラベルとして「新規の写真: (New photo)」と入力する。
  4. パレットの拡張 Faces コンポーネント・ドロワーから、 「ファイル・アップロード」コンポーネントを新しい行の最終セルにドラッグする。
  5. イメージ・コンポーネントのバインドと同じ方法で、ファイル・アップロード・コンポーネントを「update_record」関連レコードの「写真 (PHOTO)」列にバインドする。 「{PHOTO}」が 1 行テキスト領域に表示されて、このコンポーネントが「写真 (PHOTO)」 列にバインドされていること、およびアップロードされるファイルがこの列に置かれることを示します。 このページは、次のようになるはずです。
    現行ページの外観
  6. このページを保管し、必要に応じてテストする。

演習のチェックポイント

演習 2.2 が完了しました。この演習では、更新ページでのテーブルの操作方法、現行写真のテーブルへの追加方法、ファイル・アップロード・コンポーネントのテーブルへの追加方法を学習しました。
< 前へ | 次へ >

フィードバック