利用 Dijit 組件框架打造豐富的用戶界面

時間 2019-12-08

標籤利用 dijit 組件框架打造豐富用戶界面简体版

原文原文鏈接

原文出處：Joe Lennonjavascript

從頭開始學習 Dojo，第 3 部分css

利用 Dijit 組件框架打造豐富的用戶界面html

Dijit 是什麼？

Dijit 是 Dojo 工具包的富組件用戶界面庫。這些組件徹底能夠主題化，而且能夠經過兩種方式聲明：可使用 HTML 風格的標籤以聲明式方法聲明，也可利用 JavaScript 以編程方式聲明。這一部分將簡要介紹 Dijit，介紹它提供的組件，並描述開箱即用的各類主題。html5

豐富的用戶界面組件

Dijit 的主要特性就是它提供的豐富的用戶界面組件套件。大多數 Web 應用程序開發人員都熟知基本 HTML 元素和表單元素的侷限性，以及利用 <div> 等元素和 CSS 規則對應用程序進行佈局的難度。這正是 Dijit 可以發揮其做用的場所。Dijit 提供了一系列在 HTML 中不可用的組件（固然，在無需您自行編寫的狀況下），其中包括：java

日曆
調色板
對話框（模態（modal）或非模態）
富文本編輯器
內嵌編輯器
菜單欄和上下文菜單
進度條
摺疊菜單和麪板
工具欄
工具提示
樹

除了上述列表以外，DojoX 擴展庫還提供了一系列額外的組件，包括網格、圖表、視頻播放器、燈箱效果等。圖 1 提供了多種 Dijit 組件的示例，包括按鈕、對話框、選項卡容器、日曆、調色板、菜單、富文本編輯器和進度條。jquery

圖 1. Dijit 組件的實際效果

除了 UI 組件以外，Dijit 還提供了一系列通過改進的表單字段，這提供了比常規 HTML 表單元素更多的靈活性和功能。這些表單控件包括：web

特定數據格式的各類文本框控件，包括幣種、日期、數字和時間
數字微調鈕
自動展開的文本區域
自動完成的組合框
多選列表框
帶有下拉菜單的按鈕
切換按鈕（切換開關）
滑塊

圖 2 展現了部分此類表單控件的實際效果。ajax

圖 2. Dijiti 表單控件的實際效果

Dijit 還包括多種佈局組件，使您可以垂手可得地組織 Web 應用程序的佈局。您沒必要再爲表格或 CSS 浮動內容而煩惱，Dijit 容許您爲應用程序佈局定義複雜的結構。Dijit 提供的佈局組件包括：數據庫

摺疊容器
堆疊容器
邊框容器
選項卡容器
內容窗格

如您所見，Dijit 擁有豐富的用戶界面組件，若是開發人員但願可以自行編寫這類組件，則須要花費漫長的時間。利用 Dijit，您就能夠縮短應用程序的開發時間，由於您沒必要再爲設計或開發複雜的用戶界面組件而煩惱。編程

主題

在上一節中，您看到了 Dijit 用戶界面組件的部分示例，全部這些示例均使用了 Dijit 附帶的「Claro」主題。Dijit 還開箱即用地提供了其餘幾種主題，使您可以更好地將 Dijit 組件的樣式與應用程序的風格相匹配。圖 3 展現了其餘 Dijit 主題的一些實際效果示例。

圖 3. Tundra、Soria 和 ihilo 主題

若是 Dijit 包含的主題不適合您的應用程序，那麼您能夠輕鬆定義本身的主題，並自定義全部 Dijit 組件，以便確切地知足您的需求。Dijit 主題的建立值得用單獨一篇文章加以介紹，Dojo 工具包文檔中提供了大量的細節。參考資料部分提供了 Dojo 文檔主題部分的連接。

初識 Dijit

要建立 Dijit 應用程序，則須要包含 Dojo 庫自己、您正在使用的主題的 CSS 文件，以及對您的 HTML 文檔的 body 元素中的主題選擇的引用。隨後，還要使用 dojo.require 函數加載您要包含在應用程序之中的 Dijit 組件。

