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

核心提示： 在本文附带的 DojoMarkupHandler.js 文件中提供了为其他 DOJO 类型（文本框、复选框、日期文本框、按钮、多选框和文本区域）生成 markup 的源代码，在 configureScriptHitch 方法中，使用 DOJO 开发定制小部件，第 1 部分: 使用通用的 mark

在本文附带的 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 类。

在 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'　　　
}　

编写 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>　
　　　　　　

调用 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。

本文示例源代码或素材下载