認識Dojo中的界面控件：Dijit

LibraryPKU 2013-11-13

展開全文

Dojo框架區(qū)別于其他Ajax框架的一個顯著特征就是它的界面控件系統(tǒng)：Dijit。Dijit是Dojo中界面控件的總稱，他們使用靈活而且易于理解。每個Dijit控件都是由Dojo類以及控件中使用的圖片，CSS等資源文件共同組成。通過Dijit架構，可以方便的創(chuàng)建靈活、可擴展、可定制外觀的控件。下面將逐步介紹如何創(chuàng)建、配置Dijit控件，從而將其用在自己的web應用中。

Dijit控件概覽

開始使用Dijit：引入需要的類和資源

前面提到Dijit的組成中除了Dojo類，還有圖片和CSS。這些外觀是通過Dojo框架的主題來提供的，Dojo包含了4個主題，分別是：nihilo, soria, tundra和claro，其中claro是最新的Dojo1.5新增加的一個外觀主題。每個主題中都包含了用于定義控件外觀的css和圖片文件。因此，為了使用某一個主題，我們首先需要將其導入到Web頁面中：

[css] view plain copy

<style type="text/css"><!--
/* use the tundra theme */
@import "http://ajax./ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css";
/* Note that if you don’t specify a minor revision, e.g. 1.5.0 or 1.4.3, the CDN will deliver the latest version */
</style>

當然，這個地址你也可以用你自己的： @import "dojoroot/dijit/themes/tundra/tundra.css";

你可以用Dijit的主題查看器來查看每個主題的外觀，本地也可以訪問到這個主題查看器：<dojoroot>/dijit/themes/themeTester.html，你也可以定義自己的主題。

除了引入樣式文件，當然還要引入Dojo核心本身，和其他類庫一樣，需要引入一個js文件。但Dojo中可以在引用js文件的同時對其進行參數(shù)配置。這里有一個比較重要的就是parseOnLoad參數(shù)。這個參數(shù)使得在頁面載入完成之后自動解析頁面上的所有Dijit控件。因此，引入Dojo核心庫的代碼如下：

[xhtml] view plain copy

<script type="text/javascript" src="http://ajax./ajax/libs/dojo/1.4/dojo/dojo.xd.js.uncompressed.js" djConfig="parseOnLoad:true"></script>

同理，這里的dojo.js文件你也可以直接使用本地文件。

引入Dojo核心之后，你還需要引入你所用到的控件的代碼文件，這是通過dojo.require語句完成的。例如，你需要在頁面上使用一個按鈕控件：dijit.form.Button，那么你就需要在頁面載入的最開始加入：dojo.require('dijit.form.Button')。這個和java的import語句或者.net中using語句的作用是類似的。

準備工作完成之后，下面我們來看如何使用dojo控件。

創(chuàng)建Dijit的兩種方式

在Dojo中創(chuàng)建Dijit可以有兩種方式，這也是Dijit系統(tǒng)最顯著的特性之一：

通過HTML標記以聲明方式創(chuàng)建
通過javascript程序動態(tài)創(chuàng)建

例如，一個基本的下拉框通過如下HTML表示：

[xhtml] view plain copy

<select name="players" id="players">
<option value="">Select an Arsenal Player</option>
<option value="Arshavin" selected="selected">Andrey Arshavin</option>
<option value="Vermaelen">Thomas Vermaelen</option>
<!– more OPTION elements here –>
</select>

這是一個包括多個選項的靜態(tài)下拉框，那么現(xiàn)在我們想讓其支持實時過濾：即下拉框選項會根據(jù)你輸入的關鍵字被過濾，縮小選項范圍。在Dijit中有相應的控件來實現(xiàn)這個特性：dijit.form.FilteringSelect. 因此，我們首先需要引入這個控件：

[javascript] view plain copy

dojo.require(‘dijit.form.FilteringSelect’);

引入控件之后，我們很容易將一個靜態(tài)的下拉框轉變?yōu)镈ijit控件。

通過聲明方式創(chuàng)建Dijit

這種方式直接在原來的Html標記里加上Dijit相關的屬性：

[xhtml] view plain copy

<select name="players" id="players" dojoType="dijit.form.FilteringSelect" autoComplete="true" pageSize="10">
<option value="">Select an Arsenal Player</option>
<option value="Arshavin" selected="selected">Andrey Arshavin</option>
<option value="Vermaelen">Thomas Vermaelen</option>
<!– more OPTION elements here –>
</select>

這是用聲明方式來創(chuàng)建dijit的一個簡單例子，dojoType屬性告訴dojo一個給定的元素需要轉換為哪個dijit。前面我們已經提到在引入 Dojo核心庫時可以對其進行一些參數(shù)設置，parseOnLoad就是這樣一個配置屬性，設為true之后，Dojo就會在頁面載入完成之后立刻尋找所有帶有dojoType屬性的節(jié)點，并將其轉換為相應的Dijit控件。

在下拉框這個例子中，所有靜態(tài)聲明出來的選項（option）都會被新的FilteringSelect識別，除此之外，還可以在聲明的時候對dijit 的一些參數(shù)進行配置，例如：autoComplete = "true"就設置了自動完成功能，pageSize = "10"設置了每頁最多顯示10個結果。

