WebSphere Portal 6.1 新特性：輕鬆打造 HTML 靜態頁面

CloudSpace發表於2010-04-08

在企業級開發當中，HTML 設計人員與掌握 J2EE/Portlet 技術的通常不是同一個人，而以前的 Portal 頁面開發卻需要兩者的結合。這會使開發流程稍顯複雜。現在，隨著 WebSphere Portal 6.1 的新特性，使得我們能夠直接使用標準的 HTML 靜態頁面作為 Portal 頁面，甚至可以在其中引用 portlet 作為動態內容。

當前解決方案及問題（基於 JSP 的頁面）

我們知道，在 WebSphere Portal 6.1 之前的版本中建立 / 開發 WebSphere Portal 頁面佈局主要是基於 Theme & Skin（主題與皮膚）來實現的。簡單的來說，WebSphere Portal 頁面設計人員需要精通 JSP/J2EE 以及 Portal API 的相關技術。需要定義 JSP 檔案，其中又要利用 JSP tag 來生成導航元素以及嵌入 Portlet。而頁面中嵌入的 Portlet 佈局也必須遵循 WebSphere Portal 的佈局模型。

這一切雖然靈活且功能強大，但無疑加重了頁面設計人員的負擔，需要額外掌握大量的開發技能才能勝任，並且在開發時無法實時預覽最終展示的效果。有沒有什麼方法能讓 Portlet 開發人員專注於 Portal 的相關開發，而頁面設計人員專注於頁面佈局的設計而無需引入大量 Portal 技術呢？答案就是本文即將介紹的 WebSphere Portal 6.1 中對 HTML 靜態頁面的支援了！

WebSphere Portal 6.1 的新特性：對 HTML 靜態頁面的支援及其優勢

在 WebSphere Portal 6.1 中引入了一種新的方法來建立頁面佈局，這就是 HTML 靜態頁面。說是靜態頁面，其實也不完全是傳統意義上的靜態頁面，頁面上也可以包含動態內容（甚至是 Portlet 都可以），我們在後文中會詳細介紹動態內容的部分。這裡所指的靜態頁面，很大的程度上是相對於傳統的基於主題與皮膚的動態頁面來說的。它能夠讓頁面設計人員無需掌握任何 JSP/J2EE 相關知識，也無需瞭解 WebSphere Portal 相關的程式設計模型即可使用標準的 HTML/CSS/JavaScript. 來編寫自己的頁面佈局。當然也支援標準的 HTML 編輯器來進行所見即所得的開發以及預覽功能。甚至還能在其中包含 Portlet 作為動態內容，這無疑清晰了開發流程中的網頁設計人員與 Portlet 開發人員之間的職責範疇，讓每個人各司其職，降低了模組之間的耦合度。下面讓我們來詳細看看新舊兩種方式給我們帶來的差別。

功能介紹

主題與皮膚（基於 JSP 的頁面）功能介紹

首先讓我們來簡單回顧一下傳統的頁面佈局開發方式。

圖 1. 主題與皮膚

如圖 1 所示，主題所定義的 JSP 檔案基於 WebSphere Portal 的程式設計模型，包含了一些展示時所需要的 HTML 標記，並且使用了 JSP tag 來使用 WebSphere Portal 提供的導航模型並生成相應的 HTML 標識。而皮膚則通過類似的方法來展示 Portlet 的標題以及邊界框。至於內容區域，則是由 WebSphere Portal 的佈局模型來負責安排以及展示其中的 Portlet。

在這種程式設計模型下，各種資原始檔（例如圖片、CSS 等）直接儲存在伺服器的檔案系統中。引用時需要使用 WebSphere Portal 提供的一些 API tag 才行，而不能用 URI 相對路徑來直接訪問。

可以看出，這種模型無疑十分靈活並且功能強大，但是正如前面提到的那樣，它也十分複雜，它需要 HTML 設計人員同時掌握 J2EE/Portlet 的相關技能。在企業級開發當中，HTML 設計人員與掌握 J2EE/Portlet 技術的通常並不是同一個人。這樣，開發流程就會變得複雜起來

HTML 靜態頁面功能介紹

基於 HTML 的靜態頁面

好吧，讓我們來看看新的基於 HTML 的靜態頁面能給我們帶來什麼。

圖 2. 靜態 HTML 頁面

如圖 2 所示，這時我們的所有 HTML 頁面、CSS、JavaScript. 以及圖片均可以包含在一個壓縮包裡。而 WebSphere Portal 對這裡所說的 HTML/CSS/JavaScript. 均提供標準功能的全面支援。我們可以用所見即所得（WYSIWYG）的方式，使用標準的 HTML 編輯器進行開發以及預覽，而這是在傳統的主題皮膚開發模式下無法享用的。

此時，頁面的內容以及佈局都包含在一個簡單的 HTML 檔案中，而各種資原始檔都和這個 HTML 檔案一起包含在同一個壓縮檔案裡。並且，我們可以在 HTML 檔案中通過相對 URI 而不是使用 Portal API 提供的相應 tag 來引用這些資原始檔。

在 HTML 靜態頁面中引入動態 Portlet 內容

