認(rèn)識(shí)Dojo中的界面控件：Dijit

1、認(rèn)識(shí) Dojo 中的界面控件： DijitDojo 框架區(qū)別于其他 Ajax 框架的一個(gè)顯著特征就是它 的界面控件系統(tǒng)：Dijit。Dijit是Dojo中界面控件的總稱，他 們使用靈活而且易 于理解。每個(gè) Dijit 控件都是由 Dojo 類以及控件中使用的圖 片， CSS 等資源文件共同組成。通過 Dijit 架構(gòu)，可以方便 的創(chuàng)建靈活、可擴(kuò)展、可定制 外觀的控件。下面將逐步介紹如何創(chuàng)建、配置 Dijit 控件，從 而將其用在自己的 web 應(yīng)用中。開始使用 Dijit ：引入需要的類和資源前面提到 Dijit 的組成中除了 Dojo 類，還有圖片和 CSS 。這 些外觀是通過 Dojo 框

2、架的主題來提供的， Dojo 包含了 4 個(gè) 主題，分別是： nihilo, soria,tundra 和 claro ，其中 claro 是最新的 Dojo1.5 新增加的一個(gè) 外觀主題。每個(gè)主題中都包含了用于定義控件外觀的 css 和 圖片文件。因此，為了使用某一個(gè)主題，我們首先需要將其導(dǎo)入到Web 頁面中：css view plaincopy<style type=text/css><!- /* use the tundra theme */import/ajax/libs/dojo/1.5/dijit/themes/t

3、 undra/tundra.css;/* Note that if you don tspecify a minor revision, e.g. 1.5.0 or 1.4.3, the CDN will deliver the latest version */</style>當(dāng)然，這個(gè)地址你也可以用你自己的： import dojoroot/dijit/themes/tundra/tundra.css; 你可以用 Dijit 的主 題查看器 來查看每個(gè)主題的外觀，本地也可以訪問到這個(gè)主題查看器： <dojoroot>/dijit/themes/themeTester

4、.html ，你也可以定 義自己的主題。除了引入樣式文件，當(dāng)然還要引入 Dojo 核 心本身，和其他類庫一樣，需要引入一個(gè) js 文件。但 Dojo 中可以在引用 js 文件的同時(shí)對(duì)其進(jìn)行參數(shù)配置。這里 有一個(gè)比較重要的就是 parseOnLoad 參數(shù)。這個(gè)參數(shù)使得 在頁面載入完成之后自動(dòng)解析頁面上的所有 Dijit 控件。因此， 引入 Dojo 核心庫的代碼 如下：xhtml view plaincopy<script type=text/javascriptsrc=/ajax/libs/dojo/1.4/dojo/dojo .xd.

5、js.uncompressed.js djConfig=parseOnLoad:true></script> 同理，這 里的 dojo.js 文件你也可以直接使用本地文件。引入 Dojo 核 心之后，你還需要引入你所用到的控件的代碼文件，這是通 過 dojo.require 語句完成的。例如，你需要在頁面上使用一 個(gè)按鈕控件： dijit.form.Button ，那么你就需要在頁面載入的最開始加 入： dojo.require(dijit.form.Button) 。這個(gè)和 java 的 import 語句或者 .net 中 using 語句的作用是類 似的。準(zhǔn)備工作完成之

6、后， 下面我們來看如何使用 dojo 控件。創(chuàng)建 Dijit 的兩種方式在 Dojo 中創(chuàng)建 Dijit 可以有兩種方式，這也是 Dijit 系統(tǒng)最顯 著的特性之一： 通過 HTML 標(biāo)記以聲明方式創(chuàng)建通過 javascript 程序動(dòng)態(tài)創(chuàng)建例如，一個(gè)基本的下拉框通過 如下 HTML 表示：xhtml view plaincopy<select name=players id=players> <option value=>Select an Arsenal Player</option> <option value=Arshavin selected

7、=selected>Andrey Arshavin</option> <option value=Vermaelen>Thomas Vermaelen</option>&It;! -more OPTION elements here-></select>這是一個(gè)包括多個(gè)選項(xiàng)的靜態(tài)下拉框，那么現(xiàn)在我們想讓其 支持實(shí)時(shí)過濾：即下拉框選項(xiàng)會(huì)根據(jù)你輸入的關(guān)鍵字被過濾， 縮小選項(xiàng)范圍。在 Dijit 中有相應(yīng)的控件來實(shí)現(xiàn)這個(gè)特性： dijit.form.FilteringSelect. 因此，我們首先需要引入這個(gè)控件： javascript v