讓咱們首先從用於使用 Claro 主題的 Dijit 應用程序的一個基本模板開始。出於本文的目的，我將假設您正在從 Google Content Delivery Network (CDN) 加載 Dojo，而不是從您本身的服務器或計算機加載。打開您喜好的文本編輯器，將清單 1 的內容添加到編輯器之中。

清單 1. 基本 Dijit 模板

<!doctype html>
<html lang="en" dir="ltr">     <head>         <title>Dijit Template</title>         <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs
/dojo/1.5/dijit/themes/claro/claro.css" />         <style type="text/css">             body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }         </style>     </head>     <body class="claro">         <!-- HTML content here -->         <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>         <script>             dojo.require("dijit.dijit");             //Add Dijit components you are using here using dojo.require                   dojo.addOnLoad(function() {                     //JavaScript content here             });         </script>     </body>
</html>

如您在清單 1 中所見，這裏加載了來自 Google CDN 的 claro.css 樣式表。此外，還有必要爲您的 <body> 元素提供一個與正在使用的主題名稱相匹配的類名稱。在本例中，我正在使用 Claro 主題，所以提供了類名稱 claro。您可能會認爲，要包含 Dijit，除了基本 Dojo 工具包以外，您還須要包含一系列的 JavaScript 文件。事實上並不是如此；您可使用 Dojo 的加載系統，使用 dojo.require 動態加載您須要的 Dijit 框架元素。然而，我添加的一項內容就是加載 Dojo 的 <script> 標籤的 djConfig="parseOnLoad: true" 屬性。這會大體告訴 Dojo 它要使用 HTML 解析器，並尋找帶有 dojoType 屬性的 HTML 元素。下一節將介紹更多相關內容。最後，在主應用程序腳本中，我爲 "dijit.dijit" 添加了一個 dojo.require 聲明，優化 Dijit 的加載。定義了模板以後，您就能夠在應用程序內使用 Dijit 組件了。

在您的應用程序中使用 Dijit 組件的方法共有兩種。第一種方法是以聲明的方式添加組件。這也就是說，添加到使用 dojoType 屬性的頁面 HTML 元素，代表一個組件應經過 Dojo 進行解析，而後做爲 Dijit 組件呈現。下一節將介紹更多相關內容。添加組件的另一種方法是使用 JavaScript，以編程的方式定義您的組件。稍後您會看到更多的相關內容。

以聲明的方式使用 Dijit

Dijit 所提供的一種其餘大多數主流 JavaScript 組件庫不具有的很是有用的特性就是：以聲明式的方式使用 widget 的方法，換句話說，就是使用常規 HTML 元素。這種方式的一種明顯的優點就是容許您使用 HTML 語法設計您的應用程序，就像在 Web 應用程序中同樣，將應用程序邏輯獨立放置在 JavaScript 之中。

經過這種方法使用 Dijit 很是直觀。讓咱們來看一個建立日曆組件的示例。首先，在模板的 <body> 部分中，找到註釋 ，隨後使用如下代碼行替換此註釋：<div dojoType="dijit._Calendar"></div>。

接下來，在 dojo.require("dijit.dijit"); 代碼行下，添加如下代碼行：dojo.require("dijit._Calendar");。

請保存此文件，並將它載入您喜好的 Web 瀏覽器。您應看到相似於圖 4 所示的屏幕快照，很是整潔，不是嗎？

圖 4. Dijit 日曆組件實際效果

經過這種方式聲明 Dijit 組件目前是將 Dojo 添加到您的應用程序之中的最便捷的方法。若是適用，您能夠在其餘 widget 內添加 widget（舉例來講，您能夠在一個 TitlePane 內添加一個調色板），甚至能夠垂手可得地將事件處理程序鏈接到您的組件。

首先，讓咱們在一個 widget 內嵌套另外一個 widget，如上一節所述。使用清單 2 所示的代碼片斷取代 HTML 部分中的日曆行。

清單 2. 在一個標題窗格內添加調色板的代碼片斷

<div dojoType="dijit.TitlePane" title="Color Picker">     <div dojoType="dijit.ColorPalette"></div>
</div>

接下來，使用清單 3 中的代碼取代日曆的 dojo.require 調用。

清單 3. 更換日曆的 `dojo.require` 調用

dojo.require("dijit.TitlePane"); dojo.require("dijit.ColorPalette");

