IBM Mashup Center：OpenSocial 互操作性

轉自：http://www.ibm.com/developerworks/cn/lotus/mashups-opensocial/index.html

背景

作為 Web 2.0 技術的領袖和革新者，IBM 定義了一個可重用的元件技術，叫做 iWidgets，它允許客戶快速構建和部署情景應用。iWidget 技術的關鍵部分是 iWidget 容器。容器管理 iWidget 的生命週期，並幫助 IBM 及其客戶將多種內容快速、輕鬆地聚合到強大的情景應用中。現在，iWidget 及其容器（稱為 Mashup Enabler）用在了各種 IBM 產品中，包括 IBM WebSphere® Portal、IBM Lotus® Connections 和 Business Process Manager (BPM) 堆疊中。

IBM 業務戰略的一個關鍵部分是提供高可用性產品和推廣開發計算技術，使其客戶能夠構建最能滿足他們需求的解決方案。作為此戰略的一部分，IBM 一直與 OpenAjax Alliance 合作，OpenAjax Alliance 是一個致力於建立可互操作的 widget 技術的企業供應商團體，包括 Tibco、Microsoft® 和 Adobe®。

例如，在消費領域，一個名為 OpenSocial 的標準悄然興起。這一社群驅動的規範定義了一個基於瀏覽器的元件模型，叫做 gadget。此外，OpenSocial 定義了一個 API，用於訪問關於使用者檔案及其社交圖（比如其朋友、活動、共享應用、身份驗證和授權）的資訊。一個名為 Shindig 的 Apache Software Foundation 的開源專案提供了一個 OpenSocial 的參考實現。

隨著行業發展，如 IBM 之類的領先企業必須提供戰略，允許客戶根據其獨特的業務需求選擇合適的元件模型。作為行業領袖，IBM 正與這些開放社群合作，通過新增企業功能和提高與其他元件的互操作性改進這些技術。本文通過展示如何在 Mashup Center 中使用 OpenSocial gadget 介紹了在元件模型之間實現互操作性的幾個基本步驟。

Mashup Center 和 OpenSocial 整合

各種 Web 2.0 使用者介面元件的格式也日益多樣化，需要工具將其組合在一起。這些 Web 元件經常互動並且相互傳送訊息，有時會導致互操作性問題。Mashup Center 不僅提供了工具用來發現並將不同的 widget 元件組裝到同一頁面上，包括 OpenSocial gadget，而且提供了功能使其互聯而且能夠跨各種元件保持這些連線。

Mashup 頁面

mashup 頁面是一個簡單的 HTML 標記，可以包含到 iWidget 和其他類 gadget 的引用。Mashup Center Livetext 框架解析 HTML 並將請求轉交給不同的 widget 和 gadget 容器以呈現 widget。頁面標記包含其他後設資料，比如標題、首選項、連線以及其他元件，遵守宣告性語法集合，用於將 iWidget 例項放到更廣泛的標記集合中，比如 HTML。此宣告式語法稱為 iWidget 微格式。

清單 1 是一個 mashup 頁面示例，包含 iWidget、OpenSocial gadget 和其他相關後設資料。

清單 1. 樣例 mashup 頁面

  
   
   
   
     
       
      	 /mum/widget-catalog/images/widgetPub.png
       
      	
      	
      	  
      		iWidget Publisher
      	  
      	
     
     
     
      	
      	
      	
      		
      			
      			/mum/widget-catalog/images/widgetSub.png
      			
      		
      		
      			
      				iWidget Subscriber
      			
      		
      	
      	
      		
      			random-number
      		
      		
      			random-number
      		
      	
      
      
      	
      	
      
      
      	
      	
      

事件操作

現在，我們看一下 iWidget 元件模型和 OpenSocial 容器提供的以下通訊模型：

• iWidget 上的事件操作
• OpenSocial gadget 上的事件操作

iWidget 上的事件操作

iWidget 元件模型提供了一個事件操作集合。

Mashup Center 利用 OpenAJAX Hub 作為其底層通訊實現。OpenAJAX Hub 是一組標準的 JavaScript™ API，提供了一個訊息傳遞引擎，支援同一頁面上使用的 Ajax 庫和 Web 2.0 元件的安全性和互操作性。這些 Web 元件間的通訊通過一個名為 Managed Hub 的託管安全管理器傳遞。Managed Hub 接受或者拒絕連線，支援與其他元件的安全整合。

以下是一些 iWidget 事件操作 API。有關廣播程式碼示例，請參見 widgetPub.js 和 widgetSub.js：

• broadcastEvent(String targetEvent, Object payload, String payloadType, String sourceid)。允許頁面元件將事件廣播到頁面上的所有 widget 或元件。
• publishEvent(String topic, Object payload, String payloadType, String sourceid)。允許頁面元件將可用的全域性事件公佈到所有其他頁面元件。
• subscribeEvent(String event, Object object, String eventCallback, String subscribeCallback, String sourceid)。允許頁面元件將一個可用的全域性事件訂閱給所有其他頁面元件。
• unsubscribeEvent(Object subscriptionHandler, String sourceid)。允許頁面元件取消所有其他頁面元件對可用的全域性事件的訂閱。

