練習 1.5:建立更新頁面
開始之前,您必須先完成練習 1.4:建立新記錄。
這時您已建立了用來檢視及建立網站清單的頁面。
在這個練習中,您將建立一個頁面,讓使用者執行更新和刪除清單。更新頁面看起來幾乎完全如同建立頁面,不過,在更新頁面中,輸入欄位會顯示現有記錄的資料,供使用者加以變更。
首先,您將建立一個代表資料庫現有記錄的關聯式記錄。之後,您將建立這個關聯式記錄的 JavaServer Faces 更新表單,在進行一些小變更之後,您的頁面就已完成測試準備。
建立更新關聯式記錄
- 在「專案瀏覽器」視圖中,按兩下 update_record.jsp 檔來開啟它。
- 刪除預設文字將內容放在這裡。
- 在「選用區」視圖中,按一下資料抽屜來展開它。
- 將選用區中的關聯式記錄元件拖曳到空白內容區域中。這時會開啟新增關聯式記錄視窗。
- 在名稱欄位中,輸入 update_record。
- 在建立控制項之下,按一下更新現有的記錄。
- 確定已選取新增輸入/輸出控制項,以在網頁中顯示關聯式記錄選項。
- 按下一步。
- 在表格框中,按一下 W5SAMPLE.ADS 表格。
- 按下一步。這時會開啟「選取直欄及其他作業」頁面。
過濾結果
關聯式記錄只能顯示資料庫中的一筆記錄。因此,您必須過濾資料庫表格,只顯示一筆記錄供使用者進行編輯。(在上一個練習中,您不需要過濾資料庫,因為您建立了新記錄,因此,資料庫中沒有要過濾的結果。)
由於資料庫中的每筆記錄都有唯一 ID 號碼,因此,您將過濾結果來得出有唯一給定 ID 號碼的記錄。
- 在作業之下,按一下過濾結果。
這時會開啟「過濾器」視窗,將預設過濾條件 ID = #{param.ID} 插入過濾器直欄中。
「過濾器」視窗看起來如下:

這個程式碼會過濾資料庫中的記錄,關聯式記錄只會出現含指定 ID 號碼的記錄。您將在這個練習稍後的「插入超鏈結」一節中,進一步學習這個狀況。
- 按一下關閉。
- 按下一步。這時會開啟「配置資料控制項」頁面。
- 在要顯示的欄位區段中,除了輸入表單中所要顯示者之外,取消選取每個欄位名稱旁的勾選框:
- ID
- TITLE
- DESCRIPTION
- MAINCATEGORY
- PRICE
- PHONE
- 按一下上或下來依照下列方式,由上而下重新排序欄位名稱:
- ID
- TITLE
- DESCRIPTION
- MAINCATEGORY
- PRICE
- PHONE
- 對於 ID 欄位中,請從控制類型直欄的下拉清單中選取輸出欄位。
雖然您希望使用者能夠檢視記錄的 ID 號碼,但您並不希望他們能夠更新它。
將 ID 欄位放入「輸出」欄位,可協助您避免發生 ID 重複的問題。
- 按一下選項。這時會開啟選項視窗。
- 確定已選取「送出」按鈕選項。
- 在標籤欄位中,輸入更新。
- 按一下確定。
- 這時新增關聯式記錄視窗應該看起來如下:

- 按一下完成,如下所示,在頁面中產生您的更新:

設計更新按鈕
您要再次新增程式碼將使用者引導至 all_records.jsp 頁面來顯示已變更的記錄及所有其他記錄。
- 按一下您剛才在網頁上建立的更新按鈕。
- 開啟「快速編輯」視圖。
- 在「快速編輯」視圖中按一下,將游標直接放在 return ""; 程式碼前面。
- 按 Enter。這時會在 return ""; 前面出現新行。
- 用滑鼠右鍵按一下空行,從快速功能表中選取插入片段 > 移至頁面。這時會開啟「編輯 GotoPage 動作」視窗。
- 從下拉清單中,選取 all_records.jsp 作為目標頁面。
- 按一下確定。
- 您的按鈕的事件碼應該看起來如下:

現在,在使用者更新記錄之後,頁面會將瀏覽器送到 all_records.jsp 頁面,以確認記錄已經更新。
「刪除」按鈕也可引導使用者返回 all_records.jsp 頁面。
- 重複第 1-7 步驟,依照網頁上刪除按鈕的相同方式來編輯程式碼。
- 儲存頁面。
現在,您將在 all_records.jsp 頁面中建立鏈結,讓使用者能夠選取要更新的資料庫記錄。#{param.ID} 代表更新頁面將更新之記錄的 ID 號碼。
當使用者按一下記錄鏈結時,這筆記錄的 ID 號碼會作為 #{param.ID} 參數傳給 update_record.jsp 頁面。
之後,您剛插入 update_record.jsp 頁面的過濾關聯式記錄只會顯示這個要更新的記錄。
- 在「專案瀏覽器」視圖中,按兩下 all_records.jsp 檔,以便在編輯器中開啟它。
- 按一下資料表中的任何位置。
- 開啟「內容」視圖。
- 在「內容」視圖中,按一下視圖左側 HTML 標示清單中的 h:dataTable。
- 在「內容」視圖的最右側,按一下新增來新增一個新直欄。
- 在新直欄的標籤欄位中輸入更新,按 Enter。這時會在資料表中產生名稱為「更新」的直欄。
- 在「內容」視圖中選取新直欄的情況下,按下移,直到「更新」直欄在資料表最右側為止。
- 在「選用區」視圖中,按一下 Faces 元件抽屜來展開它。
- 從選用區中,將鏈結元件拖曳到剛建立的「更新」直欄中。這時會開啟「配置 URL」視窗。
- 在 URL 欄位中,輸入 update_record.jsp 作為目標鏈結,在標籤欄位中,輸入更新清單。
- 按一下確定。這時「更新」直欄會出現「更新清單」超鏈結。
- 按一下「更新」直欄中,在更新清單超鏈結旁的鏈結圖示
。
- 在「內容」視圖中,按一下在視圖左側 hx:outputLinkEx 標示下的參數標籤。
- 按一下新增參數,在名稱欄位中輸入 ID。
您必須將 ID 參數連結到輸入表單中的 ID 直欄。
將超鏈結參數連結到資料清單的 ID 直欄表示在按一下超鏈結時,要求參數會是清單中之記錄的 ID。
- 選取值欄位,再按一下欄位中的選取頁面資料物件
按鈕。這時會開啟「選取頁面資料物件」視窗。
- 在資料物件之下,按一下 all_recordlist(ADS) 記錄清單中的 ID 直欄,如下所示

- 按一下確定。
現在,當使用者按一下「更新清單」鏈結時,網站會讓使用者更新分類廣告的相關資訊。
- 將檔案儲存起來,如果您想要的話,請測試頁面。請記得先開啟 all_records.jsp,因為這是鏈結至 update_record.jsp 的頁面。
在這個練習中,您學會了如何建立更新資料庫記錄的網頁。
現在您已準備好開始進行練習 1.6:過濾關聯式記錄清單。