認識Dojo中的介面控制項：Dijit

文章目錄

• 通過聲明方式建立Dijit
• 通過編程方式建立Dijit

Dojo架構區別於其他Ajax架構的一個顯著特徵就是它的介面控制項系統：Dijit。Dijit是Dojo中介面控制項的總稱，他們使用靈活而且易於理解。每個Dijit控制項都是由Dojo類以及控制項中使用的圖片，CSS等資源檔共同組成。通過Dijit架構，可以方便的建立靈活、可擴充、可定製外觀的控制項。下面將逐步介紹如何建立、配置Dijit控制項，從而將其用在自己的web應用中。

 

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

 

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

<style type="text/css"><!--<br /> /* use the tundra theme */<br /> @import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css";<br /> /* 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 */<br /></style><br />

 

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

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/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控制項。

 

建立Dijit的兩種方式

 

在Dojo中建立Dijit可以有兩種方式，這也是Dijit系統最顯著的特性之一：

1. 通過HTML標記以聲明方式建立
2. 通過javascript程式動態建立

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

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

這是一個包括多個選項的靜態下拉框，那麼現在我們想讓其支援即時過濾：即下拉框選項會根據你輸入的關鍵字被過濾，縮小選項範圍。在Dijit中有相應的控制項來實現這個特性：dijit.form.FilteringSelect. 因此，我們首先需要引入這個控制項：

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

引入控制項之後，我們很容易將一個靜態下拉框轉變為Dijit控制項。

 

通過聲明方式建立Dijit

 

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

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

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

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

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

 

通過編程方式建立Dijit

 

編程的方式就是通過javascript代碼來建立Dijit控制項。下面的代碼建立了dojo中內建的一些常用表單元素：
//require the class<br />dojo.require(‘dijit.form.FilteringSelect’);<br />//when the class has been loaded…<br />dojo.ready(function() {<br /> //dijitize my SELECT!<br /> var enhancedSelect = new dijit.Form.FilteringSelect({<br /> autoComplete: true,<br /> pageSize: 10<br /> },‘players’);<br /> //dijitize any form field individually<br /> var inputDijit = new dijit.form.Textbox({/*options*/},‘myInput’);<br /> var textareaDijit = new dijit.form.Textarea({/*options*/},‘myTextarea’);<br /> var mySelectDijit = new dijit.form.FilteringSelect({/*options*/},‘mySelect’);<br /> var dateDijit = new dijit.form.DateTextBox({/*options*/},‘myDate’);<br /> var timeDijit = new dijit.form.TimeTextBox({/*options*/},‘myTime’);<br /> var checkboxDijit = new dijit.form.CheckBox({/*options*/},‘myCheckbox’);<br /> var radioDijit1 = new dijit.form.RadioButton({/*options*/},‘myRadio1′);<br /> var radioDijit2 = new dijit.form.RadioButton({/*options*/},‘myRadio2′);<br />});

可以看到，建立一個dijit需要兩個參數：

第一個參數是一個javascript對象，這個對象的每一個屬性都將成為要建立的dijit的屬性。

第二個參數指定了dom節點，可以是節點id也可以是實際的節點。這就指定了要建立的dijit在頁面的位置。如果不指定此參數，那麼會自動建立一個獨立dom節點來對應這個dijit，由開發人員決定何時將其加入到頁面的什麼位置。

注意，這裡編程的方式建立就和parseOnLoad屬性沒關係了，無論設為true或者false，都會按照程式邏輯建立需要的Dijit控制項。

 

有時你需要建立一個包含許多元素的大表單，但又不想一個個建立，那麼下面的方式可以讓你用css3選取器指定節點，並將這些節點統一轉換為Dijit控制項，這是另外一種對標準Html進行Dijit化的方法，同時結合了靜態聲明和動態建立。這是通過dojo.behavior工具類來完成的：
//require the class<br />dojo.require(‘dojo.behavior’);<br />//when it has loaded…<br />dojo.ready(function(){<br /> //add two behaviors:<br /> dojo.behavior.add({<br /> //find SELECT elements, make them a FilteringSelect Dijit<br /> ’select’: {<br /> found: function(item) {<br /> new dijit.form.FilteringSelect({/*options*/},item);<br /> }<br /> },<br /> //find all radio buttons, make them dijit.form.RadioButton Dijits<br /> ‘input[type="radio"]‘: {<br /> found: function(item) {<br /> new dijit.form.RadioButton({ },item);<br /> }<br /> }/* ,<br /> more selector => Dijit creation….<br /> */<br /> });<br />});

