練習 1.5:新增搜尋拍賣網站清單及提供清單詳細資料的 Portlet

開始之前,您必須先完成練習 1.4:建立用來建立和更新使用者資訊的頁面

在這個練習中,您將建立其他 Portlet 來提供協同作業行為,以利用 Click-to-Action 機制,將資料從來源 Portlet 傳送給目標 Portlet。來源 Portlet (ListingSearch) 會利用 Session Bean 來存取拍賣項目資料。 利用 ListingSearch Portlet 來尋找特定清單之後,目標 ListingDetail Portlet 會顯示搜尋所找到之項目的詳細資訊。 不論在任何情況中,您都必須先建立 Portlet。

建立 ListingSearch Portlet

如果要建立 ListingSearch Portlet,請遵循下列步驟:

  1. 在專案瀏覽器中,展開「動態 Web 專案」資料夾,找出 AuctionPortlet 專案資料夾。 用滑鼠右鍵按一下專案資料夾,選取新建 > Portlet
  2. 在「新建 Portlet」精靈的起始頁面中,將預設名稱字首改成 ListingSearch
  3. 選取 Faces Portlet 圓鈕。
  4. 下一步
  5. 應用程式名稱下拉清單中,選取 AuctionPortlet 應用程式
  6. Portlet 標題欄位中,輸入清單搜尋
  7. 按一下完成

這時會在編輯窗格中開啟 ListingSearchView.jsp。

將資料表新增至 ListingSearch Portlet 頁面中

在 Page Designer 中開啟 ListingSearchView.jsp 檔之後,請遵循下列步驟來新增 Session Bean 資料作為 ListingSearch 頁面的資料來源:

  1. 刪除預設的將內容放在這裡。的文字。
  2. 從選用區的資料抽屜中,將 EJB Session Bean 物件拖曳到檔案中。
  3. 當 Session Bean 精靈開啟時,請按一下新建 EJB 參照按鈕。
  4. 展開 AuctionPortletEAR 和 AuctionEJB50 資料夾,選取 ListingFacade 來建立 Enterprise Bean 參照。按一下完成
  5. 在 Session Bean 精靈中,按下一步
  6. 選取 findByTitle(String title) 介面,供 Portlet 頁面的輸入欄位使用,再按下一步
  7. 請注意,這時會選取 title 欄位。按一下選項
  8. 標籤欄位中,輸入尋找。按一下確定
  9. 下一步,這時您應該會進入精靈的「結果表單」頁面。 在這個頁面中,您將定義擷取和顯示資料庫中之資料的資料表。
  10. 按一下來取消選取所有直欄,以便個別選取、組織和配置 Portlet 頁面所要使用之資料表的適當直欄。 之後,再選取下列直欄的勾選框:
  11. 利用上下箭頭按鈕來移動所選的資料直欄,使它們符合上述步驟所顯示的次序。
  12. 選取 itemid 直欄的標籤值,將它改成項目 ID
  13. 按一下完成來產生 UserAdminView.jsp 頁面的預設使用者介面。使用者介面看起來會如下:
    ListingSearchView.jsp
  14. 儲存檔案。

將 Java 頁面程式碼新增至 UserAdmin 頁面中

