Dialog是所有开发人员都会使用到的一个对话框,由于它的常用性,很多开发平台都对其进行了封装,通过MessageBox或者Alert就能弹出来.再捕获commandOk中的值，来执行相应的事件.没错，Dialog就是这么简单，Dojo中的Dialog是否也是如此的简单呢？下面我们就以我新近做的Dialog为例进行说明.
下面，我们先看现象：单击“保存为搜索模板”，弹出“保存搜索条件”对话框.
由于“保存为搜索模板”为动态创建的，这里我就不再将此部分的页面代码Show出来，单击“保存为搜索模板”，触发“onSave()”事件，如下：
| onSave : function(event){ this.logger.debug("onSave"); this._saveSearchCondition(event.payload); } |
为了实现代码的重用性，及降低代码的耦合性，在onSave中调用this._saveSearchCondition(event.payload)方法，选用this.method方法，是避免Form中会有多个_saveSearchConditon()方法混淆使用，this限制了方法的作用域为当前的widget.
| _saveSearchCondition: function(payload){ this.logger.debug("_saveSearchCondition");
var generalCallback =function(result) { this.logger.debug("Success"); console.dir(['data',result ]); };
var cancelCallback =function() { this.logger.debug("cancelCallback"); };
ecmwdgt.getBean("saveSearchConditionDialog",{ model : ecmwdgt.getBean("searchTemplateModel"), payload : payload, callbacks:{ "ok":dojo.hitch(this,generalCallback), "cancel": dojo.hitch(this,cancelCallback) } }).show(); } |
注解：ecmwdgt.getBean().show()是加载了需要显示的Dialog，此Dialog对应的是创建该Dialog（saveSearchConditonDialog）的js文件，由json数据进行绑定.然后由saveSearchConditonDialog.js加载saveSearchConditonDialog.html文件.
model :ecmwdgt.getBean("searchTemplateModel")，有两个作用，一个是对service中的数据持久化，另一方面就是页面中暂存数据.如下为searchTemplateModel.js文件：
| save : function(/*Object*/ postPayLoad,/* Function */callback,/* Function */errorback) { this._invokeService("saveSearchCondition",postPayLoad,callback,errorback); } |
callbacks:分别对应Dialog页面“是”和 “否”的返回值，当我们操作成功，就会从前台界面返回成功，就会执行generalCallback()方法，注意这里的方法并不是Dialog时间执行的方法，而是事件执行成功之后，返回的方法.
在上面的方法执行完之后，就会加载saveSearchConditionDialog.js文件，创建Dialog，加载saveSearchConditionDialog.html，在页面中显示出来.下面是saveSearchConditionDialog.js与saveSearchConditionDialog.html的关键源码.
| dojo.require("com.ibm.ecm.nuclear.common.dialog.dijit._CommandDialog"); dojo.require("dojo.string");
dojo.declare("com.ibm.ecm.nuclear.common.dialog.SaveSearchConditionDialog",[com.ibm.ecm.nuclear.common.dialog.dijit._CommandDialog],{ templateString:dojo.cache("com.ibm.ecm.nuclear.common.dialog","templates/SaveSearchConditionDialog.html"), widgetsInTemplate : true, title : null,
preamble:function(args){ // this.bundle = args.bundle || ecmwdgt.getCommandResourceBundle("SaveSearchConditionDialog"); this.resourceBundle = ecmwdgt.getCommandResourceBundle("SaveSearchConditionDialog"); },
constructor: function(args){ this.title = args.title ||this.resourceBundle.dialogTitle; dojo.mixin(args, { buttons:[ { name:"ok",label:this._commonResourceBundle.YES}, { name:"cancel",label:this._commonResourceBundle.NO} ], commandsCallback:{ ok:dojo.hitch(this,this._onSaveSearchCondition), cancel:dojo.hitch(this,this._onCancel) } } ); },
postCreate: function() { this.inherited(arguments); var searchTitle =null; searchTitle = this.inputBox.get("value"); console.dir(["this",this]); },
_onSaveSearchCondition:function(){ this.logger.debug("common.dialog.SaveSearchConditionDialog._onSaveSearchCondition"); console.dir(["_onSaveSearchCondition this",this,this.model,this.payload]); var searchTitle =this.inputBox.get("value"); if(this.model &&this.payload && searchTitle){ this.logger.debug("Model Exists!"); this.payload.searchTemplateName = searchTitle; this.model.save(this.payload,dojo.hitch(this,function(result) { return this._execute("ok"); }),function(err) { this.onCancel(); this._showErrorMessage(err); return err; })); } //return searchTitle; },
_execute: function(name) { if (this.callbacks &&this.callbacks[name]) return this.callbacks[name](this.inputBox.get("value"),this); },
_onCancel: function(){ this.logger.debug("_onCancel"); console.dir(["this",this]); this._execute("cancel"); },
destroy: function(){ this.inherited(arguments); },
_eoc_: null
}); |
注解：刚才在上面callbacks进行了详细的解释，在这里_execute()方法将title方法返回给后台（并非是真正的后台），在contentList页面中取得返回值,这一步是取得返回值的关键.
Constructor为当前类的构造函数，它与我们平时创建的构造函数一样，只不过我们在这里构造了两个绑定值的Button使用.
saveSearchConditionDialog.html
| <div class="dijitDialog ecmSaveSearchConditionDialog" data-dojo-props='tabindex:"-1",waiRole:"dialog",waiState:"labelledby-${id}_title"'> <!-- 标题 --> <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar"> <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title">${title}</span> <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="onclick:onCancel" data-dojo-props='id:"${id}_closeButton",title:"${_commonResourceBundle.Close}"'> <span data-dojo-attach-point="closeText" class="closeText" data-dojo-props='title:"${_commonResourceBundle.Close}"'>x</span> </span> </div> <!-- 内容区 --> <div data-dojo-attach-point="containerNode"> <div data-dojo-type="dijit.layout.ContentPane" class="dijitDialogPaneContent ContentPane"> <div class="ecmDialogSaveSearchCondition"> <label>标题:</label> <input data-dojo-type="dijit.form.TextBox" type="text" data-dojo-attach-point="inputBox" value=""trim="true" required="true"> </div> </div> </div>
<div data-dojo-attach-point="buttonsPanelNode"></div> </div> |
注：此部分的Dialog实现方式与本系统所需的架构有关，在一般的Dialog中直接在其对应的页面中响应数据，操作比较简单。本文谨为自己学习使用，初学者请勿随意模仿，以免进入学习的误区。