XPages 開發實踐：開發基於 XPages 的複合應用程式

簡介： 本文詳細介紹瞭如何使用 Lotus Domino Designer 8.5 中的 XPages 技術開發一個複合應用程式。

背景簡介

這個部分將會對本文中所使用的相關技術做簡要的介紹。讀者如需瞭解更詳盡的內容，可以訪問 IBM 或相關組織的網站。

複合應用技術簡介

複合應用程式是面向服務體系結構（Service Oriented Architecture，SOA）和上下文協作策略 (contextual collaboration strategy) 中的關鍵元素。複合應用程式由鬆散耦合的使用者介面元件組成，支援元件之間的通訊。元件可以在多個複合應用程式中重用。能夠將多種技術組合成一個應用程式，這種能力可以提供巨大的業務價值（參見“參考資源”）。

在 Lotus Notes/Domino 8 眾多新特性中，複合應用（Composite Application）是最具有革命性的一次突破。其實我們可以從多個角度來理解這項技術：從企業 Web 2.0 的觀點來看，你可以說它代表著混搭 Mashup 的思想；站在企業整合的角度來看，它是 SOA 在使用者前端的具體實現；對使用者而言，它是一種全新的介面體驗；而對傳統的 Lotus 開發者來說，複合應用帶給了他們新的挑戰和機遇（參見“參考資源”）。

本文實際上是結合例項介紹如何開發一個複合應用程式。本文的例項有兩個元件組成，一個是 Managed Browser 的元件 (IBM DeveloperWorks/ wiki / forum 上有很多文章介紹如何基於 Lotus Notes/Domino 8 或者 IBM Expeditor 產品開發 Managed Browser 元件應用，本文略敘之 )。另一個是基於 XPages 技術開發的元件，本文的重點在於介紹如何開發使用這個基於 XPages 技術的元件。

XPages 技術簡介

XPages 技術是 IBM Lotus Domino 8.5 中新增的一個功能強大的設計元素。XPages 使使用者可以利用所有 Web 必備的功能，可在現有應用程式上構建或建立新的設計元素，可以充分利用它為我們的專案呈現 Web 客戶端使用者介面。 Domino 8.5 為使用者提供了整合 Eclipse IDE 的視覺化開發環境。使用 XPages 開發基於 Domino 的 Web 應用，可以獲得“所見即所得”的使用者體驗。對 XPages 中的每一個頁面、控制元件、物件，我們都可以直接以視覺化的方式修改它們的屬性，並且即時預覽；相應的，物件所支援的事件，XPages 也提供了分門別類的嚮導，幫助使用者編輯和管理事件的響應指令碼（參見“參考資源”）。

在 Lotus Domino ® Designer 8.5 中，開發者能夠利用 XPage 技術建立一流的元件並感受完美的使用者體驗。 本文重點介紹如何建立 XPages 元件，定義輸入事件，釋出事件，編寫 XPage 使用者介面，以及如何應用 Javascript，Domino Java API 完成相應的業務邏輯功能等等。

Domino Java APIs：在 Java 程式中訪問 Domino 資料

Domino 的 Java APIs 為使用者提供了在 Java 程式中訪問 Domino 資料的能力。使用者可以在 Domino Agent、Applet、Servlet 中通過 Domino 的 Java API 讀取和操作 Domino 資料。現在，通過 Designer 整合環境，使用者可以在 Domino 資料庫中編寫 Java 函式庫，然後在 XPages 頁面中使用 Javascript. 呼叫 Java 函式，完成各種資料操作（參見“參考資源”）。 如果讀者想了解更多有關 Domino Java APIs 的知識，請參考 Notes Client 幫助文件資訊。

XPages 元件開發

本文試圖通過一個簡單的應用示例 － 使用者可以把自己感興趣的 2010 年南非足球世界盃的比賽日程加入到 Notes 的日曆中來，進而介紹如何基於 XPages 技術開發複合應用程式的元件的。

建立 NSF 資料庫

首先我們需要建立一個 NSF 資料庫，命名為 WorldCupCalendarHelper。 如圖 1 所示：

圖 1. 建立 NSF 資料庫

建立 Xpage 頁面

接下來我們生成一個新的 XPages 頁面： CalendarHelper，如圖 2 所示：

圖 2. 生成 XPages 頁面

元件定義

下面我們要生成元件的定義。在 WorldCupCalendarHelper 資料庫中右鍵點選 Components 元素建立一個新的元件 CalendarComponent。當建立的元件是為了複合應用的程式時（也可以是為了 lotus Mushups 的應用需要，開發者應該以檢視（View）模式關聯 Xpages 頁面和相應的元件，如圖 4 所示。