當然，你也可以直接通過dojo.query尋找到需要的元素，再手動建立這些節點，這個和上面的代碼可以實現同樣的功能，但dojo.behavior提供了更簡潔的文法。

 

顯示了建立的表單：

 

 

訪問Dijit控制項和Dijit控制項的屬性

 

要擷取某一個特定dom節點，可以方便的用dojo.byId(id)方法擷取。Dijit也提供了類似的方法，dijit.byId(id)可以擷取指定id的節點對應的dijit控制項：如果建立Dijit控制項時使用的Dom節點有id屬性，那麼這個id就是Dijit控制項的id；如果Dom節點沒有指定id，那麼將會自動為Dijit控制項產生一個唯一id。

例如，如果我們要應用通過聲明方式建立的一個Dijit控制項，而且這個Dijit控制項對應的Dom節點具有id='players'這個屬性，那麼可以用如下代碼獲得這個Dijit控制項的引用：
//grab the players dijit.form.Filtering widget<br />var enhancedSelect = dijit.byId(‘players’);

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

如果想要擷取Dijit控制項的某個屬性，可以用如下代碼：
var pageSize = dijit.byId(‘players’).attr(‘pageSize’); // returns 10

如果要設定Dijit控制項的某個屬性，可以用如下代碼：
dijit.byId(‘players’).attr(‘pageSize’,20); //now pageSize is 20

可見，attr是所有Dijit控制項都有的方法，當只有一個參數時，返回參數指定屬性的值，當有2個參數時，將第二個參數賦值給參數一指定的參數。

需要注意的是：dojo 1.5使用了一種新的方式來使用dijit控制項的屬性：get和set，這使得對dijit控制項屬性的訪問更加直觀。功能上和attr方法完全相同，分別對應單參數和雙參數功能

 

Dijit控制項的事件綁定

 

Dijit控制項使用Dojo的connect方法來實現事件的綁定，例如：
dojo.connect(dijit.byId(‘player’),‘onChange’,function() {<br /> //the user has selected a new item<br /> //do something<br />});

每個Dijit控制項都有多個事件，但因為javascript的特殊性，即使綁定了一個不存在的事件，也不會報錯。因此，我們需要在使用事件之前尋找API文檔，以確保他們的存在。

 

Dijit控制項集

 

Dijit是一個非常優秀的UI控制項陳列庫，熟練的使用它們可以快速開發出功能強大的Ajax網站。在Dijit庫中有大量的功能穩定的控制項：

• 操作功能表，快顯功能表，按鈕式菜單
• 改進的基本表單元素：按鈕，下拉框，複選款，選項按鈕，文字框，等等。
• 日期和時間選擇控制項
• 所見即所得 (WYSIWYG)富文字編輯器
• 水平和垂直滑動塊
• 進度條
• 選項卡、手風琴控制項
• 支援拖放功能的樹結構
• 對話方塊，提示框
• 支援調整大小的布局控制項

如果在基本的dijit庫中沒有你需要的控制項，dojox（dojo擴充）是另外一個提供Dijit控制項的地方，其中有更大量的控制項可供選擇。

如果想要查看Dijit控制項的功能和樣式，可以使用Dojo的主題查看器來瀏覽。

 

Dijit資源

 

下面的連結可以協助你快速的學習和使用Dijit：

1. Dijit API Documentation
2. Dijit Reference Guide
3. Dojo Nightlies
   (test files)
4. Dijit Theme Tester

小結

 

本文簡要介紹了Dojo中的介面系統：Dijit。將來我們會提供更深入介紹Dijit控制項的文章，歡迎大家保持關注！

 

本文翻譯自：

http://www.sitepen.com/blog/2010/07/12/dive-into-dijit/

By Nate