由此可見，F(xiàn)ilteringSelect功能是在原有的select功能基礎上增加了新的功能。但沒有改變它是一個下拉框的本質。

通過編程方式創(chuàng)建Dijit

編程的方式就是通過javascript代碼來創(chuàng)建Dijit控件。下面的代碼創(chuàng)建了dojo中自帶的一些常用表單元素：

[javascript] view plain copy

//require the class
dojo.require(‘dijit.form.FilteringSelect’);
//when the class has been loaded…
dojo.ready(function() {
//dijitize my SELECT!
var enhancedSelect = new dijit.Form.FilteringSelect({
autoComplete: true,
pageSize: 10
},‘players’);
//dijitize any form field individually
var inputDijit = new dijit.form.Textbox({/*options*/},‘myInput’);
var textareaDijit = new dijit.form.Textarea({/*options*/},‘myTextarea’);
var mySelectDijit = new dijit.form.FilteringSelect({/*options*/},‘mySelect’);
var dateDijit = new dijit.form.DateTextBox({/*options*/},‘myDate’);
var timeDijit = new dijit.form.TimeTextBox({/*options*/},‘myTime’);
var checkboxDijit = new dijit.form.CheckBox({/*options*/},‘myCheckbox’);
var radioDijit1 = new dijit.form.RadioButton({/*options*/},‘myRadio1′);
var radioDijit2 = new dijit.form.RadioButton({/*options*/},‘myRadio2′);
});

可以看到，創(chuàng)建一個dijit需要兩個參數(shù)：
第一個參數(shù)是一個javascript對象，這個對象的每一個屬性都將成為要創(chuàng)建的dijit的屬性。
第二個參數(shù)指定了dom節(jié)點，可以是節(jié)點id也可以是實際的節(jié)點。這就指定了要創(chuàng)建的dijit在頁面的位置。如果不指定此參數(shù)，那么會自動創(chuàng)建一個獨立dom節(jié)點來對應這個dijit，由開發(fā)者決定何時將其加入到頁面的什么位置。

注意，這里編程的方式創(chuàng)建就和parseOnLoad屬性沒關系了，無論設為true或者false，都會按照程序邏輯創(chuàng)建需要的Dijit控件。

有時你需要創(chuàng)建一個包含許多元素的大表單，但又不想一個個創(chuàng)建，那么下面的方式可以讓你用css3選擇器指定節(jié)點，并將這些節(jié)點統(tǒng)一轉換為 Dijit控件，這是另外一種對標準Html進行Dijit化的方法，同時結合了靜態(tài)聲明和動態(tài)創(chuàng)建。這是通過dojo.behavior工具類來完成的：

[javascript] view plain copy

//require the class
dojo.require(‘dojo.behavior’);
//when it has loaded…
dojo.ready(function(){
//add two behaviors:
dojo.behavior.add({
//find SELECT elements, make them a FilteringSelect Dijit
’select’: {
found: function(item) {
new dijit.form.FilteringSelect({/*options*/},item);
}
},
//find all radio buttons, make them dijit.form.RadioButton Dijits
‘input[type="radio"]‘: {
found: function(item) {
new dijit.form.RadioButton({ },item);
}
}/* ,
more selector => Dijit creation….
*/
});
});

當然，你也可以直接通過dojo.query查找到需要的元素，再手動創(chuàng)建這些節(jié)點，這個和上面的代碼可以實現(xiàn)同樣的功能，但dojo.behavior提供了更簡潔的語法。

下圖顯示了創(chuàng)建的表單：

Dijit表單

訪問Dijit控件和Dijit控件的屬性

要獲取某一個特定dom節(jié)點，可以方便的用dojo.byId(id)方法獲取。Dijit也提供了類似的方法，dijit.byId(id)可以獲取指定id的節(jié)點對應的dijit控件：如果創(chuàng)建Dijit控件時使用的Dom節(jié)點有id屬性，那么這個id就是Dijit控件的id；如果Dom節(jié)點沒有指定id，那么將會自動為Dijit控件產生一個唯一id。
例如，如果我們要應用通過聲明方式創(chuàng)建的一個Dijit控件，而且這個Dijit控件對應的Dom節(jié)點具有id='players'這個屬性，那么可以用如下代碼獲得這個Dijit控件的引用：

[javascript] view plain copy

//grab the players dijit.form.Filtering widget
var enhancedSelect = dijit.byId(‘players’);

可以通過Firebug查看Dijit控件的所有屬性：

Dijitshuxing

如果想要獲取Dijit控件的某個屬性，可以用如下代碼：

[javascript] view plain copy

var pageSize = dijit.byId(‘players’).attr(‘pageSize’); // returns 10

如果要設置Dijit控件的某個屬性，可以用如下代碼：

[javascript] view plain copy

dijit.byId(‘players’).attr(‘pageSize’,20); //now pageSize is 20

可見，attr是所有Dijit控件都有的方法，當只有一個參數(shù)時，返回參數(shù)指定屬性的值，當有2個參數(shù)時，將第二個參數(shù)賦值給參數(shù)一指定的參數(shù)。
需要注意的是：dojo 1.5使用了一種新的方式來使用dijit控件的屬性：get和set，這使得對dijit控件屬性的訪問更加直觀。功能上和attr方法完全相同，分別對應單參數(shù)和雙參數(shù)功能