圖 3. 建立元件


圖 4. 元件定義

同時我們在 XPages 元件中定義了三個型別是 String 的監聽事件 WccwEvent（這個事件是用來監聽比賽對陣的）；WcDateEvent（這個事件是用來監聽比賽日期的）；WcTimeEvent( 這個事件是用來監聽比賽時間的 )。本例中，XPages 元件正是通過這個這些監聽事件同 Managed Browser 元件進行通訊的。當然 Xpages 元件也能夠釋出事件（publish event）。那麼如何在 Xpages 元件中釋出事件呢？有兩種方式。

其一，在 XPages 中，開發人員可以使用客戶端 Javascript. 角本釋出一個已經定義的元件事件。具體步驟如下：

1. 首先要實現一個 Javascript. 角本的觸發機制，比如建立一個 XPages Button，該按鈕的客戶端 onclick 事件觸發 Javascript. 角本的執行。
2. 然後呼叫 XSP.publishEvent(name, value, type) 方法釋出事件。Name 引數就是已定義的事件的名稱；type 是該事件的事件型別；value 值則必須要複合事件型別的定義。如清單 1 所示：
   
   清單 1. 應用客戶端 javascript. 釋出事件
   

   XSP.publishEvent("publishString", "hello dragon", "string"); XSP.publishEvent("publishNumber", "30", "number"); XSP.publishEvent("publishBoolean", "false", "boolean"); XSP.publishEvent("publishJson", {"userId": "dragonli"}, "JSON"); // 開發者也可以把伺服器端 JavaScript™ 作為第二個引數來發布經由伺服器計算的結果值 XSP.publishEvent("publishString", "#{javascript.:document.thefield}", "string");

   
   

其二，開發人員也可以通過簡單的動作（simple action）來發布 XPages 元件事件。具體步驟如下：

1. 首先要實現一個 simple action 的觸發機制，比如建立一個 XPages Button，該按鈕的客戶端 onclick 事件觸發 simple action 的執行。
2. 選擇客戶端的 simple action。 如圖中所示，下拉選單中有兩個 simple action 值：釋出元件屬性（Publish Component Property）和釋出檢視列（Publish View Column）。前者適用於所有的事件，後者僅適用於檢視列的 onclick 事件。
3. 接下來填寫已經定義好的事件的名稱，其值以及對應的事件型別。清單 2 是對應的原始碼。
   
   圖 5. Simple action 釋出事件
   
   
   
   
   清單 2. 客戶端 simple action 釋出事件示例程式碼
   
   

關於事件的型別，XPages 提供內建的 String, Number, Boolean, JSON 四種型別。當然開發者可以根據業務邏輯需要通過 Custom Types 配置頁面來定製事件型別。

元件事件

我們已經定義了這些監聽事件，接下來，我們介紹 XPages 元件是如何從別的元件獲取資訊的。開啟 CalendarXpage 頁面，雙擊“New Event …”，然後輸入我們已經定義的這些接收事件的名字（注意：名字需要對應一致），如下圖所示。

圖 6. 生成元件事件

我們定義了三個對應的元件事件，現在我們需要為他們做些編寫程式碼的工作。程式碼是在伺服器端執行的。我們將把提交上來的值儲存在一個會話（session）的屬性裡面。該屬性的名字分別是 counterworkerEntry，dateEntry 和 timeEntry。這樣我們就可以在 XPage 的其它部分使用這些屬性值了。程式碼僅包含一行語句，比如對於 WccwEvent，我們增加如下一行程式碼：context.setSessionProperty ("counterworkerEntry", context. getSubmittedValue()); 其餘類似。

建立 CalendarXpage 頁面內容並實現其邏輯功能

圖 7. CalendarXpage 頁面

如上圖所示，我們定義了一個按鈕和一些標籤介面元素。其中用花括號括起來的標籤元素是會根據業務邏輯動態生成顯示內容的。比如，紅色矩形框所對應的邏輯程式碼是：

接下來，我們通過 onclick 事件實現了 Add to Calendar 按鈕的功能。該功能就是生成 Notes Calendar 的記錄資訊。（伺服器端的 Javascript. 通過呼叫 Domino APIs 完成了建立比賽日程表的任務。）

圖 8. 實現 Add to Calendar 按鈕功能

定義 composite 並確認該 NSF 元件以複合應用程式方式啟動

右鍵點選 Applications 元素建立 Composite 定義。如下圖所示：

圖 9. composite xml 定義

