使用通用的 markup 处理程序生成 DOJO markup

红薯 发布于 2010/05/13 13:37
阅读 910
收藏 1

了解小部件属性

首先,需要在 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,这指定下拉菜单中的选项。
  • rows SimpleTextarea 显示的行数。
  • cols SimpleTextarea 显示的列数。
  • 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。

加载中
返回顶部
顶部