利用Domino V8新特性開發Mashup應用

genusBIT發表於2008-07-18

本文將介紹 Domino 8 在 Web 開發方面的一些增強,並演示如何將其結合諸如 JavaScript、Ajax、JSON 和 Google 地圖 API 等技術來構建一個示例 Mashup 應用。

Domino 8 在萬眾矚目中已正式釋出,其除了在郵件、伺服器管理靈活性、效能改進、安全性增強等方面有了長足的進步之外,在軟體設計中賦予系統更多的開放性和互操作性。面對業界流行的 SOA、Web 2.0 等新技術,Domino 8 是融入這些流行的趨勢中,還是停步觀望;特別對於 Domino 開發人員來說,所使用的平臺和技術是否有廣泛的前景且值得深入呢?

答案是積極的,Domino 8 在程式設計方面有巨大的增強,特別在 Web 程式設計方面,表現為:

  1. Domino 8 既作為 Web 服務的使用者,又作為 Web 服務的消費者,這意味著 Domino 8 應用程式將能夠呼叫駐留其它平臺的 Web 服務;
  2. 對 DB2 備選資料儲存的通用支援,這方面涉及的查詢檢視等期待的功能,現都可用在 Web 程式中;
  3. 在網際網路上所熟悉的 Blog、Wiki、RSS、ATOM、Ajax、XML、JSON、Mashup 等概念或技術都可以在 Domino 8 上得到體驗實現,其 @Formula、LotusScript. Language 都在這些方面有所加強。

對於 Ajax 的討論和在 Domino 上實現的方法,已經有多篇文章涉及,感興趣的讀者可以參考 相關資源。本文將通過一組 Domino 8 技術來構建一個示例 Mashup 應用,這組技術包括 JavaScript、Ajax、@Formula、JSON 和 Google 地圖 API。本文不會詳細介紹 JSON 和 Mashup,也不會介紹詳細介紹 Domino 的設計方法,本文的讀者需要對 Domino 開發有一定的經驗。

JSON 介紹

JSON(JavaScript. Object Notation)是一種更輕、更友好的 Web services 客戶端的格式引起了 Web 服務供應商的注意。

XML——這種用於表示客戶端與伺服器間資料交換有效負載的格式,這種標記語言已經在廣闊的軟體應用領域中佔據了主導地位。XML 與生俱來的語言無關性使之在軟體架構師心目中佔據著獨特的地位,但即便最著名的 XML 權威也不得不承認:在某些環境中,XML 的使用已經超出了它自身能力的極限。很多 Web 應用程式更新通常是通過 REST 風格 Web services 獲得 XML 資料,一旦被使用者的瀏覽器接收到,就需要整合到 HTML 頁面的總體佈局之中,我們處理 XML 資料通常是使用 DOM 實現的,採用 DOM 的複雜性源於其基於函式的根,這使得對資料樹的簡單修改或訪問都需要進行無數次方法呼叫。此外,眾所周知,DOM 在各種瀏覽器中的實現細節不盡相同,這一過程帶來更為複雜的程式設計模式,其跨瀏覽器相容性出現問題的可能性也大大增加。顯而易見:如何使一種標記語言輕鬆地整合到 HTML 頁面中以滿足簡便開發的要求?問題的答案就是:利用所有主流瀏覽器中的一種通用元件——JavaScript. 引擎。

讓我們通過一個 Domino 檢視資料,說明 XML 和 JSON 展現的不同結構,我們在伺服器上建立一個名為 Mashupdemo 資料庫,在該資料庫中我們建立一個名為 homedata 表單,其作用為輸入人員的地理位置資訊,然後建立一個展現資訊的檢視 vHomedata:


圖 1. 建立資料表單和標準檢視
圖 1. 建立資料表單和標準檢視-1

圖 1. 建立資料表單和標準檢視-2

我們通過以下的 Domino URL 命令

http://hostname/map/mashuodemo.nsf/vHomedata?ReadViewEntries&Count=1

訪問 vHomedata 檢視,獲得一行資料的 XML 輸出:

 

    
        
            24.55 
        
        
            116.1 
        
        
            John 
        
    


