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

第 8 課:建立更新頁面

在此練習中,您將建立容許使用者更新 CUSTOMER 表格的網頁。此頁面將接收其他頁面所傳遞的參數,只顯示由該參數指出的記錄,並接受該記錄的更新資訊。

建立 updatecustomer.jsp 檔

  1. 在「企業瀏覽器」視圖中,用滑鼠右鍵按一下 EGLWeb 專案的 WebContent 資料夾。
  2. 按一下新建 > 網頁
  3. 檔名欄位中,輸入此文字作為新檔案的名稱:
    updatecustomer.jsp
  4. 請確保資料夾欄位列出 /EGLWeb/WebContent 資料夾。
  5. 範本清單中,按一下我的範本
  6. 預覽方框中,按一下 A_gray.htpl 範本。
  7. 按一下完成 這時會建立新頁面,並在編輯器中開啟該頁面。
  8. 使用此文字取代預設文字:
    更新客戶資訊
  9. Enter 鍵三次以插入三個空白行。
  10. 儲存頁面。
新的 updatecustomer.jsp 頁面與此圖片相似:

updatecustomer.jsp 頁面的外觀

新增 EGL 記錄並在頁面上顯示該記錄

下一步是要新增 EGL 資料至此頁面。建立 allcustomers.jsp 檔時,已在其中一個步驟中新增資料至頁面,然後在第二個步驟中透過從「頁面資料」視圖拖曳該資料,來在頁面上顯示該資料。現在,您將選取新增控制項以在網頁上顯示 EGL 元素勾選框,以在一個步驟中新增資料至頁面並在頁面上顯示該資料。
  1. 開啟「選用區」視圖上的 EGL 抽屜。
  2. 新建變數圖示拖曳到頁面上的「更新客戶資訊」文字下面。 這時會開啟「建立新的 EGL 資料變數」視窗。
  3. 選取類型下面,按一下記錄
  4. 記錄類型下面,按一下客戶
  5. 輸入欄位的名稱欄位中,輸入下列文字:
    customer
  6. 陣列內容下面,清除陣列勾選框。
  7. 選取新增控制項以在網頁上顯示 EGL 元素勾選框。
  8. 按一下確定 新的記錄會出現在「頁面資料」視圖中,並會開啟「插入控制項」視窗。
  9. 在「插入控制項」視窗中,按一下更新現有記錄
  10. 按一下選項 這時會開啟「選項」視窗。
  11. 選取提交按鈕勾選框。
  12. 清除刪除按鈕勾選框。
  13. 針對提交按鈕標籤,請輸入此文字:
    更新此記錄
  14. 按一下確定
  15. 按一下完成
  16. 儲存頁面。

這時會將用於更新記錄的資料控制項插入到網頁上。請注意,頁面上有一個 {Error Messages} 控制項。此控制項並不表示您的頁面包含錯誤;{Error Messages} 控制項會標示將顯示執行時期錯誤訊息的位置。

該頁面與此圖片相似:

updatecustomer.jsp 頁面的外觀

擷取資料

頁面上已有適用於資料的欄位,您需要新增用於從資料庫擷取資料的程式碼。從您新增鏈結的上一課程恢復,以在名為 CID 的參數中傳遞客戶 ID 號碼。在這些步驟中,您將設定適用於新網頁的處理程式,以接受此參數並從資料庫擷取要顯示在頁面上的適當記錄。
  1. 用滑鼠右鍵按一下 updatecustomer.jsp 檔內開放式區域中的任意位置。
  2. 從蹦現功能表中,按一下編輯頁面程式碼 這時會在編輯器中開啟 updatecustomer.egl 檔。
  3. 與您編輯的前一個「JSF 處理程式」中相同,您需要新增一個記錄,用來儲存 SQL 呼叫的成功或失敗碼。在緊跟 customer Customer; 行之後,請完全依照下面撰寫的內容新增下列程式碼:
    status StatusRec;
    新增資料至頁面的下一步,是要配置 JSF 處理程式以接受鏈結將傳遞給它的 CID 參數。
  4. 請完全依照下面撰寫的內容將 function onPreRender() 行變更成下列程式碼:
    function onPreRender(CID INT)
    現在,已將 JSF 處理程式配置成接受名為 CID 的整數參數。
  5. 在緊跟 function onPreRender(CID INT) 之後的空白行中,請完全依照下面撰寫的內容新增此程式碼:
    customer.customerId = CID;
    現在,已將 ID 號碼指派給客戶記錄。下一步是要從資料庫擷取具有此 ID 號碼的記錄
  6. 在下一行中,請完全依照所撰寫的內容新增此程式碼。 您可能需要使用已在第 6 課:新增資料至頁面中瞭解的完成程式碼功能。
    CustomerLib.GetCustomer(customer, status);
    GetCustomer 函數的功能與您先前使用的 GetCustomerAll 函數相似,但 GetCustomer 函數擷取一個記錄,而 GetCustomerAll 函數則擷取記錄的陣列。 現在,客戶記錄包含了具有傳遞給此 JSF 處理程式之 ID 的記錄。
    新函數與下列內容相似:
    	function onPreRender(CID INT)
    customer.CustomerId = CID;
    		CustomerLib.GetCustomer(customer, status);
    	end
  7. 最佳化匯入並儲存檔案。
