練習 1.4:建立用來建立和更新使用者資訊的頁面

開始之前,您必須先完成練習 1.3:開發 UserAdmin 頁面

根據定義 Web 圖解的應用程式流程,您應該有用來建立使用者資訊 (UserAdminCreate.jsp) 和用來更新現有使用者資訊 (UserAdminUpdate.jsp) 的 UserAdmin 頁面。

建立 UserAdminCreate.jsp 頁面

在這部分的練習中,您將利用 Session Bean 來建立 UserAdminCreate 頁面中的資料存取,供管理者建立新的使用者記錄。 由於在建立新使用者記錄時,使用者 ID 值是強制的,因此,這個頁面也會納入驗證邏輯。 另外,您也將新增「取消」按鈕,供使用者結束這個程序。

  1. 回到 Web 圖解編輯器,按兩下 UserAdminCreate.jsp 頁面。
  2. 在建立精靈中,按一下完成

    這時會在編輯區中開啟空檔案。

  3. 刪除預設的將內容放在這裡。的文字。
  4. 從選用區的資料抽屜中,將 EJB Session Bean 物件拖曳到檔案中。
  5. 當 Session Bean 精靈開啟時,請選取 ejb/UserFacade,再按下一步
  6. 選取 create(RegistrationData data) 介面,供 Portlet 頁面的輸入欄位使用。
  7. 下一步
  8. 在「輸入表單」頁面中,您將定義在資料庫中建立新資料的輸入表單。 請按一下來取消選取所有欄位,以便個別選取、組織和配置 Portlet 頁面所要使用之輸入表單的適當欄位。 之後,再選取下列欄位的勾選框:
  9. 利用上下箭頭按鈕來移動所選的資料欄位,使它們符合上述步驟所顯示的次序。
  10. 選取 data.userid 欄位的標籤值,將它改成使用者 ID:
  11. 按一下選項按鈕,在標籤欄位中輸入建立。按一下確定
  12. 按一下完成,以在 UserAdminCreate.jsp 頁面中產生輸入表單。使用者介面看起來會如下:
    含有資料表的 UserAdminCreate.jsp
  13. 選取頁面中的建立按鈕。
  14. 如果「內容」視圖還不在作用中,請開啟它,再按一下新增規則按鈕。(您可能需要向右捲動。)
    新增指令按鈕的規則內容
  15. 新增導覽規則對話框中,從頁面清單框中選取 UserAdminView.jsp
  16. 選取輸出名稱為圓鈕,輸入 view
  17. 按一下確定
  18. 按一下快速編輯視圖標籤。按一下「快速編輯」編輯區,在傳回字串中輸入 "view":
    	return "view";

新增驗證邏輯

由於這個頁面的使用者 ID 值是強制輸入的,因此,我們應該加入驗證來檢查是否指定了使用者 ID。

  1. 選取使用者 ID:輸入元件。
  2. 開啟「內容」視圖。
  3. 選取驗證標籤。
  4. 按一下需要值勾選框。
  5. 儲存 UserAdminCreate.jsp。

您不需要撰寫任何執行應用程式的這個部分時所需要的程式碼。所有 EJB 參照邏輯以及將呼叫和結果連結到使用者介面的程式碼都會自動產生。

新增取消邏輯

另外,您也應該新增一個「取消」按鈕,以及連接搜尋頁面的適當導覽:

  1. Faces 元件選用區抽屜中,將指令 - 按鈕拖放在建立按鈕旁。
  2. 如果「內容」視圖不在作用中,請開啟它。
  3. 在內容集中,按一下顯示選項標籤,在按鈕標籤欄位中輸入取消,再按 Enter 鍵。
  4. 按一下快速編輯視圖標籤。按一下「快速編輯」編輯區,在傳回字串中輸入 "view":
    	return "view";
  5. 儲存檔案。現在,UserAdminCreate.jsp 頁面應該看起來如下:
    UserAdminCreate.jsp

建立 UserAdminUpdate.jsp 頁面

