使用 DOJO 开发定制小部件,第 1 部分: 使用通用的 markup 处理程序生成 DOJO markup

通过学习编写通用代码,简化 DOJO iWidget 开发。可以应用学到的知识为 WebSphere® 支持的 Business Space 开发基于 DOJO 的定制 iWidget。在第 1 部分中,学习如何用通用的 markup 处理程序生成 DOJO markup。

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

Meenakshi Khanna 的照片Meenakshi Guruaribam Khanna 是 Software Group 的资深软件工程师,在 IBM India Software Lab 的 WebSphere B2B Development User Interface Team 工作。她在 J2EE 和 Java 技术方面有丰富的经验,是 Sun Certified Java Programmer 和 Sun Certified Web Component Developer。Meenakshi 已经在 developerWorks 上发表了多篇文章。



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

Divya Satyavarapu 的照片Divya L Satyavarapu 是 IBM 的助理系统工程师,已经在 IBM 工作了 2 年。她是 Sun Certified Java Programmer。她曾经在 WebSphere Portal Server 上开发 JSF portlet,目前属于 WebSphere B2B UI Development Team。



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

Anil R Patlolla 是一位资深软件工程师,在 Bangalore 的 India Software Labs 工作。他从 Bangalore University 获得了电子工程学士学位。他有 10 年从业经验,主要从事 Java 和 J2EE 领域,过去 5 年在 IBM 工作。



Mallikarjun P Javali, 软件工程师, IBM

Mallikarjun Javali 对于各种 J2EE 技术有 7 年多的经验,参与过产品开发和售前工作。他主要关注富 internet 应用程序技术。当前,他在 WebSphere B2B Development UI Team 为 Business Space 框架开发基于 DOJO 的小部件。



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

Anand Bandaru 的照片Anand Bandaru 是 Bangalore 的 India Software Labs 的高级软件工程师。他从 Birla Institute of Technology and Sciences 获得了系统软件硕士学位,从 Osmania University 获得了计算机应用硕士学位。Anand 是 Sun Certified Java2 Programmer。他有 10 年从业经验,主要从事 Java 和 J2EE 领域,过去 7 年在 IBM 工作。



2010 年 5 月 12 日

使用 DOJO 为 Business Space 开发小部件

我们为本系列开发的定制小部件基于 DOJO 1.2.3,已经使用 Mozilla Firefox 3.0.11 在 WebSphere Integration Developer V6.2 上的 Business Space V6.2 中测试过。但是,我们开发的通用框架概念也适用于不使用 Business Space 的 DOJO 应用程序。理解本系列需要具备 DOJO 和 iWidget 框架的基本知识。

我们要讨论在基于 DOJO 的应用程序中经常遇到的主题。本系列组织为以下几部分:

  • 第 1 部分:使用通用的 markup 处理程序生成 DOJO markup
  • 第 2 部分:使用通用的网格处理程序创建具有分页功能的 Dojo DataGrid 组件
  • 第 3 部分:在 iWidget 中使用多个模板和如何继承基本小部件
  • 第 4 部分:使用通用的 REST 处理程序从 iWidget 发出可配置的 REST 调用

为了便于参考,可下载的 sampleCode.zip 中提供以下文件:

  • DojoMarkupHandler.js:这是通用 markup 处理程序的 JavaScript 类。
  • markuphandler.json:这个 JSON 文件包含屏幕上的小部件的属性。
  • markuphandler.html:这是模板 HTML 文件,其中包含 HTML markup。JSON 文件中声明的所有 div 应该出现在这里。

简介

在第 1 部分中,学习如何使用通用的 markup 处理程序方便地创建 DOJO markup。编写 DOJO 代码从未如此容易!我们将介绍一种使用 DojoMarkupHandler JavaScript 类生成 DOJO markup 的简单方法。这个 markup 处理程序类可以为 dijit.form.ValidationTextBoxdijit.form.SimpleTextareadijit.form.MultiSelect 等 DOJO 小部件生成 markup。

本文介绍使用 DOJO markup 处理程序所需的步骤,讲解 markup 处理程序的工作方式。


了解小部件属性

首先,需要在 JSON 文件中定义屏幕上所有小部件的属性。下面是必有属性和可选属性的列表:

必有属性

  • divname:这是 div 的名称,其中的组件应该放到 html 中。这个 div 应该出现在模板 HTML 文件中。
  • type:这是 DOJO 小部件的类型。支持以下类型:
    • radiogroup (dijit.form.RadioButton)
    • textfield (dijit.form.ValidationTextBox)
    • combobox (dijit.form.ComboBox)
    • filteringselect (dijit.form.FilteringSelect)
    • button (dijit.form.Button)
    • textarea (dijit.form.SimpleTextarea)
    • checkbox (dijit.form.CheckBox)
    • multiselect (dijit.form.MultiSelect)
    • datetextbox (dijit.form.DateTextBox)
    • autocompleter (Autocompleter)
  • id:这是要创建的组件的 ID 或 dojoAttachPoint
  • searchAttr:在组合框中输入值时,根据这个字段搜索数据库。(这个属性对于 MultiSelectComboBoxFilteringSelectAutocompleter 是必需的。)
  • labelAttr:要显示的标签。(这个属性对于 MultiSelectComboBoxFilteringSelectAutocompleter 是必需的。)

