練習 2.3:使用檔案上載元件

開始之前,您必須先完成練習 2.2:格式化資料表

假如您正在顯示 PHOTO 直欄,您應該提供使用者上載分類廣告圖片的能力。 在 new_record.jsp 和 update_record.jsp 頁面上,這個功能尤其重要。 檔案上載元件可讓使用者瀏覽他們的檔案系統、將檔案上載到資料庫,以及立即在資料庫中顯示這個檔案。

由於使用檔案上載元件的程序與建立和更新的情況相似,因此,這個練習可讓更新頁面變更任何清單的現有影像。 如果您想要的話,您可以在更新頁面完成時,在新記錄頁面上進行相同的變更。

將現行照片新增至頁面中

顯示說明文件

您會發現更新表單與含有一些靜態文字和一些連結至 update_record 關聯式記錄直欄的輸入元件之 HTML 表格沒有什麼不同。 瞭解這一點之後,您就可以如同修改任何 HTML 表格一樣,新增列和直欄來修改表單。在下列步驟中,您將新增新的列來顯示現行照片。

在顯示關聯式記錄清單的資料表中,新增列和直欄比較複雜。 如果需要新增直欄到資料表的相關資訊,請參閱練習 1.2:使用關聯式記錄清單和資料表元件中的調整預設資料表

  1. 在「專案瀏覽器」視圖中,按兩下 update_record.jsp 頁面。
  2. 將游標放在表格的第一個(左上角)資料格。這個資料格的標籤是 ID。
  3. 從功能表列中,按一下表格 > 新增列 > 加上在面,在即將包含記錄現行照片的表格頂端建立新的一列。
  4. 在這個新列最左側的資料格中,輸入現行照片:來作為標籤。
  5. 從選用區的 Faces 元件抽屜中,將影像元件拖曳至新列最右側的資料格中。

    和上一個練習不同,您將允許使用者在沒有大小限制的情況下查看完整影像,因此,您不會變更「內容」視圖的寬度和高度。

  6. 將「頁面資料」視圖中的 PHOTO 直欄拖曳至新影像元件,以將影像元件連結至 update_recordPHOTO 直欄。 影像元件現在會連結至資料庫的 PHOTO 直欄。
  7. 在「內容」視圖中,按一下類型欄位旁的選取頁面資料物件按鈕。 這時會開啟「選取頁面資料物件」視窗。
  8. 按一下 + 號來展開 update_record 關聯式記錄。
  9. 按一下 IMAGETYPE (String)
  10. 按一下確定

    現在,如果有分類廣告的現行照片的話,頁面會顯示它。 您的頁面應該看起來如下:

    現行頁面外觀

將檔案上載元件新增至頁面中

顯示說明文件

之後,新增一列至表格底端來包含檔案上載元件。

  1. 按一下包含「照片:」文字的資料格,以將游標放在最後一列中。
  2. 從功能表列中,按一下表格 > 新增列 > 加在下面
  3. 在新列的第一個資料格中,輸入新照片:作為標籤。
  4. 從選用區的 Faces 元件抽屜中,將檔案上載元件拖曳至新列的最後一個資料格中。
  5. 依照連結影像元件的相同方式,將檔案上載元件連結到 update_record 關聯式記錄的 PHOTO 直欄。 這時文字欄位會顯示 {PHOTO},表示這個元件已連結至 PHOTO 直欄,且上載的檔案會放在這個直欄中。

    您的頁面應該看起來如下:

    現行頁面外觀

  6. 將頁面儲存起來,如果您想要的話,請加以測試。

現在您已準備好開始進行練習 2.4:使用導覽規則

讀者意見
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.