在這部分的練習中,您將利用 JavaBean 來建立資料存取,以便更新 UserAdminUpdate 頁面中的使用者資訊。 另外,您也將新增「取消」按鈕,供使用者結束這個程序,以及新增取得現有記錄的其他程式碼,以便在這個頁面中更新它們。

  1. 回到 Web 圖解編輯器,按兩下 UserAdminUpdate.jsp 頁面。
  2. 在建立精靈中,按一下完成

    這時會在編輯區中開啟空檔案。

  3. 刪除預設的將內容放在這裡。的文字。
  4. 從選用區的資料抽屜中,將 EJB Session Bean 物件拖曳到檔案中。
  5. 當 Session Bean 精靈開啟時,請選取 ejb/UserFacade,再按下一步
  6. 選取 update(RegistrationData data) 介面,供 Portlet 頁面的輸入欄位使用。
  7. 下一步
  8. 在「輸入表單」頁面中,您將定義更新資料庫資料的輸入表單。 請按一下來取消選取所有欄位,以便個別選取、組織和配置適當的欄位來作為 Portlet 頁面所要使用的輸入欄位。 之後,再選取下列欄位的勾選框:
  9. 利用上下箭頭按鈕來移動所選的資料欄位,使它們符合上述步驟所顯示的次序。
  10. 選取 data.userid 欄位的標籤值,將它改成使用者 ID:
  11. 從 data.userid 的控制類型清單中,選取輸出欄位,因為在更新 Portlet 中的其他資訊時,您要避免變更 ID。
  12. 按一下選項按鈕,在標籤欄位中輸入更新。按一下確定
  13. 按一下完成,以在 UserAdminUpdate.jsp 頁面中產生輸入表單。使用者介面看起來會如下:
    含資料表的 UserAdminUpdate.jsp
  14. 選取頁面中的更新按鈕。
  15. 如果「內容」視圖還不在作用中,請開啟它,再按一下新增規則按鈕。(您可能需要向右捲動。)
  16. 新增導覽規則對話框中,從頁面清單框中選取 UserAdminView.jsp
  17. 選取輸出名稱為圓鈕,輸入 view
  18. 按一下確定
  19. 按一下快速編輯視圖標籤。按一下「快速編輯」編輯區,在傳回字串中輸入 "view":
    	return "view";

您不需要撰寫任何執行應用程式的這個部分時所需要的程式碼。所有 EJB 參照邏輯以及將呼叫和結果連結到使用者介面的程式碼都會自動產生。

新增取消邏輯

另外,您也應該新增一個「取消」按鈕,以及連接搜尋頁面的適當導覽:

  1. Faces 元件選用區抽屜中,將指令 - 按鈕拖放在更新按鈕旁。
  2. 如果「內容」視圖不在作用中,請開啟它。
  3. 在內容集中,按一下顯示選項標籤,在按鈕標籤欄位中輸入取消,再按 Enter 鍵。
  4. 按一下快速編輯視圖標籤。按一下「快速編輯」編輯區,在傳回字串中輸入 "view":
    	return "view";
  5. 儲存檔案。現在,UserAdminUpdate.jsp 頁面應該看起來如下:
    UserAdminUpdate.jsp

新增更新現有記錄的其他程式碼

練習的這個部分所新增的更新邏輯使應用程式能夠取得現有的記錄,讓使用者能夠利用這個頁面來更新它們。 這個表單會藉由利用 UserFacade 所提供的 findById() 方法來起始設定參數 Bean,而填入相關的資料。

  1. 從 UserAdminUpdate.jsp 蹦現功能表中,選取編輯頁面程式碼。 頁面程式碼是含有 UserAdminUpdate.jsp 之基礎邏輯的 Java 檔。請插入下列程式碼(黑體部分):
    public UserFacadeLocalUpdateParamBean getUserFacadeLocalUpdateParamBean() {
        if (userFacadeLocalUpdateParamBean == null) {
            userFacadeLocalUpdateParamBean = new UserFacadeLocalUpdateParamBean();
            Integer userid = (Integer)getSessionScope().get("userid");
            try {
                userFacadeLocalUpdateParamBean.setData(getUserFacadeLocal().findById(userid));
            } catch (Exception e) {
                logException(e);
         }
     }
        return userFacadeLocalUpdateParamBean;
    }
    
  2. 儲存和關閉 UserAdminUpdate.java。