可选属性

  • value:组件的默认值。
  • trim:如果它设置为 true,就会截断包含空格的输入文本。
  • required:如果字段是必需字段,就设置为 true。
  • style:这是字段的样式。
  • maxlength:字段中允许输入的最大文本长度。
  • regExp:用于检验字段的正则表达式。
  • constraints:字段的约束。
  • invalidMessage:在输入任何错误的值时显示的无效消息。
  • promptMessage:作为字段提示显示的消息。
  • scriptmethod:事件类型(onClickonChange 等等)和在发生事件时应该调用的方法的名称。示例:scriptmethod:'onclick:clickMe'
  • cssclass:这是字段的 css 类变量。类优先于样式。
  • options:对于 MultiSelectComboBoxFilteringSelectAutocompleter,这指定下拉菜单中的选项。
  • rowsSimpleTextarea 显示的行数。
  • colsSimpleTextarea 显示的列数。
  • iconClass:图标 css 类在按钮上显示指定的图标。

DojoMarkupHandler JavaScript 类处理 JSON 文件中的属性,动态地生成小部件,开发人员不需要编写任何 DOJO markup。

在本文后面,我们会讨论如何通过编写 JSON 文件生成图 1 所示的 markup。但是,先看看 markup 处理程序如何生成 DOJO markup。

图 1. 使用通用 markup 处理程序生成的示例
使用通用 markup 处理程序生成的示例

DOJO markup 处理程序如何工作

DojoMarkupHandler.js 首先装载 JSON 文件,见清单 1。

