dojo使用筆記: 自定義ConfirmDialog

海鳥發表於2013-10-26
筆記

前言:

dojo1.10已經有了原生的ConfirmDialog

做gui應用開發,肯定要用到"確認"對話方塊, 無論是winForm, swing,還是web,也不管理你用什麼技術. 在web開發中很多成熟的開發套件中肯定會有"確認對話方塊"這個元件, 但是如果你用dojo的話, 那就有點可惜了, 因為它沒有, 如果因為這個事你很生氣, 那是可以理解的, 因為大家都很生氣, 所有在dojo官網的FAQ中,就有人問:

Dojo FAQ: Does Dijit have a confirm dialog?

當然, dojo的作者們有自己的理由:

No, Dijit does not provide pre-configured dialogs, like alert, confirm, or prompt.

Why? As simple as these may seem on the surface, each organization or application often needs something subtly different in terms of layout, appearance, behavior, events, and internationalization. Dojo and Dijit provide all the elements you need to make a variety of dialogs, including dijit/Dialog, dijit/form/Button, dojo/on, dojo/Deferred anddojo/i18n.

他們的解釋的大概意思就是: 你們要的東西自己構建起來很簡單的, 我們都給你們開發了這麼多元件, 自己拼拼不會啊, 你們真是伸手黨. 況且, 這個玩藝也沒法做公用的啊, 每個公司都有自己的需求和介面. 

 我只能說,你妹啊, 我就想要個基本功能的就行了, 而且我是個新手菜鳥啊, 還得想怎麼樣開發一個. 牢騷發完了, 事還得做, 嗯 . 開始吧.

程式碼:

我要的東西很簡單, 如下:

就是一個彈出確認框, 有兩個按鈕.

define([
"dojo/_base/declare",
"dijit/Dialog",
"dijit/_Widget",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!./templates/ConfirmDialog.html",
"dojo/json",
"dojo/_base/lang",
"dojo/on",
"dojo/aspect",
"dijit/form/Button"
],function(
declare, Dialog, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin,
template, json, lang, on, aspect
){
var DialogContentPane = declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], { //........... 1
        templateString: template
    });
    
　var dialog = declare(Dialog, { //........... 2
        title: "警告",
        message: "您確認嗎?",
        preventCache: true,
        constructor: function(kwArgs){
            lang.mixin(this, kwArgs);

            this.content = new DialogContentPane({parentDialog: this}); //.............. 3
        },
        startup: function(){
            this.inherited(arguments);
            var _this = this;
            on(this.content.cancelButton, "click", function(evt){//............ 4
                _this.hide();
                _this.no();
            });
            var signal = aspect.after(_this, "onHide", function(){//............. 5
                signal.remove();//......... 6
                _this.destroyRecursive();//........... 7
            });
            
        },
        onExecute: function(){//................8
            this.yes();
        }
    });
    
    return dialog;
});

 

程式碼說明:

我們需要一個要滿足我們需求的Dialog, 但是不用從頭構建一個, 所以這裡直接繼承了"dijit/Dialog", 如程式碼中 (2) 處. 為了構建出提示內容和兩個按鈕的介面, 我們要定義dialog的content屬性. 見程式碼(2)處, 我們把自定義的widget例項賦值給content屬性. 下面來看一下這個介面模板內容:

<div>

    <div class="dijitDialogPaneContentArea">
        <div data-dojo-attach-point="contentNode">${parentDialog.message}</div>
    </div>

    <div class="dijitDialogPaneActionBar">

        <button data-dojo-type="dijit.form.Button" type="submit">
            OK</button>

        <button data-dojo-type="dijit.form.Button"
            data-dojo-attach-point="cancelButton">Cancel</button>

    </div>

</div>

 

這個內容很簡單, 就是顯示要提示的資訊(message變數), 還定義了兩個按鈕.

程式碼(4)的作用是繫結cancel按鈕的click事件, 當點選這個按鈕時, 我們要隱藏dialog, 並執行回撥函式no()方法. 這個回撥函式後面會提到. 程式碼(5)處, 我們攔截了onHide()方法,目的是當dialog隱藏時一定要銷燬該dialog所佔用的資源. 這是因為當dialog呼叫hide()方法時, 只是簡單的把style的display置為none而也, 如果不銷燬的話, 可能會引起記憶體溢位. 程式碼(6)處是取消本次攔截. 程式碼(7)處是呼叫dialog的銷燬自己資源的方法. 程式碼(8)是監聽dialog中確認按鈕(OK)的點選事件, 它呼叫yes的回撥方法.

至此, 整個Dialog的定義已經結束, 下面看下我們怎麼使用:

var cd = new ConfirmDialog({
    message: "您確定刪除此分組?",
    yes: function(){
        alert("yes...");
    },
    no: function(){
        alert("no...");
    }});
cd.show();

 

跟使用dijit/Dialog一樣, 建立一個例項, 但是這裡要定義兩個回撥用方法: yes()和no(), 分別是給使用者點選了"OK"還是"Cancel"按鈕時呼叫的. 比如, 我們一般可以在這個yes方法裡進行一樣ajax操作,如果遠端刪除伺服器資源.

結束.

參考引用:

http://stackoverflow.com/questions/10401512/dojo-dialog-with-confirmation-button/10405938#10405938

http://jsfiddle.net/wkydY/205/

 

相關文章