請保存文件，重載 Web 瀏覽器。您將看到如圖 5 所示的效果。

圖 5. 位於一個標題窗格內的調色板

您能夠看到，調色板出如今標題窗格組件中，若是您摺疊標題窗格，則不會顯示調色板。如今，讓咱們經過兩種方法爲調色板添加一個事件處理程序。首先，使用內置的 onClick 屬性，在用戶選擇一種顏色時顯示包含選定值的警告窗口。爲此，請將您的 dojo.ColorPalette 對象的 HTML 元素更改成：<div dojoType="dijit.ColorPalette" onChange="alert(this.value);"></div>。

請保存文件，並將它載入瀏覽器，隨後嘗試單擊一種顏色。此時應該看到一個警告窗口，其中顯示了您選定的顏色的十六進制值。內嵌的事件處理程序很是適合單行操做，但若是您但願執行一些更爲複雜的操做，那麼這種方法就不太適用。幸運的是，您能夠聲明 dojo/method<script> 塊，將 JavaScript 代碼添加到您的 Dijit 組件。

使用清單 4 中的代碼，取代您剛剛更改的代碼行。

清單 4. Dojo 方法 <腳本> 塊實際效果

<div dojoType="dijit.ColorPalette">     <script type="dojo/method" event="onChange" args="evt">          alert(this.value);     </script>
</div>

請保存文件，重載瀏覽器，您將看到它執行了相同的操做。然而，這一次，您在 Dijit 組件的 HTML 元素內添加了一個 <script> 塊。這裏並無採用傳統的「文本/Javascript」類型值，而是爲其提供了一個 dojo/method 值，告知 Dojo 解析器來解析這個代碼塊。它利用事件屬性，定義應將此代碼綁定到哪一個事件，並使用 args 屬性將全部參數傳遞給函數。

聲明式語法是我我的最喜好的 Dojo 特性之一，它使得搭建相對複雜的應用程序設計變得極爲簡單。此外，它還爲不熟悉 JavaScript 的人員提供了一種開發複雜 Web 應用程序的方法。在下一節中，您將看到如何利用 JavaScript 來執行這些任務。

利用 JavaScript 處理 Dijit

儘管使用編程的方法不像經過聲明式方法使用 Dijit 同樣簡單，但經過編程式方法添加組件也並非很難。首先，讓咱們建立一個基本日曆示例，就像上一節所建立的那個示例同樣。從基本 Dijit 模板入手（清單 1），在主 HTML 部分中添加如下代碼行（取代註釋 ）：<div id="myCalendar"></div>。

接下來，在 dojo.require("dijit.dijit"); 代碼行下，添加如下代碼：dojo.require("dijit.Calendar");。

最後，在 dojo.addOnLoad 功能模塊內，添加如下代碼行：var calendar = new dijit.Calendar({}, "myCalendar");。

請保存文件，並將它載入您的瀏覽器。您應看到與圖 4 中所見日曆相同的日曆。在本例中，您爲 HTML 代碼添加了一個基本佔位符元素，其 ID 爲 myCalendar。隨後，您使用表達式 new dijit.Calendar 以編程的方式建立了日曆。此函數的第一個參數是一個配置對象（本例中爲空）。第二個參數是應將組件綁定到的 HTML 元素的 ID，在本例中是 myCalendar。很是簡單，不是嗎？

嵌套組件又如何？讓咱們繼續咱們的工做，編寫在標題窗格內有一個調色板的示例代碼。首先，HTML 部分應包含如下內容：<div id="myTitlePane"></div>。

接下來，您須要清單 5 中的如下 dojo.require 語句（固然，也須要 dijit.dijit）。

清單 5. `dojo.require` 語句

dojo.require("dijit.TitlePane");
dojo.require("dijit.ColorPalette");

最後，應將清單 6 中的代碼置於 dojo.addOnLoad 塊中。

清單 6. 以編程的方式建立標題窗格和調色板

var colorPalette = new dijit.ColorPalette({});
var titlePane = new dijit.TitlePane({     content: colorPalette,     title: "Color Picker"
}, "myTitlePane");