清单 1. 装载 JSON 文件
loadConfigFile: function(fileName){		
	   
		var FUNCTIONNAME = "loadConfigFile()";
console.debug("Trace: " + "Class: " + this.CLASSNAME + " Function: 
	" + FUNCTIONNAME + " - Action: Entry");

var configUrl=this.rootContext+"com/common/markupHandlerJson/
	"+fileName+".json";
		console.debug("Config URL="+configUrl);

		
		var req = {	url:configUrl,
				handleAs: "json",
				sync: true,
				load: dojo.hitch(this, 
					"_markupHandlerInitiator"),
				error: dojo.hitch(this, 
					"_markupHandlerInitiatorError")
			  };

		 dojo.xhrGet(req);
	}

然后,markupHandler_getConfigMarkup 方法中处理 JSON 文件,对于每个条目,检查要显示的小部件的类型。根据类型调用对应的方法,见清单 2。

清单 2. _getConfigMarkup 方法
_getConfigMarkup:function(navigationItems)
	{
		var FUNCTIONNAME = "getConfigMarkup()";
console.debug("Trace: " + "Class: " + this.CLASSNAME + " Function: " 
	+ FUNCTIONNAME + " - Action: Entry");
		
		for(var i=0;i<navigationItems.length;i++){
			var itemObj=navigationItems[i];			
			type = itemObj.type;
			
			if(type =='filteringselect'){
				this.createFilteringSelectMarkup(itemObj);
			}

			if(type =='combobox'){
				this.createComboBoxMarkup(itemObj);
			}

			if(type =='multiselect'){
				this.createMultiSelectMarkup(itemObj);
			}

			if(type =='validationtextbox'){
				this.createValidationTextBoxMarkup(itemObj);
			}


			if(type =='simpletextarea'){
				this.createSimpleTextAreaMarkup(itemObj);
			}
			
			if(type =='radiogroup'){
				this.createRadioGroupMarkup(itemObj);
			}

			if(type =='checkbox'){
				this.createCheckBoxMarkup(itemObj);
			}
						
			if(type =='button'){
				this.createButtonMarkup(itemObj);
			}
		}
		
	}

createComboBoxMarkup 方法中,markup 处理程序生成用于创建组合框小部件的 DOJO markup,见清单 3。

清单 3. createComboBoxMarkup 方法
createComboBoxMarkup: function(comboBoxSelectObject)
	{
		var FUNCTIONNAME = "createComboBoxMarkup()";
		console.debug("Trace: " + "Class: " + this.CLASSNAME + 
			" Function: " + FUNCTIONNAME + " - Action: Entry");	
		optionStore = this._getOptionsStore(comboBoxSelectObject);

		var props = {		
			name:this.widgetId+comboBoxSelectObject.id,
			id:this.widgetId+comboBoxSelectObject.id,
			dojoAttachPoint:this.widgetId+comboBoxSelectObject.id,
			store: optionStore,
			searchAttr:""+comboBoxSelectObject.searchAttr,
			labelAttr:""+comboBoxSelectObject.labelAttr,
			maxLength: this._getMaxLengthField
				(comboBoxSelectObject.maxlength),
			required: this._getRequiredField
				(comboBoxSelectObject.required),
			style: comboBoxSelectObject.style,
			invalidMessage: this._getNLSMessage
				(comboBoxSelectObject.invalidMessage),
			promptMessage: this._getNLSMessage
				(comboBoxSelectObject.promptMessage)
		};
		

		this.comboBox = new dijit.form.ComboBox(props, 
				this._getDivElement(comboBoxSelectObject));
					this.comboBox._setClassAttr
				(this._getObjectClass
					(comboBoxSelectObject.cssclass,
					comboBoxSelectObject.style));
		this.comboBox.setValue(comboBoxSelectObject.value);
		this._configureScriptHitch(this.comboBox,comboBoxSelectObject);
		this.objectsList.add(this.objectsList.count,this.comboBox);

console.debug("Trace: " + "Class: " + this.CLASSNAME + " Function: " + 
			FUNCTIONNAME + " - Action: Exit");
	}

在本文附带的 DojoMarkupHandler.js 文件中提供了为其他 DOJO 类型(文本框、复选框、日期文本框、按钮、多选框和文本区域)生成 markup 的源代码。

configureScriptHitch 方法中,把脚本方法与组件连接起来,见清单 4。

清单 4. configureScriptHitch 方法
configureScriptHitch:function(){

			if(itemObj.scriptmethod)
		{
			if(this.thisVar.iContext.getElementById
				(this.widgetId+itemObj.id)!=null) {
				elementId = this.thisVar.iContext.getElementById
					(this.widgetId+itemObj.id);
			} else {
				elementId = dojo.byId(this.widgetId+itemObj.id);
			}

			var scriptKeys = itemObj.scriptmethod.split(":");
			var eventType = scriptKeys[0];
			var scriptName =scriptKeys[1];
			
			if(itemObjId==null)
			{
dojo.connect(elementId,eventType, dojo.hitch(this.scriptMethodObj, scriptName));
			} else {
dojo.connect(itemObjId,eventType, dojo.hitch(this.scriptMethodObj, scriptName));
			}
		}

如何在代码中使用 markup 处理程序

本节讲解如何在自己的代码中调用 markup 处理程序 JavaScript 类。

  1. 在 JSON 文件中定义属性。需要在 JSON 文件(例如 markuphandler.json)中定义屏幕上所有小部件的属性,见下面的 JSON 文件片段。一定要指定每个小部件的必有属性,根据需要添加可选属性。
    {
    	divname:'employeename',
    	type:'validationtextbox',
    	id:'employeename',
    	regExp:"[a-zA-Z0-9_\*%\?\$\.=,-]*",
    	value:"",
    	constraints:'',
    	required:"true",
    	maxlength:'30',
    	style:'width: 100px;height:17px;',
    	invalidMessage:'Invalid value'					
    }
  2. 编写 HTML 模板。对于 JSON 文件中的每个 ID,在 HTML 文件(例如 markuphandler.html)中都应该有具有相同 ID 的 div,见下面的 HTML 模板片段。
    <th width="7%" class="body-copyboldleft">Employee Name</th>
    <td width="7%"><div  id="${widgetId}employeename"></div> </td>
  3. 调用 DojoMarkupHandler.js 类。首先,从发出调用的 JavaScript 实例化 markup 处理程序 JavaScript 类。然后用 JSON 文件的名称调用 loadConfigFile,如下所示。
    this._markUpHandler = new com.ibm.bcgex.common.DojoMarkupHandler 
    	(this,this, this.getRootContext(),this.iContext.widgetId);
    
    this._markUpHandler.loadConfigFile("alertsList");

结束语

在本文中,学习了如何简便地开发基于 DOJO 的 iWidget。这种方式的主要好处是不需要在 HTML 文件中为每个屏幕编写 markup 代码。HTML 模板只包含布局信息和需要放置组件的 div。


下载

描述名字大小
源代码sampleCode.zip31KB

参考资料

学习

  • 编写一个定制的 Dojo 应用程序(developerWorks 2009):了解与开发 Web 2.0 和 DOJO 应用程序相关的技巧、技术和困难。Wendi Nusbickel 和 Melissa Betancourt 为这篇文章介绍的 DOJO 应用程序花费了一年多时间,最近完成了 Web 2.0 DOJO 原型的开发。他们与读者分享在创建定制的 DOJO 应用程序时获得的经验。
  • Overview of developing widgets:在 Business Space 信息中心了解如何为 Business Space 开发 iWidget。
  • IBM developerWorks 中国 WebSphere 专区:为使用 WebSphere 产品的开发人员准备的技术信息和资料。这里提供产品下载、how-to 信息、支持资源以及免费技术库,包含 2000 多份技术文章、教程、最佳实践、IBM Redbook 和在线产品手册。

获得产品和技术

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=WebSphere
ArticleID=476331
ArticleTitle=使用 DOJO 开发定制小部件,第 1 部分: 使用通用的 markup 处理程序生成 DOJO markup
publish-date=05122010