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");
}), dojo.hitch(this,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中直接在其对应的页面中响应数据，操作比较简单。本文谨为自己学习使用，初学者请勿随意模仿，以免进入学习的误区。