請保存文件並將它載入瀏覽器，您將獲得如圖 5 所示的結果。在觀察編程式 Dijit 組件內的事件處理以前，讓咱們先來看看編寫上述代碼的替代方法。咱們使用了清單 7 中所示的代碼來取代 HTML 塊。

清單 7. 使用嵌套式 HTML 元素來設定組件佈局

<div id="myTitlePane">     <div id="myColorPalette"></div>
</div>

dojo.addOnLoad 塊應包含清單 8 所示的代碼。

清單 8. 僅使用 ID 綁定嵌套式組件

var colorPalette = new dijit.ColorPalette({}, "myColorPalette");
var titlePane = new dijit.TitlePane({     title: "Color Picker"
}, "myTitlePane");

在這個版本中，您使用所綁定的 HTML 元素添加了標題窗格內的調色板。在 JavaScript 中，隨後會使用 ID 綁定組件，這意味着沒必要使用內容屬性將調色板添加到標題窗格之中。我傾向於使用這種方法，由於 HTML 結構爲頁面提供了更多語義含義，使您可以更加輕鬆地經過 HTML 語法觀察頁面佈局。

最後，讓咱們來看看如何爲經過編程的方式聲明的 Dijit 組件添加事件處理。使用清單 9 中的代碼取代 var colorPalette = new dijit.ColorPalette({}, "myColorPalette"); 代碼行。

清單 9. 爲以編程的方式建立的組件添加事件處理程序

var colorPalette = new dijit.ColorPalette({     onChange: function(evt) {         alert(this.value);     }
}, "myColorPalette");

請保存文件，重載瀏覽器，並單擊一種顏色，您會瞬間看到所選定顏色的十六進制值。此外，也能夠將代碼行保持原樣，並在其下方添加如清單 10 所示的代碼。

清單 10. 使用 `dojo.connect` 添加事件處理程序

dojo.connect(colorPalette, "onChange", null, function(evt) {     alert(this.value);
});

有必要指出的是，在 Dijit 組件中，事件的名稱是區分大小寫的。Dojo 對常規 DOM 對象中的事件徹底使用小寫字母，對 Dijit 組件中的事件使用駝峯式大小寫（駝峯式大小寫即第一個字母採用小寫，其餘任何後接的詞均首字母大寫），所以在處理 Dijit 組件時，請務必使用後一種方法。

使用 `dijit.byId`

若是您閱讀了本系列的第一篇從頭開始學習 Dojo，第 1 部分：開始 Dojo 開發，那麼應該已經熟悉了 dojo.byId 函數，它能獲取對一個 DOM 元素的引用。相似地，Dojo 提供了一個 dijit.byId 函數，容許您得到 Dijit 組件的一個句柄。若是您正在以聲明的方式建立組件，而且但願在 JavaScript 代碼中與其交互，那麼這種方式尤其有用。讓咱們來看一個例子。

以基本 Dijit 模板（清單 1）爲基礎，在 HTML 部分中添加如下代碼：<button id="myButton" dojoType="dijit.form.Button">Push Me</button>。

接下來，在您的 dojo.require 部分中，請添加如清單 11 所示的代碼行。

清單 11. 使用 dojo-require

dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");

最後，讓咱們使用 dijit.byId 得到按鈕的一個引用，並在用戶單擊按鈕時顯示一個對話框。將清單 12 中的代碼添加到 dojo.addOnLoad 函數塊中。

清單 12. 使用 `dijit.byId` 鏈接到一個按鈕

var button = dijit.byId("myButton");
dojo.connect(button, "onClick", null, function(evt) {     var dialog = new dijit.Dialog({         content: "You clicked the button!",         title: "Message"     }).show();
});

請保存文件，並在您的瀏覽器中打開它。而後單擊按鈕，您會看到一個對話框，如圖 6 所示。

圖 6. 按鈕和對話框

使用 Dijit 的佈局特性

除了一些很是有用的組件和表單控件以外，Dijit 還提供了一個出色的佈局框架，使您可以更加輕鬆地組織應用程序的界面。這一節將介紹如何使用 Dijit 的各類佈局組件。爲了簡便起見，全部示例均使用 Dojo 的聲明式語法提供，可是，若有必要，您應該能夠可以很輕鬆地將其轉爲編程式方法。

內容窗格（panes）