目前為止，這只是一個傳統的靜態頁面而已，完全沒有用上 WebSphere Portal 所能提供的強大功能。針對這點，我們可以通過將 Portlet 作為動態內容包含在這個靜態頁面上來擴充套件它的功能和應用範圍。

這裡我們可以順便對目前為止的幾個術語做一下簡單的介紹：

靜態佈局：基於簡單的 HTML 頁面的佈局，其中可能包含了對 Portlet 的引用。
靜態頁面：基於靜態佈局的 WebSphere Portal 頁面。
動態佈局：標準的 WebSphere Portal 的基於行 / 列的佈局方式。
動態頁面：基於動態佈局的 WebSphere Portal 頁面。

我們不僅能在靜態頁面上展示 Portlet 內容，還能夠將其它 WebSphere Portal 特性在靜態頁面上提供支援，例如訪問許可權控制、個性化、Portlet 使用者資料等等。可以參考 WebSphere Portal 資訊中心來獲取靜態頁面對更多 WebSphere Portal 特性的支援資訊。

HTML 靜態頁面的打包結構、部署方式以及儲存方式

下面，我們來看一下在 WebSphere Portal 中具體是如何使用靜態頁面的。首先，如圖 3 所示，我們的靜態頁面目錄結構包括如下檔案：

圖 3. 靜態頁面打包結構

當然這只是一個簡單的例子，但已經能完全包含我們所要討論的內容。index.html 是整個包結構裡唯一一個必須存在的檔案，而其它的 CSS/JavaScript/ 圖片等檔案都是可選的，整個包裡甚至可以只包含一個 HTML 檔案。與 index.html 相同的目錄可以存放 CSS/JavaScript. 等檔案，而圖片及其它資原始檔可以放在子目錄裡。而且，整個目錄結構都與標準的 Web 包結構一致。再把這個目錄打包成一個 zip 檔案就可以部署到 WebSphere Portal 上面了。需要注意的是，在當前的 WebSphere Portal 版本中，這個 zip 檔案的大小要求在 1 MB 以內才能夠被良好的支援。

HTML 靜態頁面的部署可以通過如下方式：

WebSphere Portal 的管理控制頁面；
XMLAccess 命令；
WebSphere Portal 指令碼介面；

以第一種方式為例，在管理控制頁面上建立新頁面時，選擇頁面型別為“靜態內容”，如圖 4 所示。

圖 4. 選擇頁面型別

而在接下來的頁面屬性（圖 5）上，指定靜態頁面的起始頁面檔名，以及壓縮包或者 HTML 頁面的本地路徑。值得注意的是最後一個選項，Portlet 視窗的顯示選項。

圖 5. 提供靜態頁面相關屬性

在上圖的最後一個選項中，指定的是 Portlet 如何在最終的頁面中展示。有如下幾種選擇：

Included Markup：Portlet 生成的 HTML 片段會在頁面展示的時候插入到頁面當中，並且在同一個 HTTP 響應中返回。
IFrame：Portlet 可以通過 IFrame. 來展示以實現非同步載入。
AJAX：Portlet 插入到 HTTP 響應中的 HTML 片段包含了一個指向 Portlet feed 的連結。靜態頁面上提供的 Javascript. 指令碼可以以 AJAX 請求的方式從這個連結中獲取到內容。

在下面的例子裡，將主要以第一種方式來展示 Portlet。

最後，看一下靜態頁面部署到 WebSphere Portal 上之後將以何種方式儲存。

圖 6. 靜態頁面儲存方式

可以看出，所有的檔案都是儲存 WebSphere Portal 的資料庫中的，而不是像主題皮膚那樣儲存在檔案系統裡。

實戰 HTML 靜態頁面

實戰一：簡單的純靜態頁面

瞭解了靜態頁面的概念之後，讓我們先來看一個最簡單的例子。一個單純的 HTML 靜態頁面，不含任何 Portlet 動態元素，也不包含對 CSS/Javascript. 以及圖片的引用。整個原始碼就只有如下的這個 html 檔案：

清單 1. test1.html

				
  
   
    Sample Static Page 
     
		 body,td,th { 
			 font-size: 18px; 
		 } 
		 body { 
			 margin-left: 0px; 
			 margin-top: 0px; 
			 margin-right: 0px; 
			 margin-bottom: 0px; 
		 } 	
	  
   
   
    This is a static page sample as standalone Web pages.

這是一個非常簡單的 HTML 頁面，這樣一個標準的 HTML 頁面如何整合到 WebSphere Portal 當中呢？我們用 WebSphere Portal 的管理控制頁面來建立一個新頁面 test1。其實建立一個靜態頁面的步驟和以前建立動態頁面基本一致，所不同的就是需要填寫一些額外的屬性。

通過在 WebSphere Portal 的頁面管理裡點選“新頁面”來建立一個新的 Portal 頁面：

圖 7. 建立新頁面

在頁面屬性裡提供頁面標題及唯一標識，這裡我們把新靜態頁面叫做“test1”：

圖 8. 提供新頁面標題

在頁面型別裡選擇型別為“靜態內容”，並且點選下面的連結來提供頁面佈局屬性：

