Meenakshi Guruaribam Khanna, 资深软件工程师, IBM

Divya Satyavarapu, 助理系统工程师, IBM

Anil R Patlolla, 资深软件工程师, IBM

Anand Bandaru, 高级软件工程师, IBM

简介： 在第 3 部分中，您将学习如何使用一个基本模板来使您的整个用户界面达到一致的外观和感觉，以及如何使用一个被所有 iWidgets 继承的基本小部件来避免代码重复。

我们为本系列开发的定制小部件是基于 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 调用

在第 3 部分，我们将向您展示如何使用一个基本小部件来使您的整个用户界面达到一致的外观和感觉。所有 iWidgets 都可以使用这个基本模板来使界面保持一致，包括头部，注脚和主要内容区。

除了这个基本模板之外，每个 iWidget 使用一个特定于小部件的模板来显示针对此部件的信息。

本文也向您显示了一个应用程序中的所有 iWidgets 如何从一个基本小部件中继承。基本小部件通过提供 iWidgets 常用方法来防止代码重写。

以下文件在 Part3SampleCode.zip 中提供下载：

Base_iWidget.js：从所有小部件中继承的基本部件。
base-widget-template.html：基本小部件模板 HTML 文件。
BaseWidgetTemplate.js：基本小部件模板 Javascript. 文件。
resources_iwidgets.js：NLS 属性文件。
testWidget.xml：小部件 XML 文件。
testLoader.js：小部件加载文件。
testWidget.js：小部件 javascript. 类。
test.html：特定于小部件的 HTML 模板。
testMarkupHandler.json：用于生成小部件内容的 JSON 文件。
stylesheet.css：用于界面的样式表文件。

我们也提供了一个完成的工作样例代码，fullWorkingCode.zip，适用于整个系列。

实现基本模板

首先，将向您介绍基本模板是如何实现的。基本模板包括一个 BaseWidgetTemplate Javascript. 类和一个 base-widget-template.html 文件。

BaseWidgetTemplate Javascript. 类加载基本小部件模板 HTML 文件，如清单 1 所示：

清单 1. BaseWidgetTemplate Javascript. 类

dojo.provide("com.ibm.bcgex.common.BaseWidgetTemplate");

dojo.declare("com.ibm.bcgex.common.BaseWidgetTemplate",[dijit._Widget,dijit._Templated], {
	
	templatePath: dojo.moduleUrl("com.ibm.bcgex.common.templates",
"base-widget-template.html"),
				
	postCreate: function() {

	},
	postMixInProperties : function(){
	}

});

基本小部件 HTML 模板（base-widget-template.html）包含以下内容：

header：包括贯穿所有界面通用的头部信息，例如，导航或界面名的链接和按钮。HTML 文件包含以下头部占位符：
body1：界面的主要部分，特定于小部件的 HTML 所在之处。HTML 文件包含以下 body1 占位符：
Footer：包含贯穿所有界面的通用脚注信息。文件包含以下占位符脚注：

接下来，我们看一下基本小部件类（Base_iWidget.js）的实现。

实现基本小部件类

基本小部件类的设计利用了 Dojo 提供的继承特性，以下是基本小部件实现的一些功能：

加载 NLS 属性文件和应用程序中使用的 CSS 文件，如清单 2 和清单 3 所示：

清单 2. 加载 NLS 文件

 //Load the NLS properties file
try{
dojo.requireLocalization("com.ibm.bcgex", "resources_iwidgets", this.getLocale());
	this.iwidget_messages = dojo.i18n.getLocalization("com.ibm.bcgex", 
"resources_iwidgets", this.getLocale());
}catch(exp){
	djConfig.locale='en';
	dojo.requireLocalization("com.ibm.bcgex", "resources_iwidgets", 
this.getLocale());
	this.iwidget_messages = dojo.i18n.getLocalization("com.ibm.bcgex", 
"resources_iwidgets", this.getLocale());
}

清单 3. 加载 CSS 文件

// Check if it is Bidi locale

if (!dojo._isBodyLtr())
	{
	isBidi = true;
	cssPath=this.getRootContext()+"com/ibm/bcgex/css/stylesheetBidi.css";
	} else {
	cssPath=this.getRootContext()+"com/ibm/bcgex/css/stylesheet.css";
	}
	this.loadCss(cssPath);	

loadCss: function(filename){
	var fileref=document.createElement("link");
	fileref.setAttribute("rel", "stylesheet");
	fileref.setAttribute("type", "text/css");
	fileref.setAttribute("href", filename);

	if (typeof fileref!="undefined")
		document.getElementsByTagName("head")[0].appendChild(fileref);

	},

