Dojo –Dialog在组件中传值

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