圖 9. 選擇頁面型別

之後在新開啟的頁面佈局屬性頁可以提供靜態頁面相關的各種選項：

靜態頁面佈局檔名；
包含了上述檔案的壓縮包或者 HTML 檔案的本地位置；
Portlet 視窗的展現方式。

圖 10. 提供靜態頁面相關屬性

好了，大功告成。現在我們已經可以通過 WebSphere Portal 來訪問新建立的靜態頁面了，如下圖中的“test1”就是剛剛建立的靜態頁面。

圖 11. 靜態頁面列表

點選之後會開啟一個新的視窗：

圖 12. 靜態頁面（在新視窗開啟）

恩，也許這樣在新視窗顯示頁面並不是你想要的效果，是否想讓新頁面的內容只顯示在內容區域裡而不是新開視窗？像圖 13 這樣？

圖 13. 靜態頁面（內嵌在內容區域裡）

其實這種效果實現起來也很簡單，只需要去除掉 HTML 頁面原始碼中的相關 tag 即可。注意在這種方式下，依然是由主題來控制導航欄和選單條的展示，而 HTML 程式碼只負責內容區域裡的相關展示。

清單 2. test2.html

				
     
		 p { 
			 font-size: 18px; 
		 } 
		 body { 
			 margin-left: 0px; 
			 margin-top: 0px; 
			 margin-right: 0px; 
			 margin-bottom: 0px; 
		 } 	
	  
	
 This is a static page sample as part of the portal content area.

實戰二：包含 Portlet 動態元素的靜態頁面

之前介紹過靜態頁面也能夠包含動態內容，下面就來看看都有哪些動態內容可以用：

Portlet 微格式：定義了 Portlet 的視窗及其動作，例如“修改預設設定”/“配置”/“最大化”/“最小化”/“刪除”等。
Container 微格式：定義了 Portlet 容器以用來包含各種 Portlet。
Navigation 微格式：定義了靜態頁面展示時對導航支援。

讓我們來看一下如何在靜態頁面中引用 Portlet，其實很簡單：

清單 3. test3.html

				
      This is a static page example with portlet. 
      Manage My Portlets 
       
          
          
       
	  
從上面程式碼可以看出，使用了一些 HTML 語義標識來實現對 Portlet 的引用。這些語義標識將由伺服器端負責解釋並在最終展示時替換。這裡需要注意的有：

所有的語義標識都必須包含在
標籤中。
"portlet-container"微格式來定義一個 Portlet 容器，裡面可以包含零個或多個 Portlet 視窗。
"portlet-window"微格式定義了一個 Portlet 視窗，它用來展示頁面上的一個 Portlet 例項。最後通過"portlet-definition"來引用一個具體的 Portlet。這裡的“wps.p.Manage My Portlets”是我們所想引用的 Portlet 的唯一標識，這個標識可以通過 Portlet 的管理頁面來獲得。如下圖所示：

圖 14. Portlet 管理頁面

最後這個包含了 Portlet 的靜態頁面效果如下：

圖 15. 靜態頁面（包含了 Portlet 動態內容）

你是否好奇這些動態語義片段最終將被 WebSphere Portal 解釋成怎樣的程式碼？我們來看一個 "portlet-window"微程式碼最終在客戶端解釋的樣例：

清單 4. 服務端解釋過之後的微程式碼

				
  
    
       
         PetStorePortlet 
       
       
         Actions 
          
             
               Back 
             
             
               Restore 
             
             
               Minimize 
             
             
               Maximize 
             
             
               Delete

這裡可以看出，解釋過的 Portlet 動作將遵循 REST 模式，即安全的可重複操作將被解釋為“GET”動作，而非安全的不可重複的操作將被解釋為“POST”動作（如上面的刪除操作所使用的就是“POST”動作）。

還有一點值得注意的是，靜態頁面中包含的 Portlet 是不能像動態頁面那樣可以通過 WebSphere Portal 的頁面管理功能來移動或者刪除的。必須通過修改 HTML 檔案然後在 WebSphere Portal 的頁面編輯中更新它來實現。同樣需要注意的是，靜態頁面和動態頁面之間是不能互相轉換的，如果需要更改頁面型別，我們需要先刪除此頁面然後按照新需求來建立新型別的頁面。

總結

目前為止，本文只介紹了靜態頁面佈局的幾個簡單例子。例如，如何部署一個純靜態的 HTML 頁面，如何部署一個包含動態內容（Portlet）的靜態頁面。但其實 WebSphere Portal 還提供了對靜態頁面更多更高階的支援：

導航選項
Breadcrumb
本地化支援
資源定位
拖拽功能
Live text 功能
Portlet 之間的通訊互動

這些方面的資料都可以通過 WebSphere Portal 的資訊中心來學習。相信通過靈活的使用 HTML 靜態頁面，將會有助於我們更加方便的打造個性化的頁面佈局，並且有利於簡化我們的開發流程。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/14789789/viewspace-631578/，如需轉載，請註明出處，否則將追究法律責任。

WebSphere Portal 6.1 新特性：輕鬆打造 HTML 靜態頁面

相關文章