內容窗格是最基本的 Dijit 佈局組件。它們容許您定義一個內容部分，經過直接將 HTML 代碼提供給內容屬性來載入這一部分，或者經過 XmlHttpRequest 調用異步載入它。就後者而言，在從服務器載入內容時，內容窗格會顯示一條正在加載的消息。

讓咱們來看一個很是基礎的內容窗格實例。首先，建立一個新文件，將其命名爲 content.html，而後爲其添加如下代碼：<h1>content.html content here!</h1>。

如今，在基本 Dijit 模板中（如清單 1 所示），將清單 13 中的代碼添加到模板的 HTML 部分。

清單 13. 使用 Dijit 內容窗格

<button dojoType="dijit.form.Button" id="myButton">     Load content using XHR
</button>
<div dojoType="dijit.layout.ContentPane" id="myContentPane">     <h1>Static content here!</h1>
</div>

接下來，將清單 14 中的代碼添加到 dojo.require 部分

清單 14. 將內容窗格添加到 `dojo.require` 部分

dojo.require("dijit.form.Button");
dojo.require("dijit.layout.ContentPane");

最後，鏈接按鈕和內容窗格，將 content.html 載入內容窗格。在 dojo.addOnLoad 內添加清單 15 的代碼。

清單 15. 將按鈕鏈接到內容窗格

var button = dijit.byId("myButton");
var contentPane = dijit.byId("myContentPane");   dojo.connect(button, "onClick", null, function(evt) {     contentPane.attr("href","content.html");
});

請保存文件，並將它載入您的 Web 瀏覽器。您會看到如圖 7 所示的消息。

圖 7. 經過 XHR 加載以前

包含使用 XHR 加載內容按鈕和「Static content here」這句話的窗口。

如今，請單擊按鈕，消息將會發生變化。

圖 8. 經過 XHR 加載以後

包含使用 XHR 加載內容按鈕和「content.html content here」這句話的窗口。

不能否認，這個示例很是簡單，但它應該可以展現將動態內容載入一個 Dijit ContentPane 組件是多麼輕鬆。Dialog 等其餘 Dijit 組件中實際上也使用了這個組件，用它來呈現內容部分。這些組件每每還用於佈局容器之中，例如堆疊容器和選項卡容器，稍後咱們將介紹相關內容。

堆疊容器

堆疊容器就是容許使用包含多個不一樣的子容器的容器，但每次僅有一個子容器可見（有時稱之爲卡片式佈局）。若是您正在建立分步向導，那麼這種佈局組件尤其有用。讓咱們來看看如何建立 Dijit 堆疊容器，並經過一個堆疊控制器在堆疊的控制器之間進行導航。

首先，經過基本 Dijit 模板（清單 1）建立一個新文件。在 HTML 代碼部分中，添加清單 16 所示的代碼。

清單 16. 建立一個堆疊容器和控制器

<div dojoType="dijit.layout.StackContainer" id="stackContainer">     <div dojoType="dijit.layout.ContentPane" title="Stack 1">         This is the content in stack 1.     </div>     <div dojoType="dijit.layout.ContentPane" title="Stack 2">         This is the content in stack 2.     </div>
</div>
<div dojoType="dijit.layout.StackController"
containerId="stackContainer"></div>

在保存該文件以前，請務必確保它包含所需的必要 dojo.require 調用（請參見清單 17）。

清單 17. 向 `dojo.require` 添加堆疊容器和控制器

dojo.require("dijit.layout.StackContainer");
dojo.require("dijit.layout.StackController");
dojo.require("dijit.layout.ContentPane");

請保存文件，並將它載入您的瀏覽器。您應該看到如圖 9 所示的結果。單擊控制器按鈕會容許您更改當前選定的堆疊。全部這一切均無需使用 JavaScript（固然，dojo.require 調用除外），這真是使人滿意，不是嗎？

圖 9. 堆疊容器和堆疊控制器實例

選項卡容器

與堆疊容器類似，選項卡容器容許您擁有多個視圖，而任意給定時間僅有一個視圖可見。然而，與堆疊容器不一樣的是，選項卡容器提供了一些選項，這些選項以顯示在內容上方、下方或旁邊的選項卡的形式出現，可在各視圖之間切換。除此以外，它們不須要任何獨立控件，由於它們直接構建在組件自己以內。與前面同樣，您能夠將清單 18 所示的代碼添加到代碼的 HTML 部分中。