8、iewplaincopydojo.require( dijit.form.FilteringSelect 引入控 ); 件之后，我們很容易將一個(gè)靜態(tài)的下拉框轉(zhuǎn)變?yōu)?Dijit 控件。通過聲明方式創(chuàng)建 Dijit這種方式直接在原來的 Html 標(biāo)記里加上 Dijit 相關(guān)的屬性：xhtml view plaincopy<select name=playersid=players dojoType=dijit.form.FilteringSelectautoComplete=true pageSize=10><option value=>Select an ArsenalP

9、layer</option><option value=Arshavin selected=selected>Andrey Arshavin</option> <option value=Vermaelen>Thomas Vermaelen</option>&It;! -more OPTION elements here-></select>這是用聲明方式來創(chuàng)建 dijit 的一個(gè)簡單例子， dojoType 屬性 告訴 dojo 一個(gè)給定的元素需要轉(zhuǎn)換為哪個(gè)dijit 。前面我們已經(jīng)提到在引入Dojo 核心庫時(shí)可以

10、對(duì)其進(jìn)行一些參數(shù)設(shè)置， parseOnLoad 就是這樣一個(gè)配置屬性，設(shè)為 true 之后， Dojo 就會(huì)在頁面 載入完成之后立刻尋找所有帶有 dojoType 屬性的節(jié)點(diǎn)，并將其轉(zhuǎn)換為相應(yīng)的 Dijit 控 件。在下拉框這個(gè)例子中， 所有靜態(tài)聲明出來的選項(xiàng) （ option ） 都會(huì)被新的 FilteringSelect 識(shí)別，除此之外，還可以在聲明 的時(shí)候?qū)?dijit的一些參數(shù)進(jìn)行配置，例如： autoComplete = true 就設(shè)置 了自動(dòng)完成功能， pageSize =10 設(shè)置了每頁最多顯示 10 個(gè)結(jié)果。由此可見， FilteringSelect 功能是在原有的 sele

