練習 1.2:準備開發 Portlet 和定義應用程式流程
開始之前,您必須先完成練習 1.1:匯入必要的資源。
在上一個練習中,我們建立了 AuctionPortlet 專案來包含這個指導教學所要開發的 Portlet。為了準備建立使用者介面以及將資料新增至特定 Faces Portlet 中,我們利用 Web 圖解編輯器來定義應用程式流程。Web 圖解是用來定義應用程式流程的唯一方法,但它尤其適合 Faces 型 Portlet 應用程式的視覺化開發。
建立 Web 圖解以建構應用程式流程
Web 圖解是協助您視覺化和變更 Web 應用程式(如 Faces 或 Struts 型 Portlet 應用程式)流程的檔案。Web 圖解編輯器是用來編輯 Web 圖解的視覺化編輯器。
當您新增節點、連線和其他元件至 Web 圖解中,這通常稱為圖片圖解。
Web 圖解由節點和節點之間的連線組成。
節點是一個代表 Portlet JSP 頁面或 JavaTM Bean 等資源的圖示。
如果資源存在,節點稱為已實現;如果資源不存在,節點稱為未實現。
已實現的節點是彩色的,名稱是粗體。
未實現的節點是灰色圖示。
我們將在 Web 圖解中,新增三個 JSP 節點。
一個是主要節點,可用來導覽至兩個鏈結的詳細資料節點。
- 當您建立 Auction Portlet 專案時,精靈會自動建立預設的 Web 圖解檔,稱為 diagram.gph。
在專案瀏覽器中,展開「動態 Web 專案」和 AuctionPortlet 資料夾,再按兩下 Web 圖解
這時會將檔案開在編輯窗格中,且會有如何使用 Web 圖解編輯器的指示。

- 工作區右側作用中視圖是一個選用區,它包含若干抽屜,其中有可放在 Web 圖解的物件。您將從選用區中,新增網頁物件到 UserAdmin.gph 檔中。選用區會提供「黏貼」拖放行為,這表示您在選用區中按一下物件之後,不需要在拖放作業期間按住滑鼠按鈕。
您只需要將游標移到 Web 圖解,再按一下,就可以放下物件。
如果要建立第一個節點,您可以從專案瀏覽器中,將 AuctionPortlet 專案所建立的起始 JSP 檢視頁面 UserAdminView.jsp 拖曳至編輯器中。由於這個檔案已建立好,因此,它會顯示為已實現的物件。
- 將第一個網頁物件拖放到編輯器中。將網頁的名稱改成 UserAdminCreate.jsp。
- 重複上一步驟來建立稱為 UserAdminUpdate.jsp 的網頁。
附註:您可以拖曳節點來重新定位它們。
- 之後,您將建立網頁節點之間的連線來指定 Portlet 中的資料流:
- 從 UserAdminView.jsp 蹦現功能表中,選取連線。
從 UserAdminView.jsp 中,將連線拖曳至 UserAdminCreate.jsp 節點。
- 從選擇連線對話框中,選取網頁鏈結,再按一下確定。
- 從 UserAdminCreate.jsp 節點蹦現功能表中選取連線,將連線拖回 UserAdminView.jsp 節點。
- 從選擇連線對話框中,選取 Faces 輸出,再按一下確定。
- 輸入檢視來改寫強調顯示的 <new>,以命名新的連線。
- 從 UserAdminView.jsp 蹦現功能表中,選取連線。
從 UserAdminView.jsp 中,將連線拖曳至 UserAdminUpdate.jsp 節點。
- 從選擇連線對話框中,選取 Faces 輸出,再按一下確定。
- 輸入更新來改寫強調顯示的 <new>,以命名新的連線。
- 從 UserAdminUpdate.jsp 節點蹦現功能表中選取連線,將連線拖回 UserAdminView.jsp 節點。
- 從選擇連線對話框中,選取 Faces 輸出,再按一下確定。
- 輸入檢視來改寫強調顯示的 <new>,以命名新的連線。
- 儲存 Web 圖解。
圖解應該看起來如下:

已定義的鏈結會在 Portlet 頁面中準備適當的鏈結,讓使用者起始的資料能夠經由應用程式而適當傳送。
當 UserAdminView 頁面要求使用者建立或更新動作時,會開啟適當的表單。
這些表單送出必要的資訊之後,UserAdmin Portlet 查詢功能就能夠使用新的使用者資訊。
現在您已準備好開始進行練習 1.3:開發 UserAdmin 頁面。