OpenSocial gadget 上的事件操作

OpenSocial 使用 Remote Procedure Call (RPC) 及其容器中的 pubsub API 來實現 gadget 間的通訊。例如，Shindig rpc.js 為 OpenSocial gadget 和容器提供了底層通訊機制。在一個跨域通訊場景中，rpc.js 確保訊息接收方知道建立方而建立方知道訊息接收方。

pubsub.js 和 pubsub-router.js 介面呼叫 RPC API 用於 gadget 到 gadget 通訊以及容器和 gadget 之間的訊息路由。

要在 OpenSocial 容器頁面上啟用 pubsub 功能，可以下載 rpc.js 和 pubsub.js 介面，使用 HTML

現在，我們來看一下 gadget 級的釋出和訂閱 API。gadgets.pubsub API 提供了針對 gadget 的釋出和訂閱操作。要使 API 可用，gadget 定義檔案必須將 pubsub 要求的特性（）宣告為 的子元素，如清單 3 所示。

清單 3. gadget 定義檔案

以下是釋出和訂閱 API 的說明：

注：有關程式碼示例，請參見本文下載部分 sampleGadgets.war 檔案中的 osPub.xml 程式碼示例。

• gadgets.pubsub.subscribe(channel-name, callback)。訂閱到通道的 gadget。callback 是接收的訊息呼叫的函式。
• gadgets.pubsub.publish(channel-name, message)。將型別為 String 的訊息釋出到通道。
• gadgets.pubsub.unsubscribe(channel-name)。取消訂閱到通道的 gadget。

啟用 Mashup Center 的 OpenSocial 特性

以下步驟展示瞭如何使用補丁包 2.0.0.1 啟用 Mashup Center 2.0 的 OpenSocial 特性。使用帶有 Apache Maven 的 Apache Shindig BETA3 構建一個 Shindig WAR 檔案。

要下載和安裝必要的程式並構建 Shindig WAR 檔案，按以下步驟操作：

注：如果第一次安裝這些程式，確保向系統 PATH 變數新增可執行路徑，這樣可以在命令提示符處執行它們。

1. 下載並安裝 Apache Maven 2.0.10。
2. 下載並安裝 SVN 客戶機。
3. 下載並安裝 JRE6。
4. 下載並安裝 在 Microsoft Windows® 上執行的補丁。
5. 在命令提示符處，將目錄改變到需要的資料夾，並輸入以下命令來下載 Shindig BETA3：
   
   svn co http://svn.apache.org/repos/asf/incubator/shindig/tags/shindig-project-1.1-BETA3-incubating/
6. 重點：在 Web 瀏覽器中，導航到 Apache 站點並下載 SHINDIG-1288.patch 檔案。此補丁修改 Shindig gadgets.js 檔案並將預設安全伺服器 serverBase 的值改成完整 URL。您可能想在一個文字編輯器中開啟下載檔案來檢視變更。
7. 要應用 SHINDIG-1228.patch，轉到命令提示符處，找到補丁位置，並輸入 patch -p0。指定以下檔案路徑，這樣它知道將補丁應用到哪兒：
   
   shindig-project-1.1-BETA3-incubating location>/javascript/container/gadgets.js
8. 將目錄改為 並輸入 mvn 命令。下載 maven 庫和構建 Shindig WAR 檔案需要一些時間，要稍等一會。
9. 成功構建 maven 後，將 WAR 檔案定位到以下位置：
   
   \java\server\target\shindig-server-1.1-BETA3-incubating

按以下步驟在 Mashup Center 2.0.0.1 或更高版本上部署 Shindig WAR 檔案。

1. 啟動 Mashup Center，使用 URL 轉到 IBM WebSphere Application Server 管理控制檯：
   
   http:///admin
2. 部署 shindig-server-1.1-BETA3-incubating.war。確保選擇 / 作為上下文根，因為 Shindig 預設執行在 ROOT 上。您可能要停止 DefaultApplication 和其他執行在 ROOT 上的應用程式，以便 Shindig 可以正確啟動。

按以下步驟啟用 Shindig 容器：

1. 在 Mashup Center 安裝根下面，將目錄改為 mm/config 並在 configService.properties 中註釋掉以下行：
   
   com.ibm.mashups.common.js=/gadgets/files/container/../../js/core:rpc?
   debug=1,/gadgets/files/container/util.js,/gadgets/files/container/gadgets.js,
   /gadgets/files/container/../../js/rpc.js?c=1&debug=1,
   /gadgets/files/container/../../js/pubsub.js?c=1&debug=1,
   /mum/js/com/ibm/mm/enabler/opensocial.js
