創(chuàng)建Dorado對(duì)象

2024-03-07 18:37 更新

首先我們可以根據(jù)JSDOC提供的文檔參考創(chuàng)建Dorado對(duì)象,例如如下的代碼:

new dorado.widget.Button({
    caption: "Say Hello",
    onClick: function(self, arg) {
        dorado.MessageBox.alert("Hello!");
    }
})

上述的代碼用于創(chuàng)建一個(gè)Button對(duì)象,并設(shè)置其caption屬性和onClick事件。大部分Dorado JS對(duì)象的構(gòu)造參數(shù)都是一個(gè)用于初始化新對(duì)象的JSON對(duì)象。如上例此構(gòu)造參數(shù)等價(jià)于傳遞給set方法的批量寫入模式的參數(shù)。

$type

在我們創(chuàng)建復(fù)雜的復(fù)合對(duì)象的時(shí)候,例如一個(gè)Panel,其中含10個(gè)Button對(duì)象,我希望創(chuàng)建Panel的同時(shí)把其中的Button一起創(chuàng)建好。但是從編碼的角度可能我們并不想做十次的new Button()的操作,Dorado對(duì)此提供的思路是,我們能不能通過之前了解過的定義一個(gè)復(fù)雜的樹形結(jié)構(gòu)的JSON對(duì)象達(dá)到創(chuàng)建一個(gè)復(fù)雜Dorado對(duì)象的目的,如果能做到這一點(diǎn),那么代碼的簡(jiǎn)潔性顯而易見的。那么這個(gè)時(shí)候我們就需要用到Dorado對(duì)象創(chuàng)建中的$type特性。 做為$type的一個(gè)簡(jiǎn)單應(yīng)用,我們看下面的JSON聲明代碼:

{
    $type: "Button",
    caption: "Say Hello",
    onClick: function(self, arg) {
        dorado.MessageBox.alert("Hello!");
    }
}

這段代碼聲明了一個(gè)JSON對(duì)象,它在聲明體內(nèi)部的第一行定義了一個(gè)$type屬性。這相當(dāng)與告訴Dorado對(duì)象創(chuàng)建引擎這是一個(gè)dorado.widget.Button對(duì)象。 $type與widget的對(duì)應(yīng)關(guān)系我們可以通過JSDOC對(duì)象的聲明處查找,如Button對(duì)象中dorado.widget.Button的$type為Button。也就是說如果我們想用JSON的方式創(chuàng)建Dorado對(duì)象,其$type的值我們可以在JSDOC中通過這種方式進(jìn)行查找。上述JSON對(duì)象$type之后的代碼就相當(dāng)與創(chuàng)建了Button對(duì)象之后,再通過set的批量賦值操作。

通過JSDOC查找對(duì)象的$type 另外當(dāng)一個(gè)帶創(chuàng)建的對(duì)象不需要傳入構(gòu)造參數(shù)時(shí),甚至可以根據(jù)一個(gè)代表$type的字符串來(lái)創(chuàng)建相應(yīng)的Dorado對(duì)象。如上的JSON我們可以定義為:

{
    "Button",
    caption: "Say Hello",
    onClick: function(self, arg) {
        dorado.MessageBox.alert("Hello!");
    }
}

也就是說"$type"關(guān)鍵字可省略。

示例分析

以下范例是定義Grid的一個(gè)JSON聲明:

new dorado.widget.Grid({ columns: [
        "#", // 相當(dāng)于dorado.wdiget.grid.RowNumColumn,RowNumColumn的$type是#
        { property: "product" },
        {
        $type: "Group",
        caption: "Volumn",
        columns: [
            { property: "length", width: 50 },
            { property: "width", width: 50 },
            { property: "height", width: 50 }
        ]
        },
        { property: "price",
            onRenderCell: function(self, arg) {
                arg.cell.style.color = (arg.data < 100) ? "red":"";
            }
        },
    ]
});

Grid中有很多列,我們?cè)趧?chuàng)建這個(gè)Grid的時(shí)候把很多列也都一起初始化好了,我們首先關(guān)注其中的$type:"Group",在Grid中的列有好幾種,其中一種為普通列,一種為組合列,組合列的JSDOC為: 其中我們看到其$type為Group,則上面的JSON申明就表示創(chuàng)建一個(gè)dorado.widget.grid.ColumnGroup 對(duì)象。而對(duì)于像:

{ property: "product" }

上面的代碼則是創(chuàng)建一個(gè)dorado.widget.grid.DataColumn對(duì)象。我們來(lái)查看JSDOC: 注意其中的#type的值為Default;Data,這表示有兩個(gè)$type。如果我們?cè)赾olumns類型的對(duì)象內(nèi)部定義如下的JSON:

{ $type:"Data", property: "product" }

{ property: "product" }

它們都表示創(chuàng)建一個(gè)DataColumn對(duì)象。而像上面的ColumnGroup就需要我們顯示的設(shè)置$type為"Group",Group內(nèi)部又包含一些DataColumn對(duì)象,這樣我們又可以在內(nèi)部定義columns屬性:

columns: [
    { property: "length", width: 50 },
    { property: "width", width: 50 },
    { property: "height", width: 50 }
]

最后我們?cè)賮?lái)看第一個(gè)Column的定義,根據(jù)我們上面$type關(guān)鍵字省略的寫法我們知道,這其實(shí)是表示:

new dorado.widget.Grid({ columns: [
        $type:"#", // 相當(dāng)于dorado.wdiget.grid.RowNumColumn,RowNumColumn的$type是#
        { property: "product" },
        {
        $type: "Group",
        caption: "Volumn",
        columns: [
            { property: "length", width: 50 },
            { property: "width", width: 50 },
            { property: "height", width: 50 }
        ]
        },
        { property: "price",
            onRenderCell: function(self, arg) {
                arg.cell.style.color = (arg.data < 100) ? "red":"";
            }
        },
    ]
});

而"#"是RowNumColumn的$type: RowNumColumn的$type有兩個(gè)值,"#"或"RowNum"。 如果想更多的了解$type的使用,建議參考: http://dorado.bstek.com/sample-center/com.bstek.dorado.sample.Main.d 打開應(yīng)用中的范例(首頁(yè)也可以),并在瀏覽器中右鍵查看源碼,就可以看出Dorado頁(yè)面都是通過這種方式構(gòu)建好的。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)