清單 18. 建立一個選項卡容器

<div style="width: 535px; height: 290px">     <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">         <div dojoType="dijit.layout.ContentPane" title="Tab 1">             This is the content in tab 1.         </div>         <div dojoType="dijit.layout.ContentPane" title="Tab 2">             This is the content in tab 2.         </div>     </div>
</div>

在本例中，選項卡容器包含於一個外部 <div> 容器之中，該容器定義了能夠包含選項卡容器的區域。固然，不要忘記將相關的代碼行添加到您的 dojo.require 塊中（請參見清單 19）。

清單 19. 將選項卡容器添加到 `dojo.require`

dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");

請保存文件，並將它載入您的瀏覽器，結果應如圖 10 所示。您能夠單擊相關選項卡，在不一樣視圖之間進行切換。

圖 10. 選項卡容器實例

摺疊容器

另一種容許您每次顯示一個部分的容器就是摺疊容器。這種容器一般採用垂直展開/摺疊的佈局形式，每次僅可打開一個部分，該部分展開時將填充摺疊容器的整個空間。要了解這種容器，最好的方法就是觀察示例，所以下面咱們將給出一個示例。

首先，將清單 20 所示的代碼添加到您的模板的 HTML 部分中。

清單 20. 建立一個摺疊容器

<div style="width: 535px; height: 290px">     <div dojoType="dijit.layout.AccordionContainer" style="width: 100%; 
height: 100%;">          <div dojoType="dijit.layout.ContentPane" title="Blade 1">              This is the content in blade 1.          </div>          <div dojoType="dijit.layout.ContentPane" title="Blade 2">              This is the content in blade 2.          </div>         <div dojoType="dijit.layout.ContentPane" title="Blade 3">             This is the content in blade 3.         </div>     </div>
</div>

請不要忘記您的 dojo.require 引用（請參見清單 21）。

清單 21. 將摺疊容器添加到 `dojo.require`

dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");

在您的瀏覽器中打開摺疊容器，結果應如圖 11 所示。

圖 11. 摺疊容器實例

3 個水平選項卡，第一個選項卡處於展開狀態，填滿了整個窗口，另外兩個選項卡處於摺疊狀態。

要在不一樣的視圖之間進行切換，只需單擊相關部分（我更喜歡稱之爲 blade）的標題便可。

邊框容器佈局

最後，咱們來看看邊框容器。若是您過去使用過用戶接口庫，例如 Swing，那麼您可能會熟知邊框容器的概念，它容許您將組件放置在四個區域中：東、南、西、北。Dojo 中提供了一樣的概念，但能提供分隔線，所以更爲強大。一樣，最好經過示例來進行說明，所以咱們來構建一個示例（如清單 22 所示）。

清單 22. 建立一個邊框容器

<div style="width: 535px; height: 290px">     <div dojoType="dijit.layout.BorderContainer" style="width: 100%; 
height: 100%;">         <div dojoType="dijit.layout.ContentPane" region="top" splitter="true">             This is the content in the top section.         </div>         <div dojoType="dijit.layout.ContentPane" region="left" style="width: 100px;"
splitter="true">             This is the content in the left section.         </div>         <div dojoType="dijit.layout.ContentPane" region="center" splitter="true">             This is the content in the center section.         </div>         <div dojoType="dijit.layout.ContentPane" region="right" style="width: 100px;"
splitter="true">             This is the content in the right section.         </div>         <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true">              This is the content in the bottom section.          </div>      </div>
</div>

清單 22 建立了一個擁有頂端部分和底端部分的佈局，左、右和中心部分位於其間。在嘗試以前，請將如下代碼（如清單 23 所示）添加到您的 dojo.require 部分中。

清單 23. 將邊框容器添加到 `dojo.require`

啓動您的瀏覽器，打開剛剛保存的文件。您應看到如圖 12 所示的效果。

圖 12. 邊框容器實例

這不只爲應用程序建立了一種結構良好的佈局，並且可以定製佈局，用戶能夠拖動各窗格的中心手柄，經過拖動來調整應用程序特定部分的大小。對於一個甚至都沒有使用 JavaScript 的應用程序來講（除了 dojo.require 調用以外），這使人印象很是深入。