在這部分的練習中,您將新增 Java 頁面程式碼來完成下列動作:

  • 在階段作業範圍中儲存 title 參數,以便未來重新整理 Portlet 內容時,能夠重複使用它。
  • 利用階段作業範圍所儲存的參數來起始設定標題輸入欄位中所要顯示的參數。
  • 利用階段作業範圍所儲存 title 參數來起始設定結果資料。
  • 您可以利用下列步驟來新增 EJB 參照邏輯以及將呼叫和結果連結到使用者介面的程式碼:

    1. 從 Page Designer 的蹦現功能表中,選取編輯頁面程式碼
    2. 將下列粗體程式碼輸入 doListingFacadeLocalFindByTitleAction() 中:
      public String doListingFacadeLocalFindByTitleAction() {
          String title = getListingFacadeLocalFindByTitleParamBean().getTitle();
          getSessionScope().put("title", title);
                  try {
              listingFacadeLocalFindByTitleResultBean = 
              	getListingFacadeLocal().findByTitle(title);
                  } catch (Exception e) {
                      logException(e);
          }
          return null;
      }
      
    3. 將下列粗體程式碼輸入 getListingFacadeLocalFindByTitleParamBean() 中:
      public ListingFacadeLocalFindByTitleParamBean getListingFacadeLocalFindByTitleParamBean() {
          if (listingFacadeLocalFindByTitleParamBean == null) {
              listingFacadeLocalFindByTitleParamBean = new ListingFacadeLocalFindByTitleParamBean();
              String title = (String)getSessionScope().get("title");
              listingFacadeLocalFindByTitleParamBean.setTitle(title);
          }
          return listingFacadeLocalFindByTitleParamBean;
      }
      
    4. 將下列粗體程式碼輸入 getListingFacadeLocalFindByTitleResultBean() 中:
      public ItemData[] getListingFacadeLocalFindByTitleResultBean() {
          if (listingFacadeLocalFindByTitleResultBean == null) {
              String title = (String)getSessionScope().get("title");
              if (title != null) {
                  try {
                      listingFacadeLocalFindByTitleResultBean = getListingFacadeLocal().findByTitle(title);
                  } catch (Exception e) {
                      logException(e);
                  }
              }
          }
          return listingFacadeLocalFindByTitleResultBean;
      }
      
    5. 儲存 ListingSearchView.java。

    建立 ListingDetail Portlet

    如果要建立 ListingDetail Portlet,請遵循下列步驟:

    1. 在專案瀏覽器中,展開「動態 Web 專案」資料夾,找出 AuctionPortlet 專案資料夾。 用滑鼠右鍵按一下專案資料夾,選取新建 > Portlet
    2. 在「新建 Portlet」精靈的起始頁面中,將預設名稱字首改成 ListingDetail
    3. 選取 Faces Portlet 圓鈕。
    4. 下一步
    5. 應用程式名稱下拉清單中,選取 AuctionPortlet 應用程式
    6. Portlet 標題欄位中,輸入清單詳細資料
    7. 按一下完成

    這時會在編輯窗格中開啟 ListingDetailView.jsp 檔。

    將資料表單新增至 ListingDetail Portlet 頁面中

    在 Page Designer 中開啟 ListingDetailView.jsp 檔之後,請遵循下列步驟來新增 Session Bean 資料作為 ListingDetail 頁面的資料來源:

    1. 刪除預設的將內容放在這裡。的文字。
    2. 從選用區的資料抽屜中,將 EJB Session Bean 物件拖曳到檔案中。
    3. 當 Session Bean 精靈開啟時,請選取 ejb/ListingFacade,再按下一步
    4. 選取 findById(Integer itemid) 介面,供 Portlet 頁面的輸入欄位使用。
    5. 下一步
    6. 請注意,這時會選取 itemid 欄位。請選取 itemid 欄位的標籤值,將它改成項目 ID:
    7. 按一下選項
    8. 標籤欄位中,輸入尋找。按一下確定
    9. 下一步,這時您應該會進入精靈的「結果表單」頁面。 在這個頁面中,您將定義擷取和顯示資料庫中之資料的資料表單。
    10. 按一下來取消選取所有欄位,以便個別選取、組織和配置 Portlet 頁面所要使用之資料表的適當欄位。之後,再選取下列欄位的勾選框:
    11. 利用上下箭頭按鈕來移動所選的資料欄位,使它們符合上述步驟所顯示的次序。
    12. 按一下完成來產生 ListingDetailView.jsp 頁面的使用者介面。使用者介面看起來會如下:
      ListingDetailView.jsp
    13. 儲存檔案。

    將 Java 頁面程式碼新增至 UserAdmin 頁面中

    在這部分的練習中,您將新增 Java 頁面程式碼來完成下列動作:

  • 在階段作業範圍中儲存 itemid 參數,以便未來重新整理 Portlet 內容時,能夠重複使用它。
  • 利用階段作業範圍所儲存的參數來起始設定項目 ID 輸入欄位中所要顯示的參數。
  • 利用階段作業範圍所儲存 itemid 參數來起始設定結果資料。
  • 您可以利用下列步驟來新增 EJB 參照邏輯以及將呼叫和結果連結到使用者介面的程式碼:

    1. 從 Page Designer 的蹦現功能表中,選取編輯頁面程式碼
    2. 將下列粗體程式碼輸入 doListingFacadeLocalFindByIdAction():
      public String doListingFacadeLocalFindByIdAction() {
          Integer itemid = getListingFacadeLocalFindByIdParamBean().getItemid();
          getSessionScope().put("itemid", itemid);
                  try {
              listingFacadeLocalFindByIdResultBean = 
              	getListingFacadeLocal().findById(itemid);
                  } catch (Exception e) {
                      logException(e);
          }
          return null;
      }
      
    3. 將下列粗體程式碼輸入 getListingFacadeLocalFindByIdParamBean():
      public ListingFacadeLocalFindByIdParamBean getListingFacadeLocalFindByIdParamBean() {
          if (listingFacadeLocalFindByIdParamBean == null) {
              listingFacadeLocalFindByIdParamBean = new ListingFacadeLocalFindByIdParamBean();
              Integer itemid = (Integer)getSessionScope().get("itemid");
              listingFacadeLocalFindByIdParamBean.setItemid(itemid);
          }
          return listingFacadeLocalFindByIdParamBean;
      }
      
    4. 將下列粗體程式碼輸入 getListingFacadeLocalFindByIdResultBean():
      public ItemData getListingFacadeLocalFindByIdResultBean() {
          if (listingFacadeLocalFindByIdResultBean == null) {
              Integer itemid = (Integer)getSessionScope().get("itemid");
              if (itemid != null) {
                  try {
              listingFacadeLocalFindByIdResultBean = 
                           getListingFacadeLocal().findById(itemid);
                  } catch (Exception e) {
                      logException(e);
                  }
              }
          }
          return listingFacadeLocalFindByIdResultBean;
      }
      
    5. 儲存 ListingDetailView.java。

    新增通往 ListingSearch Portlet 的協同作業鏈結

    協同作業 Portlet 一詞是指頁面中的 Portlet 藉由共用資訊來互動的能力。 入口網站網頁中的一或多個協同作業 Portlet,可以自動反應來源 Portlet 中的動作或事件觸發的來源 Portlet 所產生的變更。 事件的目標 Portlet 則能夠作出反應,因此,使用者不需要在頁面的其他 Portlet 中進行反覆的變更或動作。 用來實作協同作業行為的機制稱為 Click-to-Action 事件

    請從來源 Portlet 的圖示啟動 Click-to-Action 事件。這個圖示會提供一份含有動作目標清單的蹦現功能表。 使用者選取特定目標之後,內容分配管理系統會以對應 Portlet 動作的形式,將資料遞送給目標。 當使用 Click-to-Action 遞送方法時,使用者只要按一下,就可以將資料從來源 Portlet 轉送給一或多個目標 Portlet,讓目標反應這個動作及顯示含有結果的新視圖。

    請利用下列步驟來設定 ListingSearch 和 ListingDetail Portlet 之間的協同作業行為:

    1. 在 Page Designer 中開啟 ListingSearchView.jsp。(在專案瀏覽器中,展開 AuctionPortlet 和 WebContent 資料夾,按兩下檔案。)
    2. Portlet 選用區抽屜中,將 Click-to-Action Output Property 輸出內容物件拖曳至標籤為 {itemid} 的資料表中的輸出欄位。

      附註:請務必將 Click-to-Action 輸出內容物件放到輸出欄位,不可放到它前面或後面。該輸出欄位應會強調顯示在矩形框中,類似如下所示:
      將輸出內容放到輸出欄位上
      (您可能必須將對話框移到一旁,才能看到輸出欄位選項。)

    3. 插入 Click-to-Action 輸出內容對話框中,提供下列值: 儲存檔案。
    4. 如果要確認已加入正確的 Click-to-Action 程式碼,請開啟「程式碼」視圖,確定檔案中包含下列程式碼:
      <h:outputText id="text3"
      	value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}"
      	styleClass="outputText">
      	<f:convertNumber />
      </h:outputText>
      	<c2a:encodeProperty type="itemid" 
      		namespace="http://auctionportlet" name="itemid"
      		value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}">
      	</c2a:encodeProperty>
      
      請注意強調顯示的 value 屬性。如果「輸出內容」未正確新增至頁面,這個屬性將會遺失。

    這些步驟將 ListingSearch 識別為來源 Portlet。之後,您必須將 ListingDetail 啟用成目標 Portlet:

    1. 在專案瀏覽器中,展開「AuctionPortlet > Portlet 部署描述子」。從 ListingDetail Portlet 的蹦現功能表中,選取協同作業 > 啟用目標
    2. 啟用協同作業 Portlet 對話框的資料類型欄位中,輸入 itemid
    3. 按一下動作欄位旁的瀏覽按鈕,選取 /ListingDetailView.jsp > form1 > button1。按一下確定
    4. 啟用協同作業 Portlet 對話框的標籤欄位中,輸入顯示詳細資料。按一下確定

    如果要確認已正確識別 Click-to-Action 來源,請在專案瀏覽器中,回到「Portlet 部署描述子」資料夾。 表示來源 Portlet (ListingSearch) 和目標 Portlet (ListingDetails) 的圖示應該看起來如下:
    Click-to-Action Portlet

    測試在 Listing Portlet 中的協同作業行為

    如果要確認 ListingSearch 和 ListingDetail Portlet 的運作能夠符合預期,您應該在測試環境中執行它們。

    如果要執行這個 Portlet,請執行下列動作:

    1. 在專案瀏覽器中選取 AuctionPortlet 專案,從它的蹦現功能表中,選取執行 > 在伺服器中執行
    2. 由於您已定義了 WebSphere Portal 5.1 版測試環境,請選取它,然後在「選取伺服器」精靈中按一下完成
    3. Portlet 會顯示在瀏覽器中。您可以在這裡見到使用者將在入口網站中見到的輸入欄位、按鈕和佈置。
    4. 在 ListingSearch Portlet 中,輸入萬用搜尋字元 % 來列出所有項目,再按一下尋找按鈕。送出按鈕下的表格會顯示符合搜尋字串的拍賣項目。
    5. 按一下項目 ID 直欄中的 Click-to-Action 圖示Click-to-Action 圖示,將清單 ID 傳給 ListingDetail Portlet。這時 ListingDetail Portlet 會顯示搜尋所找到之項目的詳細資訊。

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

    現在您已準備好開始進行練習 2.1:建立新入口網站以顯示 Portlet 應用程式

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