11、ct 功能基礎(chǔ)上增加了新 的功能。但沒有改變它是一個(gè)下拉框的本質(zhì)。通過編程方式創(chuàng)建 Dijit編程的方式就是通過 javascript 代碼來創(chuàng)建 Dijit 控件。下面的代碼創(chuàng)建了 dojo 中自帶的一些常用表單元素：javascript view plaincopy/require the class dojo.require( dijit.form.FilteringSelect /when the )c;lasshas been loaded dojo.ready(fu nction()/dijitize my SELECT!varenhancedSelect = newdijit.F

12、orm.FilteringSelect(autoComplete: true,pageSize:10, players );individuallyvar inputDijit/dijitize any form fieldnewmyInput )v;armyTextarea );mySelect );myDate);myTime);myCheckbox);dijit.form.Textbox(/*options*/, textareaDijit = new dijit.form.Textarea(/*options*/, var mySelectDijit = new dijit.form.

13、FilteringSelect(/*options*/, var dateDijit = new dijit.form.DateTextBox(/*options*/, var timeDijit = new dijit.form.TimeTextBox(/*options*/, var checkboxDijit = new dijit.form.CheckBox(/*options*/,myRadiol );myRadio可以;var radioDijit1 = new dijit.form.Rad ioButton(/*options*/, var radioDijit2 = new d

14、ijit.form.RadioButton(/*options*/, 看到，創(chuàng)建一個(gè) dijit 需要兩個(gè)參數(shù)： 第一個(gè)參數(shù)是一個(gè) javascript 對(duì)象，這個(gè)對(duì)象的每一個(gè)屬性 都將成為要?jiǎng)?chuàng)建的 dijit 的屬性。第二個(gè)參數(shù)指定了 dom 節(jié)點(diǎn)，可以是節(jié)點(diǎn) id 也可以是實(shí)際 的節(jié)點(diǎn)。這就指定了要?jiǎng)?chuàng)建的 dijit 在頁面的位置。如果不指 定此參數(shù)，那么會(huì)自動(dòng)創(chuàng)建一個(gè)獨(dú)立 dom 節(jié)點(diǎn)來對(duì)應(yīng)這個(gè) dijit ，由開發(fā)者決定何時(shí)將其加入到頁面的什么位置。 注意， 這里編程的方式創(chuàng)建就和 parseOnLoad 屬性沒關(guān)系了，無 論設(shè)為 true 或者 false ，都會(huì)按照程序邏輯創(chuàng)建需要

15、的 Dijit 控件。有時(shí)你需要?jiǎng)?chuàng)建一個(gè)包含許多元素的大表單，但又不想一個(gè) 個(gè)創(chuàng)建，那么下面的方式可以讓你用 css3 選擇器指定節(jié)點(diǎn)， 并將這些節(jié)點(diǎn)統(tǒng)一轉(zhuǎn)換為Dijit 控件，這是另外一種對(duì)標(biāo)準(zhǔn) Html 進(jìn)行 Dijit 化的方法， 同時(shí)結(jié)合了靜態(tài)聲明和動(dòng)態(tài)創(chuàng)建。這是通過 dojo.behavior工具類來完成 的：javascript view plaincopy/require the class dojo.require( dojo.behavior /whe)n; it has loadeddojo.ready(function() /add two behaviors: dojo

16、.behavior.add(/find SELECTelements, make them a FilteringSelectDijit select :found: function(item) new dijit.form.FilteringSelect(/*options*/,item); ,/find all radio buttons, make them dijit.form.RadioButtonDijits inputtype=radio found: function(item) newdijit.form.RadioButton(,item);/* ,more select

17、or => Dijit creation*/);); 當(dāng)然，你也可以直接通過 dojo.query查找到需要的元素，再手動(dòng)創(chuàng)建這些節(jié)點(diǎn)，這個(gè)和上面的代碼可以實(shí)現(xiàn)同樣的功能，但 dojo.behavior 提供了更簡潔的 語法。下圖顯示了創(chuàng)建的表單：訪問 Dijit 控件和 Dijit 控件的屬性要獲取某一個(gè)特定 dom 節(jié)點(diǎn)，可以方便的用 dojo.byId(id) 方法獲取。 Dijit 也提供了類似的方法， dijit.byId(id) 可以 獲取指定 id 的節(jié)點(diǎn)對(duì)應(yīng)的 dijit 控件：如果創(chuàng)建 Dijit 控件時(shí)使 用的 Dom 節(jié)點(diǎn)有 id 屬性，那么這個(gè) id 就是 Dij

18、it 控件的 id ； 如果 Dom 節(jié)點(diǎn)沒有指定id，那么將會(huì)自動(dòng)為Dijit控件產(chǎn)生一個(gè)唯一id。例如，如果我們要應(yīng)用通過聲明方式創(chuàng)建的一個(gè) Dijit 控件， 而且這個(gè) Dijit 控件對(duì)應(yīng)的 Dom 節(jié)點(diǎn)具有 id=players 這個(gè)屬 性，那么可以用如下代碼獲得這個(gè) Dijit 控件的引用：javascript view plaincopy/grab the playersdijit.form.Filtering widget var enhancedSelect =dijit.byld( player可以通過Firebug查看Dijit控件的所有屬性：如果想要獲取 Dijit 控

19、件的某個(gè)屬性， 可以用如下代碼：javascript view plaincopyvar pageSize =dijit.byld(players ).attr(praegtuerSnisze10); 如/ 果要設(shè)置 Dijit 控件的某個(gè)屬性，可以用如下代碼：javascript viewplaincopydijit.byld( players ).attr( pageSize ,20); /nowpageSize is 20 可見，attr是所有Dijit控件都有的方法，當(dāng) 只有一個(gè)參數(shù)時(shí)， 返回參數(shù)指定屬性的值， 當(dāng)有 2個(gè)參數(shù)時(shí)， 將第二個(gè)參數(shù)賦值給參數(shù)一指定的參數(shù)。需要注意的是： dojo 1.5 使用了一種新的方式來使用 dijit 控 件的屬性：get和set,這使得對(duì)dijit控件屬性的訪問更加直 觀。功能上和 attr 方法完全相同，分別對(duì)應(yīng)單參數(shù)和雙參數(shù) 功能Dijit 控件的事件綁定Dijit 控件使用 Dojo 的 connect 方法來實(shí)現(xiàn)事件的綁定，例如：javascript viewplaincopydojo.connect(dijit.byId( player ), onChange ,functon()