使用 Dojo 開發定製 Business Space 小部件，第 4 部分

CloudSpace發表於2010-09-17
Meenakshi Guruaribam Khanna, 資深軟體工程師, IBM
Divya Satyavarapu, 助理系統工程師, IBM
Anil R Patlolla, 資深軟體工程師, IBM
Anand Bandaru, 資深軟體工程師, IBM

簡介： 在第 4 部分，您將學習如何使用一個通用 REST 處理程式從 iWidget 呼叫 REST 服務。

我們為本系列開發的定製小部件是基於 WebSphere V7.0 支援的 Business Space（以下簡稱 Business Space）中附帶的 Dojo 版本，已經在 Mozilla Firefox 3.0.11 中測試過了。只是，我們開發的通用框架概念甚至可以應用到使用 Dojo 的應用程式中，但卻不能用於 Business Space。學習本系列需要具備 DOJO 和 iWidget 框架的基本知識。

我們將討論在基於 Dojo 的應用程式中經常遇到的主題。本系列分為以下幾部分：

  • 第 1 部分：使用通用的 markup 處理程式生成 DOJO markup
  • 第 2 部分：使用通用的網格處理程式建立具有分頁功能的 Dojo DataGrid 元件
  • 第 3 部分：在 iWidget 中使用多個模板和從基本小部件繼承
  • 第 4 部分：使用通用 REST 處理程式從 iWidget 發出可配置的 REST 呼叫

在第 4 部分，您將學習如何使用一個通用 REST 處理程式從 iWidget 呼叫一個 REST 服務，該 REST 處理程式基於以下原理設計：

  • REST URI 通常是動態的，且在呼叫 REST 服務之前 URI（URL 引數）的一部分將被 iWidget 動態替換。我們的設計根據相應的 REST 關鍵字從 JSON 檔案讀取 REST URI。
  • 查詢引數是動態替代的。
  • REST 處理程式目前支援 JSON，但是根據需要很容易增強，支援 XML 和其他型別。
  • REST 處理程式支援 GET、POST/RAWPOST、PUT、RAWPUT 和 DELETE 操作，也支援檔案上傳和下載操作。

在本文中，我們將介紹 REST 處理程式的實現以及在您的 iWidget 中如何使用它。

以下檔案在 Part4SampleCode.zip 中提供 下載：

  1. JSONRestHandler.js：通用 REST 處理程式 Javascript. 類。
  2. restURI.json：包含 REST URI 的 JSON 檔案。
  3. testJSONRestHandler.js：Javascript. 類，展示如何在您的程式碼中使用 JSONRestHandler。

處理程式的實現

JSONRestHandler Javascript. 類載入 loadRESTConfig( ) 方法中含有 REST URI 資訊的 JSON 檔案。

loadRESTConfig() 方法接受以下引數：

  • type：操作型別，如 GET/POST/PUT，等等。
  • restCallKey：JSON 檔案中的 keyName，例如 EmployeeList。
  • restEndPoint：執行 REST 應用程式的 REST 端點；例如 http://:/restAPI。
  • loadMethod：此方法在 REST URI 成功載入時呼叫。
  • errorMethod：如果呼叫 REST URI 出現錯誤，該方法被呼叫。
  • syncFlag：REST 呼叫應該是同步或非同步（true 或 false）。
  • thisVar：呼叫類的引用。
  • parameters：含有 3 個變數（urlParameters、queryParameters、content）。如果 URI 有 URL 或查詢引數，該物件需要用相應的值進行設定。

    只有在 POST 請求時內容才被髮送。


清單 1. loadRESTConfig( ) 方法，載入 JSON 檔案

loadRESTConfig: function(type,restCallKey,restEndPoint,loadMethod,errorMethod,syncFlag,
parameters,thisVar)
	{

		var normalUrl = thisVar.rootContext+ "com/ibm/bcgex/common/restJson/"
+this.fileName; 
				var request = {
				url:normalUrl,
				sync:true,
				handleAs: "json",
				load: dojo.hitch(this, function(data)
{ this._callREST(data,type,restCallKey,restEndPoint,loadMethod,errorMethod,syncFlag,
parameters,thisVar); }),
				error: dojo.hitch(this, "_restConfigError")
				};	
		dojo.xhrGet (request);
	}

loadRESTConfig 方法呼叫 _callREST 方法成功載入 JSON 檔案。