2. 在命令提示符處，轉到 MashupCenter_install_root/Config 資料夾並輸入 config.bat update-was-config。此任務使 Mashup Center 能夠從根 Web 上下文引導 Shindig 伺服器。

按以下步驟將 OpenSocial gadget 新增到 Mashup Center 皮膚：

1. 使用以下上下文根將 sampleGadgets.war 部署到 Mashup Center WebSphere Application Server 伺服器：/sampleGadgets。本 WAR 檔案包含在稍後要介紹的樣例場景中使用的 widget 和 gadget。
2. 將 catalog_os.xml 複製到 MashupCenter_install_root/mm/config/。本檔案包含其他樣例 gadget，供您參考。
3. 更改 catalog_os.xml 檔案以根據您的環境反映正確的 mm_OSGadget 定義 URL。
   
   

   注：第一步假設您要將 gadget 部署到使用埠 9080 和 /sampleGadgets/ Web 上下文的簡單 webapp。因此，widget 定義應該如下所示：

   http://localhost:9080/sampleGadgets/osgPub.xml
4. 儲存您的更改。
5. 找到 MashupCenter_install_root/mm/config 資料夾，並通過將 標籤直接新增到 元素下面，編輯 catalog_default.xml 檔案，例如：
   
   Catalog......
6. 在命令提示符處，轉到 MashupCenter_install_root/config 資料夾，並輸入 config.bat update-was-config。
7. 重啟 Mashup Center。登入並切換到編輯模式。現在，在皮膚中可以看到 OpenSocial 類。

您已經完成了本節中的所有步驟，現在可以將 OpenSocial gadget 和 iWidget 拖放到 Mashup Center 畫布上建立頁面。

樣例場景

此樣例場景提供了一個簡單的示例，展示了 iWidget 和 OpenSocial widget 如何通過互動操作來傳送和接收任意數字。

按以下步驟操作：

1. 如圖 1 所示建立頁面。選擇 Welcome，然後選擇 Create a New Page。
   
   
   圖 1. 新建頁面
   
   
   
2. 編輯模式下，在皮膚中開啟 OpenSocial 類，將 iWidgets Publisher 和 Subscriber widget 拖動到頁面上。
3. 在 iWidget Subscriber 中，單擊 Subscribe 按鈕。此操作允許 iWidgets Subscriber 偵聽 iWidgets Publisher 的名為 random-number 的特定事件通道。
4. 在 iWidget Publisher，單擊 Publish a random number。此操作觸發一個事件，將任意數字傳送到通道 random-number。因為 iWidget Subscriber 訂閱了此通道，iWidget 接收數字並顯示它。
5. 現在，回到皮膚中的 OpenSocial 類，將 OpenSocial Publisher 和 Subscriber gadget 拖動到頁面上。這兩個 gadget 以與 iWidget 相同的方式釋出和訂閱。iWidget 和 OpenSocial gadget 訂閱方接收 OpenSocial Publisher 或 iWidget Publisher 傳送的相同的任意數字。測試案例如圖 2 所示，展示了 Mashup Center 如何支援 iWidget 和 OpenSocial gadget 之間的互操作性。
   
   
   圖 2. 傳送和接收任意數字
   
   
   
6. 要儲存更改，單擊皮膚右側的 Save 圖示，如圖 3 所示。
   
   
   圖 3. 儲存頁面
   
   
   

現在您瞭解了 widget 如何在頁面上互動操作，可以進一步建立一個更為複雜的場景。例如，可以編輯 catalog_os.xml 並新增自己的 iWidget 和 OpenSocial gadget。還可以指向 OpenSocial 目錄中現有的元件來體驗這些 Web 2.0 元件之間的其他互操作性。在這些場景中，要記住如果 Mashup Center 正在執行要停止它，然後輸入 config.bat update-was-config，這樣您的 OpenSocial 類可以重新整理。

在本示例場景中另一個要注意的地方是 Web 2.0 元件是隱式通訊的。iWidget 和 OpenSocial gadget 要在同一個預定義的特定通道上釋出和訂閱。OpenSocial 和 iWidget 開發人員只需呼叫常規事件和為每個元件型別指定的 pubsub API，並且 Mashup Center 皮膚必須能夠處理它們之間的通訊。

如上例所示，iWidget 使用以下的 iWidget API 來發布和訂閱。

• com.ibm.mashups.iwidget.services.ServiceManager.getService("eventService").publishEvent("random-number", message);
• com.ibm.mashups.iwidget.services.ServiceManager.getService("eventService").subscribeEvent("random-number",null,this.updateMessage);

對於 OpenSocial gadget，您可以使用以下常規 pubsub API：

• gadgets.pubsub.publish("random-number", message);
• gadgets.pubsub.subscribe("random-number", callback);

現在您應該能夠了解 Mashup Center 如何允許 iWidget 和 OpenSocial gadget 互動操作和通訊了。

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