JSF 處理程式與此圖片相似:
updatecustomer.egl 檔的外觀

現在,當您按一下 allcustomers.jsp 頁面上的鏈結時,updatecustomer.jsp 頁面會載入關於客戶記錄的詳細資料。並且,您馬上可以變更網頁上欄位中的資訊,但沒有任何函數將這些更新傳送至資料庫。在下一小節中,您將使用 UpdateCustomer 函數對資料庫進行這些更新。

更新資料庫中的記錄

在此小節中,您將新增 EGL 函數至名為 updateRecord 的 JSF 處理程式中。然後,您會將此函數連結至您在網頁上建立的按鈕。這樣,當您按一下網頁上的按鈕時,updateRecord 函數將執行並呼叫 UpdateCustomer 函數,以更新資料庫記錄。最後,updateRecord 函數會將瀏覽器轉遞回 allcustomers.jsp 頁面,讓您可以查看您對記錄所作的變更。
  1. 在 updatecustomer.egl 檔中,請緊跟在最終的 End 陳述式之前,完全依照下面所示的內容新增下列函數。 您可能需要使用完成程式碼或從此頁面貼上該函數,以確保該函數是正確的。
    function updateRecord()
      CustomerLib.UpdateCustomer(customer, status);
      forward to "allcustomers";
    end
  2. 儲存並關閉檔案。

    下一步是要將此函數連結至網頁上的按鈕。

  3. 在編輯器中開啟 updatecustomer.jsp 頁面。 您可能仍然在編輯器標籤中開啟此頁面。如果在這裡找不到該頁面,請在「專案瀏覽器」視圖中按兩下 updatecustomer.jsp 檔,該檔案位於 EGLWeb/WebContent 資料夾中。
  4. 在「頁面資料」視圖中,展開 JSF 處理程式 > 動作 此資料夾列出 JSF 處理程式中的所有函數,不含 onPreRender()onConstruction() 函數。 在此情況下,此資料夾會顯示您剛剛建立的 updateRecord() 函數。
  5. updateRecord() 函數直接拖曳到網頁上標籤為「更新此記錄」的按鈕上。 頁面的外觀不會變更,但是現在已將此函數連結至按鈕,當按下該按鈕時,將執行此函數。
  6. 儲存頁面。

這裡是 updatecustomer.egl 檔中完成的程式碼。如果您在檔案中看到使用紅色 X 符號標示的任何錯誤,請確保您的程式碼與此檔案中的程式碼相符:第 8 課之後完成的 updatecustomer.egl 檔

updatecustomer.egl 檔的外觀

測試已完成的網站

現在,網站已準備好進行測試。您可以現在更新和檢視資料庫的「客戶」表格中的任何記錄。
  1. 在「企業瀏覽器」視圖中,用滑鼠右鍵按一下 allcustomers.jsp 檔,然後按一下執行方式 > 在伺服器中執行 這時會在 Web 瀏覽器中開啟相關頁面。現在,清單中的每一個客戶姓氏,都是指向 updatecustomer.jsp 所顯示網頁的超鏈結。
  2. 按一下其中一個客戶姓氏。 您將會前往 updatecustomer.jsp 所顯示的網頁,並且該網頁會顯示該列的特定資訊。
  3. 為記錄輸入新的 FIRST_NAME。
  4. 為此頁面上的幾個其他欄位,輸入新的資訊。請勿變更 CUSTOMER_ID 欄位。
  5. 完成輸入新資訊之後,請按一下更新此記錄按鈕。
當您按一下更新此記錄按鈕時,您會回到 allcustomers.jsp 頁面。請注意,該記錄已變更為顯示您輸入的新 FIRST_NAME。您可以再次按一下該記錄的姓氏,以查看儲存在資料庫中的新資訊。

您已完成指導教學

在這個指導教學中,您使用範例 Derby 資料庫,建置了適用於客戶檔案的運作正常的檔案維護公用程式。現在,您可以透過完成使用 EGL 建置 JSF 搜尋頁面指導教學,來建置此知識。
< 上一個課程 | 下一個課程 >

意見