正如您在這一節中所看到的那樣，Dijit 使得爲應用程序建立高級佈局變得極爲輕鬆，徹底不須要複雜的 JavaScript 代碼。本節中使用的全部佈局組件都可經過編程的方式建立。相關示例請參閱 Dojo 文檔（參見參考資料部分）。

DojoX：Dojo 的綁定擴展庫

除了 Dojo Base、Dojo Core 和 Dijit 庫以外，Dojo 還提供了對於 DojoX 的支持，這是一組並未歸入框架其餘部分的實驗性和補充性的組件和特性。未歸入框架其餘部分的緣由各式各樣，多是代碼還沒有準備好投入生產，多是因爲過大而不適於包含在默認部分中，也可能僅僅是由於擴展並未獲得普遍利用，或者不像 Dojo 工具包主要部分中包含的特性那樣存在廣泛的需求。所以，在使用 DojoX 組件時，您應該倍加謹慎，部分此類組件可能未通過全面的測試或者支持可訪問性或國際化的認證。

DojoX 包括多種附加函數。下面的列表給出了 Dojox 提供的部分組件示例：

音頻/視頻回放
圖表繪製
Comet 客戶端
適合多種不一樣數據源的普遍的數據存儲，包括 CouchDB 數據庫、CSV 文件，以及 Flickr、Google Search、Amazon S3 等 Web API
矢量繪製 API
附加的表單 widget
數據網格
圖像 widget（包括圖片庫、幻燈片放映和燈箱）
JSON 查詢
更多佈局容器
RPC 支持
多種其餘 widget，包括儀表、其餘日曆和選色器、魚眼 widget、文件選取器、橫幅廣告交替組件等

在您的應用程序中包含 DojoX 擴展是很是簡單的。其餘 JavaScript 庫須要您瀏覽存儲庫、下載額外的文件、將其上傳至服務器、在您的代碼中引用這些文件，而 DojoX 大相徑庭，其工做方式與 Dijit 組件大致相同。最簡單的說明方法就是給出示例，所以咱們將建立一個新頁面，使用 DojoX 的評分表單 widget。

首先，咱們將使用清單 1 中的基本 Dijit 模板建立一個新頁面。在頂端包含 claro.css 文件的代碼行下方，添加第二個 <link> 標籤，加載評分 widget CSS 文件：<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/form/resources/Rating.css" />。

接下來，在代碼的 HTML 部分中，添加如下代碼行，添加一個有五顆星可供選擇的評分控件，默認選擇三顆星：<div dojoType="dojox.form.Rating" numstars="5" value="3"></div>。

最後，使用前述 dojo.require 載入 Dijit 組件時，添加如下代碼行：dojo.require("dojox.form.Rating");。

到這裏，咱們的工做就完成了。實際上，這就是在您的應用程序中使用 DojoX 組件所需的所有工做。固然，部分較爲複雜的 Widget（例如網格等）可能須要比這種基本組件更多的工做，但所需的基本步驟都是相同的。最終結果應如圖 13 所示。

圖 13. DojoX 評分 widget 實際效果

如需瞭解有關 DojoX 及其提供的所有特性的更多具體信息，請參閱 Dojo 文檔。參考資料部分中提供了此文檔最新版本的連接。

結束語

在這篇文章中，您應該已經瞭解到，Dojo 並不只僅只是一種 JavaScript 框架。Dijit 組件庫提供了大量易於使用的 widget，它們可以顯著加強您的應用程序的可用性，並使開發人員沒必要從零開始編寫這些組件。除此以外，全部 Dijit 組件都是徹底對主題友好的，使您能夠輕鬆利用 Dojo 構建適合您本身的應用程序的功能。在這篇文章中，咱們學習瞭如何利用 Dijit 以聲明式和編程式建立組件，以及如何定義但願使用的主題。本文還了解了如何經過簡單的幾行代碼打造使人印象深入的佈局。最後，您應該已經看到添加 DojoX 爲您的應用程序提供的擴展特性是多麼輕鬆，徹底不須要下載和配置額外的插件。

下載資源

文章源代碼 (part3.source.zip | 9KB)