創(chuàng)建Dorado對象

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

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

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

$type

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

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

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

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

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

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

示例分析

以下范例是定義Grid的一個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中有很多列,我們在創(chuàng)建這個Grid的時候把很多列也都一起初始化好了，我們首先關(guān)注其中的$type:"Group",在Grid中的列有好幾種，其中一種為普通列，一種為組合列，組合列的JSDOC為: 其中我們看到其$type為Group,則上面的JSON申明就表示創(chuàng)建一個dorado.widget.grid.ColumnGroup 對象。而對于像:

{ property: "product" }

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

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

或

{ property: "product" }

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

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

最后我們再來看第一個Column的定義，根據(jù)我們上面$type關(guān)鍵字省略的寫法我們知道，這其實是表示：

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