新增頁面導覽的鏈結

最後,如果要完成 UserAdmin Portlet,您必須新增鏈結來提供從主要頁面 (UserAdminView.jsp) 至詳細資料頁面(UserAdminCreate.jsp 和 UserAdminUpdate.jsp)的導覽。 如果要新增鏈結,請遵循下列步驟:

  1. 回到 Web 圖解檔,最後一次檢視已完成的 Web 圖解:
    實現的 Web 圖解
    請注意,每個網頁節點都已經實現,「指令」按鈕鏈結已備妥。
  2. 開啟 UserAdminView.jsp。
  3. Faces 元件選用區抽屜中,將鏈結元件拖放至檔案中的資料表旁。
  4. URL 欄位中輸入 /UserAdminCreate.jsp,在標籤欄位中輸入建立。按一下確定
  5. Faces 元件選用區抽屜中,將指令 - 超鏈結元件拖放至資料表中標籤為 {userid} 的輸出欄位。
  6. 如果「內容」視圖還不在作用中,請開啟它,再按一下新增規則按鈕。(您可能需要向右捲動。)
  7. 新增導覽規則對話框中,從頁面清單框中選取 UserAdminUpdate.jsp
  8. 選取輸出名稱為圓鈕,輸入更新
  9. 按一下確定
  10. 在「內容」視圖中,選取參數標籤。
  11. 按一下新增參數按鈕。
  12. 名稱欄位中,輸入使用者 ID
  13. 按一下欄位中的資料格,再按一下瀏覽圖示來開啟選取頁面資料物件對話框。 展開 userFacadeLocal > findByName(java.lang.String) > userFacadeLocalFindByNameResultBean,在選取頁面資料物件對話框中選取 userid (java.lang.Integer)

    「選取頁面資料物件」對話框
  14. 按一下確定

之後,您必須新增在階段作業範圍中儲存參數的程式碼,使更新頁面能夠利用使用者 ID,在更新頁面的輸入表單中提供使用者資訊。

  1. 按一下快速編輯視圖標籤。按一下「快速編輯」編輯區,這會建立更新按鈕的相關動作程式碼的空白範本,再輸入下列程式碼:
    String userid = (String)getRequestParam().get("userid");
    getSessionScope().put("userid", new Integer(userid));
    return "update";
    
  2. 儲存和關閉檔案。

執行 UserAdmin Portlet

如果要確認目前為止 UserAdmin Portlet中的頁面運作符合預期,您應該在 Rational Developer 所提供的內部瀏覽器中執行 JSP 檔。如果要執行 UserAdmin Portlet,請執行下列動作:

  1. 在專案瀏覽器中選取 AuctionPortlet 專案,從它的蹦現功能表中,選取執行 > 在伺服器中執行
  2. 這時您可能需要指定 WebSphere Portal 5.0 版測試環境伺服器作為目標伺服器。 由於您已有 WebSphere Portal 5.0 版測試環境,請選取它,並在「選取伺服器」精靈中按一下完成
  3. 檔案最後會顯示在瀏覽器中。您可以在這裡見到使用者將在入口網站中見到的輸入欄位、鏈結和佈置。
  4. 在「名稱」欄位中輸入 %,按一下尋找按鈕,以從資料庫中擷取現有的使用者。

    執行新建立的 Portlet

請注意,按建立鏈結或選取資料表中的使用者,分別會開啟 UserAdminCreate 或 UserAdminUpdate 頁面。 如果您在任何這些頁面中提供值,且按一下建立更新按鈕,便會接受新增和更新。 更新的資料應該會立即反映在 UserAdminView 頁面中。如果您的搜尋名稱符合您建立的使用者名稱(比方說,您可以利用萬用字元 % 來擷取所有使用者),當您從建立頁面回到時,應該會顯示新使用者。

在移到下一個練習之前,請先停止測試環境伺服器。 如果要停止測試環境伺服器,您只需要在「伺服器」視圖中選取它,再按一下停止伺服器工具列按鈕停止伺服器

現在您已準備好開始進行練習 1.5:新增搜尋拍賣網站清單及提供清單詳細資料的 Portlet

使用條款 | 讀者意見
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.