這是大家比較熟悉的 Domino XML 格式資料,通過 Domino URL 命令 ReadViewEntries 輸出檢視 vHomedata 為 XML 格式,裡面內容包括每行資料的位置(viewentry position="1"),文件識別符號(unid="175C4B37CAFA54164825732C002EFB9D"),列的位置和列值(2" name="dname">)、資料型別和值(Samon),我們在解析它的時候一般用 DOM。Domino 8 擴充套件了 ReadViewEntries 命令的功能,其中加入了 Outputformat=JSON 這個引數,使檢視資料可以輸出為 JSON 這種格式,例如通過以下的 Domino URL 命令:

http://hostname/map/mashuodemo.nsf/vHomedata?ReadViewEntries&outputformat=JSON&Count=1

此命令把檢視 vHomedata 第一行資料輸出成 JSON 格式的檔案,內容為:

{"@toplevelentries": "4",
    "viewentry":
        [{"@position": "1",
            "@unid": "175C4B37CAFA54164825732C002EFB9D",
            "@noteid": "97A",
            "@siblings": "4",
            "entrydata": 
        [{"@columnnumber": "0",
            "@name": "locationx",
            "number": {"0": "24.55"}
        },
        {"@columnnumber": "1",
            "@name": "locationy",
            "number": {"0": "116.1"}
        },
        {"@columnnumber": "2",
        "@name": "dname",
        "text": {"0": "John"}
        }
]}]}

我們可以看出 XML 格式資料:


    John 


在 Domino 8 中轉換 JSON 格式資料,表現為

{"@columnnumber": "2",
    "@name": "dname","text": {"0": "John"}
}

在語法層面上,JSON 與其他格式的區別在於分隔資料的字元,JSON 中的分隔符限於單引號、小括號、中括號、大括號、冒號和逗號。乍看上去,使用 JSON 的資料分隔符的優點可能並不那麼明顯,但它們簡化了資料訪問。使用這些資料分隔符時, JavaScript. 引擎對資料結構(如字串、陣列、物件)的內部表示恰好與這些符號相同,那我們訪問 JSON 中資料就可以使用類似語法:homedata@dname[0]


Mashup 介紹

Mashup 是一種令人興奮的互動式 Web 應用程式,它利用了從外部資料來源檢索到的內容來建立全新的創新服務。它們具有第二代 Web 應用程式的特點,也稱為 Web 2.0。在本篇中我們通過地圖 mashup 的整合應用展現 DOMINO 8 如何方便地融入到 Web 2.0 的世界裡,在具體應用中人們蒐集大量有關事物和行為的資料,二者都常常具有位置註釋資訊。所有這些包含位置資料的不同資料集均可利用地圖通過令人驚奇的圖形化方式呈現出來。mashup 蓬勃發展的一種主要動力就是 Google 公開了自己的 Google Maps API。這彷彿開啟了一道大門,讓 Web 開發人員可以在地圖中包含所有型別的資料。

本例中,我們首先到 Google Map 站點 上申請一個 API 授權碼及設定對應的信任站點名稱 www.huangym.com。我們在資料庫 mashupdemo.nsf 中建一個 ajaxgooglemap 表單,如圖:


圖 2. 建立 ajaxgooglemap 表單
圖 2. 建立 ajaxgooglemap 表單

可以看到主要在 HTML 首頁內容的程式碼:

" 
Google Maps JavaScript. API Example
"

其申明瞭 ditu.google.com 的授權號 key, 表單啟動觸發 onload() 方法。

我們在 JS Header 裡面加入下列幾個方法:

function load()
{
  var stringURL=
  'http://www.huangym.com/map/mashupdemo.nsf/vHomedata?readviewentries&outputformat=json';
  XHR = new ActiveXObject("Microsoft.XMLHTTP");
  oXHR.onreadystatechange = loadmap;
  oXHR.open('GET', stringURL, true);
  oXHR.send(null);
}

該方法在網頁開啟時會被自動呼叫,主要的功能是向儲存“homedata”的伺服器發出 ajax 請求,同時設定方法“loadmap”響應請求的結果。

在程式碼我們可以發現,所定義的 stringURL 是獲取“homedata”的 URL,其中加入了“outputformat=json”,這樣 Domino 是返回結果的時候就不是返回 XML,而是返回 json 結果。

有關 ActivexObject("Microsoft.XMLHTTP") 的更多資訊,請參考 Ajax 相關的文章。在這裡只給出程式碼的概要解釋:

oXHR = new ActiveXObject("Microsoft.XMLHTTP");
// 新建 ActiveObject 物件,為發起 ajax 請求做準備
oXHR.onreadystatechange = loadmap;
// 指定回撥函式的名字為 loadmap,當伺服器返回結果時由 loadmap 方法進行響應。
// 有關 loadmap 方法的具體實現在下面進行解釋
oXHR.open('GET', stringURL, true);
// 定義 ajax 請求的目標,就是以上定義好的 stringURL
oXHR.send(null);
// 傳送 ajax 請求

function loadmap() { 
    if (oXHR.readyState == 4) {
	    if (oXHR.status == 200) {
		    if (GBrowserIsCompatible()) {
			    map = new GMap2(document.getElementById("map"));
                map.addControl(new GSmallMapControl());
                map.addControl(new GScaleControl());
                eval("dataobj="+oXHR.responseText+";");
 
                for (j=0;j

方法 loadmap 作為回撥函式響應 ajax 請求的返回結果。主要功能是對返回結果進行判斷,如果返回結果不是錯誤訊息則對結果進行解析,將返回結果轉換成陣列,供 googlemap 物件顯示時使用。最後呼叫 switchlocation 方法,開始迴圈顯示返回結果中的不同地點。有關 switchlocation 方法在下面詳細解釋。

在 loadmap 方法中的前三行是對返回結果進行判斷。

map = new GMap2(document.getElementById("map")); 這一句開始對返回結果進行處理。

其中 GMap2 是 googlemap 定義好的類名,document.getElementById("map") 是獲取當前網頁中的 "map" 物件,這一物件是在 Domino 表單中指定的。

在 googlemap 物件生成後,則通過 addControl 方法對 googlemap 物件新增控制元件,如地圖的控制器等:

 map.addControl(new GSmallMapControl());
 map.addControl(new GScaleControl());

然後通過 eval 方法將 domino 返回的 json 結果轉變為物件。

eval("dataobj="+oXHR.responseText+";");

注意,這裡的 eval 方法是在 java script. 中與 json 結合的最好方法,該方法的作用是將引數中提供的字串作為一句 javascript. 語句解釋執行。這樣我們就可以通過字串操作動態生成 javascript. 程式碼。如以上這句就是將 oXHR.responseText 這個 Domino 返回的 Json 字串轉換成為名為 dataobj 的物件。

此後對 dataobj 物件進行遍歷,分別將第 1 列,第 2 列 , 第 2 列轉換成陣列 locationxlocationydistext

最後呼叫 switchlocation() 方法開始迴圈顯示地圖。

function switchlocation() {
    map.setCenter(new GLatLng(Number(locationx[i]), Number(locationy[i])), 7);
    map.openInfoWindow(map.getCenter(),document.createTextNode(distext[i]));
    if(i>=locationx.length-1) {
        i=0;
    } else {
        i++;
    }
    window.setTimeout(switchlocation,7000);
}

方法 switchlocation 主要是通過“window.setTimeout”方法實現定時呼叫,每 7 秒種呼叫一次 switchlocation。顯示不同的地點。其中變數 i 用於記錄當前顯示的行數,i 每迴圈都加 1,指向下一條記錄,當 i 大於等於陣列長度時,則將 i 至零,重新從第一行開始顯示。顯示過程中使用的方法有 map.setCenter()用於指定地圖中心的經緯度。還有 map.openInfoWindow() 用於在地圖中心顯示文字資訊。

最後,如上所述,通過呼叫 window.setTimeout(switchlocation,7000) 設定定時器,在 7 秒種後重新呼叫方法 switchlocation。作到這裡我們的 Google Map 的應用雛形基本可以完工了,通過註冊的 Google 信任站點www.huangym.com訪問我們的 Domino 表單 ajaxgooglemap,URL 為:http://www.huangym.com/map/mashupdemo.nsf/ajaxgooglemap?OpenForm。效果如圖:


圖 3. 效果
圖 3. 效果

這樣我們檢視記錄的資訊就在 Google Map 輪流顯示出來了。


結束語

Domino V8 提供給我們開發人員強大快速開發平臺,加入 Web 2.0 等因素,我們就可以開發出許多賞心悅目的應用來,本文涉及了 Ajax、JSON、Mashup 及 Domino Web 開發等知識,希望此篇能給大家借鑑一下,以此能加快您的開發進度和應用功能。

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

相關文章