基本小部件也实例化 BaseWidgetTemplate 类，并附加上 ID baseWidgetId 相关的 DOM 节点。baseWidgetId 在小部件 XML 文件中声明（见清单 5）。

清单 4. 实例化 BaseWidgetTemplate 并附加 DOM 节点

this._baseWidgetId = new com.ibm.bcgex.common.BaseWidgetTemplate();
var thisWidgetId = this.iContext.getElementById("baseWidgetId");
thisWidgetId.appendChild(this._baseWidgetId.domNode);

实现特定于小部件的模板和小部件类

在这一小节，我们将向您展示特定于小部件的模板以及使用下列文件实现的小部件类：

小部件 XML 文件
小部件载入类
小部件 Javascript. 类
小部件特有的 HTML 模板文件。

以下片段源自上述文件之一：

清单 5. 小部件 XML 文件（testWidget.xml）

]]>

清单 6. 小部件载入类（testLoader.js），继承基本小部件类（Base_iWidget.js）

dojo.provide("com.ibm.bcgex.iWidget.testLoader");

dojo.declare("com.ibm.bcgex.iWidget.testLoader",
com.ibm.bcgex.iWidget.common.iwidgets.Base_iWidget,{
	
	
	constructor : function(){
		
		this.rootContext=null;
		this.widgetId = null;
		this.restEndPoint = null;
	},
	
	onLoad: function() {
		
		this.inherited('onLoad',arguments);
		dojo.registerModulePath("com.ibm.bcgex.iWidget.test", 
this.getRootContext()
+"com/ibm/bcgex/iWidget/test");
		this.loadEmployeeSearch();
	},
	
	loadEmployeeSearch: function(){

		var body1DivId = this.iContext.getElementById("body1");
		this.rootContext = this.getRootContext();
		this.restEndPoint = this.getRestURLEndpoint();
		dojo.require("com.ibm.bcgex.iWidget.test.testWidget");
		this._testWidget = new com.ibm.bcgex.iWidget.test.testWidget
(this.iContext,this.iwidget_messages,this.rootContext,this.restEndPoint ,this);
		body1DivId.appendChild(this._testWidget.domNode);
		this._testWidget.showEmployeeSearch();
		
	}
	
});

小部件 Javascript. 类 testWidget.js 使用 DojoMarkupHandler.js（详见第 1 部分）生成如清单 7 所示的界面：

清单 7. 加载小部件特定 HTML 模板（test.html）的小部件 Javascript. 类

dojo.provide("com.ibm.bcgex.iWidget.test.testWidget");

dojo.declare("com.ibm.bcgex.iWidget.test.testWidget",
      [dijit._Widget,dijit._Templated], {
   templatePath: dojo.moduleUrl("com.ibm.bcgex.iWidget.test.templates",
                    "test.html"),
     
     widgetsInTemplate: true,
     constructor: function(ic,iwidget_messages,rootContext,restEndPoint, thisVar){
		  
		this.iContext=ic;
		this.iwidget_messages=iwidget_messages;
		this.widgetId=this.iContext.widgetId;
		this.rootContext=rootContext;
		this.restURL = restEndPoint;
			
   },
	   showEmployeeSearch: function(){

		
		this._markUpHandler = new com.ibm.bcgex.common.DojoMarkupHandler
(this,this,this.rootContext,this.widgetId) ;
		this._markUpHandler.loadConfigFile("testMarkupHandler");
		

		

	},

	onMSelect: function(){

	},

	onFSelect: function(){

	},

	search: function(){

	},

	reset: function(){

	}
    
  
});

在 catalog.xml 中添加条目

对于本文中使用的 testWidget.js 样例，以下条目需要加入 catalog.xml 中：

清单 9. Entry in catalog.xml for testWidget.js



<nls-string lang="en">Test Widget</nls-string>
            
 
Test Widget
	      

Test Widget

/testConsole/com/ibm/bcgex/iWidget/test/testWidget.xml
/BusinessSpace/iWidget/images/viewers/prev_doc.gif
/BusinessSpace/iWidget/images/viewers/icon_doc.gif
/BusinessSpace/iWidget/images/viewers/prev_doc.gif
7.0.0.0
International Business Machines Corp.

当您拖放 testWidget 之后，您可能会看到图 1 所示的界面：

图 1. 在 Business Space 测试小部件

（查看图 1 的放大版本。）

结束语

通过本文，您学习了如何通过利用基本小部件和小部件特有的模板来使用 iWidgets 中的多个模板。您也看到了所有小部件如何继承基本部件，使您可以重用 iWidgets 的通用代码。

原文链接：http://www.ibm.com/developerworks/cn/websphere/library/techarticles/1007_khanna/1007_khanna.html

使用Dojo 发定制BusinessSpace 小部件，第3部分