_callREST 方法遍歷 JSON 檔案中的條目。當條目名稱和關鍵名（頁面名）相匹配時，它通過連線 restEndPoint（http://: part）和來自 JSON 檔案的 URI 來構造 REST URL。它還檢查是否有與特定 REST 呼叫相關的 URL 引數和查詢引數，並構造相關 URL。

對於一個 POST 請求，它從 parameters 物件讀取並設定內容。這些操作完成之後，相應的 XHR 呼叫被執行。


清單 2. _ callREST ( ) 方法遍歷 JSON 檔案並構造最終 REST URI 

   _callREST:function(response,type,restCallKey,restEndPoint,loadMethod,errorMethod,
syncFlag,parameters,thisVar)
	{

		var FUNCTIONNAME = "callREST()";   
		
		var itemsArray = eval(response).items;
		var _restURL = "";
		var urlParameters = "";
		var queryParameters = "";
		var contentParameter = "";
		for (var i = 0; i < itemsArray.length; i++)
		{
			var item = itemsArray[i];
			var entityName=item.name;
			if(entityName==this.functionName)
			{
				var childrenArray = item.children;
				for(var j=0;j< childrenArray.length;j++)
				{
					var child  = childrenArray[j];
					var childName=child.name;
					  if(childName==restCallKey){
						_restURL = child.restURL;
						requestTimeout = child.timeout;
						break;
					  }
				}
			}

		}

				
		if(_restURL=="")
		{
			console.debug("Error: Unable to retrieve the REST URL");
		} else {
		
			if(parameters!=null)
			{
				urlParameters=parameters.urlParameters;
				queryParameters=parameters.queryParameters;
				contentParameter=parameters.content;
			
				if(urlParameters!=null)
				{
					for(var i=0;i0)
						{
							queryString=queryString+"&";
						}
						key = queryParameters.getKey(i);
						queryString=queryString+key+"=
"+encodeURIComponent(queryParameters.item(key));					}
					
					_restURL=_restURL+queryString;
				}
			}
		
			
			console.debug("URL="+restEndPoint+_restURL);
			var request = {
				url: restEndPoint+_restURL,
				handleAs:"json",
				sync: syncFlag,
				preventCache: true,
				mimetype: 'text/json;charset=utf-8',
				load: dojo.hitch(thisVar, loadMethod),
				error: dojo.hitch(thisVar, errorMethod)
			};

			request.headers={};
			if (type == 'GET')
			{
				request.headers["Accept"] = "application/json";
				dojo.xhrGet(request);		 
			} else if (type == "POST" || type == "RAWPOST") {
				request.postData =  contentParameter;
				request.headers["Content-Type"] = 
"application/json; charset=utf-8";
				dojo.rawXhrPost(request);
			} else if (type == "PUT" || type == "RAWPUT") {
					request.putData =  contentParameter;
					request.headers["Content-Type"] = 
"application/json; charset=utf-8";
					dojo.rawXhrPut(request);
			}else if(type == "DELETE"){
				dojo.xhrDelete(request);
			}
		}
	}

REST 處理程式使用 dojo.io.iframe.send API 進行檔案的上傳和下載。


清單 3. 檔案上傳和下載

if (type == "FILEPOST") {
	console.debug("restEndPoint+_restURL"+restEndPoint+_restURL);
	//file upload
	var request = {
			url: restEndPoint+_restURL,
			form.:contentParameter,
			preventCache:true,
			timeout: requestTimeout,
			sync: true,
			handleAs:"html",
			load: dojo.hitch(thisVar, loadMethod),
			error: dojo.hitch(thisVar, errorMethod)
		};
		var iframeSend = dojo.io.iframe.send(request);
	}
	else if (type == "FILEGET") {
				// file download
		var request = {
			url: restEndPoint+_restURL,
			preventCache:true,
			timeout: requestTimeout,
			sync: true,
			method:"GET",
			handleAs:"xml",
			load: dojo.hitch(thisVar, loadMethod),
			error: dojo.hitch(thisVar, errorMethod)
		};
		var iframeSend = dojo.io.iframe.send(request);
}

從您的客戶端程式碼呼叫 REST 處理程式

在這一節，我們將逐步講解從您的程式碼中呼叫 REST 處理程式 Javascript. 類。

第 1 步：在 JSON 檔案中定義 REST URI。

所有 REST URI 被定義在一個 JSON 檔案中（例如，restURI.json）。在某個特定頁面中的 REST 呼叫歸屬於 items 標籤之下的一個特定主鍵（名稱）。

