< 上一個課程 | 下一個課程 >

第 1.6 課:建立更新頁面

這時您已建立了用來檢視及建立網站清單的頁面。 在這個練習中,您將建立一個頁面,讓使用者執行更新和刪除清單。更新頁面看起來幾乎完全如同建立頁面,不過,在更新頁面中,輸入欄位會顯示現有記錄的資料,供使用者加以變更。

首先,您將建立一個代表資料庫現有記錄的關聯式記錄。之後,您將建立這個關聯式記錄的 JavaServer Faces 更新表單,在進行一些小變更之後,您的頁面就已完成測試準備。

建立更新關聯式記錄

  1. 在「專案瀏覽器」視圖中,按兩下 update_record.jsp 檔來開啟它。
  2. 刪除預設文字 bodyarea 的預設內容
  3. 在「選用區」視圖中,按一下資料抽屜來展開它。
  4. 將選用區中的關聯式記錄元件拖曳到空白內容區域中。這時會開啟新增關聯式記錄視窗。
  5. 在「名稱」欄位中,鍵入 update_record
  6. 建立控制項之下,按一下更新現有的記錄
  7. 確定已選取新增輸入/輸出控制項,以在網頁中顯示關聯式記錄選項。
  8. 下一步
  9. 在「表格」方框中,展開 W5SAMPLE,選取 ADS。
  10. 下一步。這時會開啟「新增關聯式記錄」頁面。

過濾結果

關聯式記錄只能顯示資料庫中的一筆記錄。因此,您必須過濾資料庫表格,只顯示一筆記錄供使用者進行編輯。(在上一個練習中,您不需要過濾資料庫,因為您建立了新記錄,因此,資料庫中沒有要過濾的結果。) 由於資料庫中的每筆記錄都有唯一 ID 號碼,因此,您將過濾結果來得出有唯一給定 ID 號碼的記錄。

  1. 「新增關聯式記錄」頁面上有作業鏈結的清單。在作業下, 按一下過濾結果。這時會開啟「過濾器」視窗,將預設過濾條件 ID = #{param.ID} 插入過濾器直欄中。 「過濾器」視窗如下所示:
    「過濾器」視窗。
    這個程式碼會過濾資料庫中的記錄,關聯式記錄只會出現含指定 ID 號碼的記錄。在本練習稍後的「新增列動作」段落中,您將進一步瞭解這種狀況。按一下關閉
  2. 下一步。這時會開啟「配置資料控制項」頁面。
  3. 要顯示的欄位區段中,除了輸入表單中所要顯示者之外,取消選取每個欄位名稱旁的勾選框:
    • ID
    • TITLE
    • DESCRIPTION
    • MAINCATEGORY
    • PRICE
    • PHONE
  4. 按一下來依照下列方式,由上而下重新排序欄位名稱:
    • ID
    • TITLE
    • DESCRIPTION
    • MAINCATEGORY
    • PRICE
    • PHONE
  5. 對於 ID 欄位,請從控制項類型直欄的下拉清單中選取輸出欄位。 您希望使用者能夠檢視記錄的 ID 號碼,但一定不想讓他們更新。 將 ID 欄位放入「輸出」欄位,可協助您避免發生 ID 重複的問題。
  6. 按一下選項。這時會開啟「選項」視窗。 確定已選取「送出」按鈕選項。在標籤欄位中,鍵入更新。按一下確定 「新增關聯式記錄」視窗如下所示:
    「新增關聯式記錄」視窗。
  7. 按一下完成,在頁面上產生更新表單,如下所示:
    更新的表單頁面。

設計更新和刪除按鈕

您要再次新增程式碼將使用者引導至 all_records.jsp 頁面來顯示已變更的記錄及所有其他記錄。

  1. 用滑鼠右鍵按一下您在網頁上剛建立的更新按鈕, 再選取內容
  2. 按一下新增規則。這時會開啟「新增導覽規則」視窗。
  3. 從「頁面」下拉框中,選取 all_records.jsp。 在這個規則用於方框中,按一下僅這個動作。 確定欄位包含:#{pc_Update_record.doUpdate_recordUpdateAction}。 按一下確定
  4. 重複步驟 1-3 來編輯程式碼,就像編輯網頁上的「刪除」按鈕一樣。確定這個規則用於欄位包含: #{pc_Update_record.doUpdate_recordDeleteAction}
  5. 儲存頁面。 若要嘗試將記錄新增至資料庫,以驗證是否回到 all_records.jsp 頁面,請在測試伺服器上執行 new_record.jsp。

新增列動作

現在,您將在 all_records.jsp 的表格中新增列動作,讓使用者可以選取要更新的資料庫記錄。 #{param.ID} 代表更新頁面將更新之記錄的 ID 號碼。 當使用者按一下列時,該記錄 ID 號碼會以 #{param.ID} 參數的形式傳給 update_record.jsp 頁面。 之後,您剛插入 update_record.jsp 頁面的過濾關聯式記錄只會顯示這個要更新的記錄。

  1. 在「專案瀏覽器」視圖中,按兩下 all_records.jsp 檔,以便在編輯器中開啟它。按一下資料表中的任何位置。開啟「內容」視圖。
  2. 在「內容」視圖中,從 HTML 標籤清單的 hx:dataTableEx 下按一下列動作標籤。
  3. 按一下新增按一下列時執行的動作。 這時會開啟「配置 RowAction」對話框。選取按一下列會將列資訊當做參數來傳送要求給伺服器,再按一下確定。 資料表中會新增直欄。
  4. 在「內容」視圖中,按一下 hx:requestRowAction 標籤。
  5. 按一下新增規則。這時會開啟「新增導覽規則」對話框。
  6. 從「頁面」下拉框中,選取 update_record.jsp。 在「這個規則用於」方框中,選取僅這個動作。 「僅這個動作」欄位會自動填寫您新增列動作時建立的 #{pc_All_records.doRowAction1Action}。 按一下確定 如果欄位未自動填寫上述方法,請在欄位中鍵入方法,並在 ClassifiedsTutorial/Java Resources: src/pagecode/All_records.java 中新增:
    	public String doRowAction1Action() {
    				return "";}
  7. 在「內容」視圖中,按一下 hx:requestRowAction 下的參數標籤。 按一下新增參數,然後在「名稱」欄位中鍵入 ID。 您必須將 ID 參數連結至 ID 直欄。 將列動作連結至資料清單的 ID 直欄,意謂著按一下列時,要求參數就是清單中的記錄 ID。
    1. 按一下,再按一下選取頁面資料物件  按鈕。
    2. 資料物件標籤中,展開 all_recordlist(服務資料物件) > all_recordlist (ADS),選取 ID (java.lang.Integer)
    3. 按一下確定
現在,當使用者按一下列時,網站將允許使用者更新分類廣告的相關資訊。將檔案儲存起來,如果您想要的話,請測試頁面。請記得先開啟 all_records.jsp,因為這是鏈結至 update_record.jsp 的頁面。

課程回顧

您已完成第 1.6 課。在這個練習中,您已學到如何建立可更新資料庫記錄的網頁。

< 上一個課程 | 下一個課程 >