與此同時，我們需要確認該 NSF 資料庫應以複合應用的方式啟動。（右鍵點選資料庫－> 選擇屬性－> 開啟 Launch Tab 欄進行編輯）如下圖所示：

圖 10. 啟動項定義

通過以上的步驟，我們就輕鬆的完成了 XPage 元件的開發工作。對於 XPages 技術 , Lotus ®Domino Designer 提供了非常強大的平臺技術支援。下面我們把 Managed Browser 元件加進來，進而完善此複合應用程式。

元件整合部署

通過本文背景知識的介紹，讀者知道複合應用程式體現了混搭 Mashup 的思想。是各個不同元件之間的相互通訊，相互協作的一種使用者體驗。基於 XPages 技術的元件也需要同其它元件通訊才能體現它的價值。

現在關掉 Notes Domino Designer，在 Notes Client 中開啟 WorldCupCalendarHelper 資料庫，根據前文的配置，它會預設顯示一張空白頁面。點選 Actions – > Edit Application 編輯此複合應用程式。

圖 11. 開啟 WorldCupCalendarHelper 資料庫

接下來，我們將按照如下的步驟完成該示例複合應用的整合部署工作：

1. 首先更改複合應用程式的標題為：World Cup Calendar Helper
2. 更改空白頁面的標題為：Calendar Helper
3. 然後把前面我們所建立的基於 XPages 技術的元件新增到複合應用中來，如下圖所示：
   
   圖 12. 加入 Xpages 元件 1
   
   
   
4. 點選 “Browser …” 按鈕，加入 CalendarComponent 元件。
   
   圖 13. 加入 Xpages 元件 2
   
   
   
5. 把生成的 WorldCup Calendar Helper 元件拖拽到右邊的邊欄（Sidebar）中。
   
   圖 14. 放置 XPages 元件
   
   
   
6. 拖拽 Managed Browser 元件到複合應用的主頁面，並輸入 http://sports.sohu.com/s2009/2547/s268698101/（來自 Sohu 世界盃官方網站）。並生成三個型別是 Map HTML Table 的活動。分別對應比賽對陣，比賽日期和比賽時間。當使用者選中一場比賽對陣的時候，點選並觸發該活動，通過複合應用的 wiring 機制把該比賽對陣的資訊傳給了 XPages 元件。
   
   圖 15. 配置 Managed Browser 元件 1
   
   
   

   在完成所有設定後，需要及時儲存設定資訊，並把當前頁設為主頁面。

7. 接下來，右鍵點選 Managed Browser，開啟 Edit Component Property，如下圖所示，把藍色矩形框內 XPath 表示式的固定行號換成萬用字元“*”，這樣點選其它行對應的列的時候，也能觸發該事件。
   
   圖 16. 配置 Managed Browser 元件 2
   
   
   
8. 元件 Wiring

   把 Managed Browser 定義好的活動和 Xpages 元件的事件關聯起來。這樣就實現了元件之間的通訊了，當然本應用程式邏輯比較簡單，Xpages 元件沒有釋出事件出來。

   
   
   圖 17. 關聯元件事件
   
   
   

9. 下圖是我們的複合應用程式的顯示效果圖。該複合應用有兩部分組成，中間的是基於 Managed Browser 容器的元件，當使用者喜歡某一場比賽的時候，點選對應的比賽對陣，日期和時間，相應的資訊會出現在邊欄的 XPages 元件中，點選 Add to Calendar 按鈕，伺服器端 Javascript. 呼叫 Domino APIs 生成一條 Notes 日曆記錄資訊。

   
   
   圖 18. 世界盃複合應用示例程式
   
   
   
   
   圖 19. 生成的 Reminder 資訊
   
   
   

本文的應用程式不能簡單的單擊一個 HTML Table 的 CELL 就能生成全部行的資訊，所以讀者需要點選同一行的這三個單元格觸發三個活動來獲得相關資訊。當然我們開發人員可以定製這個活動。把整個 HTML Table 的資訊以 XML 或者 JSON, ICal 的格式傳給 XPages 應用元件，然後在 XPages 的應用元件中再進行解析操作，獲得各個引數，並根據業務邏輯的需要而使用之。

小結

本文比較系統的介紹瞭如何基於 Lotus® Domino Designer 8.5 XPages 技術開發元件，並構建簡單有意義的複合應用程式。文章淺顯易懂，作者希望本文能起到一個拋磚引玉的作用，更多的開發人員開始關注 XPages 技術，喜歡 XPages 技術。

原文連結:http://www.ibm.com/developerworks/cn/lotus/xpage-composite-apps/index.html

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