例如，有一個名為 EmployeeList 的頁面，其中有兩個 REST 呼叫 —— 一個用於檢索員工列表（fetchEmployeeList），另一個用於檢索員工資訊（empDetails），單擊員工姓名即可檢索。REST URI 在 JSON 檔案 restURI.json 中定義，如下所示：


清單 4. 來自 restURI.json 的片段 

name:'EmployeeList',	
children:[
	{
	name:'fetchEmployeeList',
	restURL:'/employee/list'
	},
	{
	name:'empDetails',
	restURL:'/employee/'
	}

			
]

根據某一個員工 id 檢索該員工的詳細資訊的 REST URI 示例如下：

http://:/restApi/employee/

在上述 URI 中，在呼叫 REST 服務之前，REST 處理程式使用實際 ID 動態替換 URI 引數 。REST 處理程式也確保 REST 端點被附加到 URI（JSON 檔案中定義的）之前做字首；例如 /employee/。

第 2 步：在 JSONRestHandler.js 中使用 JSON 檔名和頁面（關鍵）名呼叫 setRestHandlerParams() 方法


清單 5. 呼叫 setRestHandlerParams() 方法

com.ibm.bcgex.common.JSONRestHandler.getInstance().setRestHandlerParams 
("restURI.json","EmployeeList");

第 3 步：例項化引數物件

下一步是例項化引數物件，該物件包含：

  • URL 引數
  • 查詢引數
  • 內容（如果是 POST 請求）或檔案上傳呼叫


清單 6. 例項化引數物件和設定 URL 引數

var parameters = new Object();
parameters.content = null;
this.empId=”111202”;
this.urlParamsList = new dojox.collections.SortedList();
this.urlParamsList.add("",this.empId);
parameters.urlParameters=this.urlParamsList;

一些 REST 呼叫可能需要查詢引數，清單 7 展示瞭如何在 parameters 物件中設定查詢引數。


清單 7. 在引數物件中設定名為 dept 的查詢引數 

this.queryParamsList = new dojox.collections.SortedList();
this.queryParamsList.add("dept",”HR”);
parameters.queryParameters=this.queryParamsList;

如果是 POST 請求，內容也需要在 parameters 物件中設定。對於一個員工建立呼叫，內容將被設定為如清單 8 所示。


清單 8. 對於 POST 請求將內容放在引數物件中

var content = 	{"name" : “Tom”,
	       	"gender" : “M”,
               	"fullName":”Tom”,
               	"department":”Payroll”,
               	"location:”:”IBM”
              	};	
//serialize the content into JSON
postDataContent = serialize (content);
parameters.content = postDataContent;

當引數物件例項化完成之後，您就準備好了呼叫 REST 服務。

第 4 步：通過 loadRESTConfig() 方法呼叫 REST 服務。

為了呼叫一個典型的 GET 呼叫，呼叫 loadRESTConfig() 方法，如清單 9 所示。


清單 9. GET 呼叫 REST 處理程式 

this.restURL  = getRestURLEndpoint();	

com.ibm.bcgex.common.JSONRestHandler.getInstance().loadRESTConfig
("GET","fetchEmployeeList",this.restURL,"_loadEmpList","_onError",true,parameters,this);

為了呼叫一個典型的 POST 呼叫，呼叫 loadRESTConfig() 方法，如清單 10 所示。


清單 10. POST 呼叫 REST 處理程式

 this.restURL  = getRestURLEndpoint();	
this._jsonRestHandler = new com.ibm.bcgex.common.JSONRestHandler
("restURI.json","EmployeeCreate");

com.ibm.bcgex.common.JSONRestHandler.getInstance().loadRESTConfig 
("POST"," createEmployee",this.restURL,"_saveEmployeeDetails","_onError",
true,parameters,this);

結束語

通過本文，您學習瞭如何使用 JSON 檔案中指定的 REST URI 發出 REST 呼叫。該方法的優勢是不需要對程式碼做任何改變，即使 URI 發生變化。另外，REST 處理程式還能處理 URI 中的 URL 和查詢引數。無論是 GET、POST、PUT 還是 DELETE，所有這些操作都可以使用 REST 處理程式優雅地處理。

原文連結：http://www.ibm.com/developerworks/cn/websphere/library/techarticles/1007_khanna2/1007_khanna2.html

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

相關文章