練習 2.1:建立新入口網站以顯示 Portlet 應用程式

開始之前,您必須先完成練習 1.5:新增搜尋拍賣網站清單及提供清單詳細資料的 Portlet

在這個練習中,您將建立一個新的入口網站應用程式,其中含有目前為止所建立的 Portlet 頁面。

建立入口網站專案

如果要建立拍賣入口網站專案,請遵循下列步驟:

  1. 從工作區功能表中,選取檔案 > 新建 > 入口網站專案
  2. 在「新建入口網站專案」精靈的起始頁面中,將 AuctionPortal 輸入名稱欄位中。
  3. 請注意:WebSphere Portal 版本的預設值是 5.1。按下一步
  4. 選取網站的預設主題。在這個指導教學中,請選取 WebSphere 主題。
  5. 選取 WebSphere 主題的相關預設外觀。請注意,入口網站的預設外觀一律會有相關的預設主題。在這個指導教學中,請選取概要外觀。

    預設外觀有兩個類型。整體入口網站一個,主題一個。在這個精靈中,您只要指定所選預設主題的預設外觀。 (入口網站只能有一個預設外觀。) 通常每個主題都會定義一個預設外觀,但很少使用入口網站的預設外觀。

  6. 按一下完成。如果系統要求您切換至「Web 視景」,請按一下確定

Portal Designer 會顯示專案的入口網站配置檔,入口網站配置檔會顯示含有一個標籤和一個子頁面的預設導覽結構:
入口網站配置檔
Portal Designer 會提供一個專用的編輯器,讓您使用一些熟悉的入口網站元素,其中包括標籤、網頁、導覽以及主題和外觀,這些元素連同階式樣式表,都可以讓您控制入口網站的外觀與操作方式。

建立包含 Portlet 應用程式的標籤和網頁

請利用 Portal Designer 來建立已建立的 Portlet 的入口網站佈置元素:

  1. 選取 Label1,再選取「內容」視圖標籤。按一下「內容」視圖中的標題標籤,將 Label1 改成拍賣。按 Enter 鍵。
  2. 選取 Page1,再選取「內容」視圖標籤。按一下「內容」視圖中的標題標籤,將 Page1 改成登錄。按 Enter 鍵。
  3. 從選用區的入口網站抽屜中,將頁面元件拖曳到拍賣標籤中。這會在「登錄」頁面旁加入一個新頁面。請依照上一步驟的方式,將新頁面的標題改成清單

新增列和直欄以佈置入口網站網頁

入口網站網頁提供一種組織架構,供您將內容新增至入口網站中。您已利用先前的練習所定義之 Portlet 的形式,建立了這個內容。 如果要將多個 Portlet 新增至個別頁面中,您可以用列和直欄的某種組合來定義一個空間佈置,以便用符合邏輯的樣式將 Portlet 放在頁面中。

依預設,您建立的每個頁面都會包括單一直欄和單一列。 如同 Web 應用程式中的任何「表格」一樣,新增直欄和列的程序很簡單。 (請注意,表格象徵不是標準入口網站專有名詞,它只用來提供指示。) 由於您要將兩個 Portlet 新增至清單頁面中,因此,您可以將另一個「資料格」新增至「清單」頁面佈置中,在這裡就是直欄。 您可以用兩種方式來執行這個動作:

不論任何一種情況,都會建立其他的直欄,以便稍後插入 ListingDetail Portlet。入口網站配置會顯示空白直欄:
入口網站配置檔

將 Portlet 新增至入口網站網頁中

現在,在「拍賣」標籤下,有一些含有佈置元素的新頁面,您可以利用下列方式來新增先前的練習所建立的 Portlet:

  1. 選取「登錄」頁面。
  2. 從選用區中,將 Portlet 項目拖曳到「登錄」頁面的直欄中。請從插入 Portlet 對話框的選項中,選取「使用者管理 Portlet」,再按一下確定

    請注意,您也可以利用「概要」視圖來執行相同的動作。請在「概要」視圖中,展開「佈置」節點,再展開「登錄」節點。 在「直欄」之下,您會見到 UserAdmin Portlet 圖示。 請選取直欄,按一下滑鼠右鍵來開啟蹦現功能表。 請注意階式功能表,您可以利用它們來將其他 Portlet 新增至頁面中。
    「概要」視圖中的 Portlet

  3. 在導覽區中,按一下清單來選取「清單」頁面。現在,您已準備好開始將協同作業清單 Portlet 新增至「清單」頁面中:
    1. 利用上一步驟所說明的方法之一,將 ListingSearch Portlet 插入「清單」頁面的第一個直欄中。
    2. 選取 ListingSearch Portlet 右側的直欄,插入 ListingDetail Portlet。
  4. 儲存檔案。

    更新的「清單」頁面應該看起來如下:
    「清單」頁面

這時入口網站已接近完成。 在下面的練習中,您將學會如何利用某些與 Portal Designer 一起運作的專用編輯器來自訂入口網站的外觀與操作方式。

現在您已準備好開始進行練習 2.2:自訂入口網站

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