Dijit 是什么？
Dijit 是 Dojo 工具包的富组件用户界面库。这些组件完全可以主题化，并且可以通过两种方式声明：可以使用 HTML 风格的标签以声明式方法声明，也可利用 JavaScript 以编程方式声明。这一部分将简要介绍 Dijit，介绍它提供的组件，并描述开箱即用的各种主题。
丰富的用户界面组件
Dijit 的主要特性就是它提供的丰富的用户界面组件套件。大多数 Web 应用程序开发人员都熟知基本 HTML 元素和表单元素的局限性，以及利用 <div> 等元素和 CSS 规则对应用程序进行布局的难度。这正是 Dijit 能够发挥其作用的场所。Dijit 提供了一系列在 HTML 中不可用的组件（当然，在无需您自行编写的情况下），其中包括：
- 日历
- 调色板
- 对话框（模态（modal）或非模态）
- 富文本编辑器
- 内嵌编辑器
- 菜单栏和上下文菜单
- 进度条
- 折叠菜单和面板
- 工具栏
- 工具提示
- 树
除了上述列表之外，DojoX 扩展库还提供了一系列额外的组件，包括网格、图表、视频播放器、灯箱效果等。图 1 提供了多种 Dijit 组件的示例，包括按钮、对话框、选项卡容器、日历、调色板、菜单、富文本编辑器和进度条。
图 1. Dijit 组件的实际效果
除了 UI 组件之外，Dijit 还提供了一系列经过改进的表单字段，这提供了比常规 HTML 表单元素更多的灵活性和功能。这些表单控件包括：
- 特定数据格式的各种文本框控件，包括币种、日期、数字和时间
- 数字微调钮
- 自动展开的文本区域
- 自动完成的组合框
- 多选列表框
- 带有下拉菜单的按钮
- 切换按钮（切换开关）
- 滑块
图 2 展示了部分此类表单控件的实际效果。
图 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 模板
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
如您在清单 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> 部分中，找到注释 <!-- HTML content here -->，随后使用以下代码行替换此注释：<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. 在一个标题窗格内添加调色板的代码片段
| 1 2 3 |
|
接下来，使用清单 3 中的代码取代日历的 dojo.require 调用。
清单 3. 更换日历的 dojo.require 调用
| 1 |
|
请保存文件，重载 Web 浏览器。您将看到如图 5 所示的效果。
图 5. 位于一个标题窗格内的调色板
您可以看到，调色板出现在标题窗格组件中，如果您折叠标题窗格，则不会显示调色板。现在，让我们通过两种方法为调色板添加一个事件处理程序。首先，使用内置的 onClick 属性，在用户选择一种颜色时显示包含选定值的警告窗口。为此，请将您的 dojo.ColorPalette 对象的 HTML 元素更改为：<div dojoType="dijit.ColorPalette" onChange="alert(this.value);"></div>。
请保存文件，并将它载入浏览器，随后尝试单击一种颜色。此时应该看到一个警告窗口，其中显示了您选定的颜色的十六进制值。内嵌的事件处理程序非常适合单行操作，但如果您希望执行一些更为复杂的操作，那么这种方法就不太适用。幸运的是，您可以声明 dojo/method<script> 块，将 JavaScript 代码添加到您的 Dijit 组件。
使用清单 4 中的代码，取代您刚刚更改的代码行。
清单 4. Dojo 方法 <脚本> 块实际效果
| 1 2 3 4 5 |
|
请保存文件，重载浏览器，您将看到它执行了相同的操作。然而，这一次，您在 Dijit 组件的 HTML 元素内添加了一个 <script> 块。这里并没有采用传统的 “文本/Javascript” 类型值，而是为其提供了一个 dojo/method 值，告知 Dojo 解析器来解析这个代码块。它利用事件属性，定义应将此代码绑定到哪个事件，并使用 args 属性将所有参数传递给函数。
声明式语法是我个人最喜爱的 Dojo 特性之一，它使得搭建相对复杂的应用程序设计变得极为简单。此外，它还为不熟悉 JavaScript 的人员提供了一种开发复杂 Web 应用程序的方法。在下一节中，您将看到如何利用 JavaScript 来执行这些任务。
利用 JavaScript 处理 Dijit
尽管使用编程的方法不像通过声明式方法使用 Dijit 一样简单，但通过编程式方法添加组件也并不是很难。首先，让我们创建一个基本日历示例，就像上一节所创建的那个示例一样。从基本 Dijit 模板入手（清单 1），在主 HTML 部分中添加以下代码行（取代注释 <!-- HTML content here -->）：<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 语句
| 1 2 |
|
最后，应将清单 6 中的代码置于 dojo.addOnLoad 块中。
清单 6. 以编程的方式创建标题窗格和调色板
| 1 2 3 4 5 |
|
请保存文件并将它载入浏览器，您将得到如 图 5 所示的结果。在观察编程式 Dijit 组件内的事件处理之前，让我们先来看看编写上述代码的替代方法。我们使用了清单 7 中所示的代码来取代 HTML 块。
清单 7. 使用嵌套式 HTML 元素来设定组件布局
| 1 2 3 |
|
dojo.addOnLoad 块应包含清单 8 所示的代码。
清单 8. 仅使用 ID 绑定嵌套式组件
| 1 2 3 4 |
|
在这个版本中，您使用所绑定的 HTML 元素添加了标题窗格内的调色板。在 JavaScript 中，随后会使用 ID 绑定组件，这意味着不必使用内容属性将调色板添加到标题窗格之中。我倾向于使用这种方法，因为 HTML 结构为页面提供了更多语义含义，使您能够更加轻松地通过 HTML 语法观察页面布局。
最后，让我们来看看如何为通过编程的方式声明的 Dijit 组件添加事件处理。使用清单 9 中的代码取代 var colorPalette = new dijit.ColorPalette({}, "myColorPalette"); 代码行。
清单 9. 为以编程的方式创建的组件添加事件处理程序
| 1 2 3 4 5 |
|
请保存文件，重载浏览器，并单击一种颜色，您会瞬间看到所选定颜色的十六进制值。此外，也可以将代码行保持原样，并在其下方添加如清单 10 所示的代码。
清单 10. 使用 dojo.connect 添加事件处理程序
| 1 2 3 |
|
有必要指出的是，在 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
| 1 2 |
|
最后，让我们使用 dijit.byId 获得按钮的一个引用，并在用户单击按钮时显示一个对话框。将清单 12 中的代码添加到 dojo.addOnLoad 函数块中。
清单 12. 使用 dijit.byId 连接到一个按钮
| 1 2 3 4 5 6 7 |
|
请保存文件，并在您的浏览器中打开它。然后单击按钮，您会看到一个对话框，如图 6 所示。
图 6. 按钮和对话框
使用 Dijit 的布局特性
除了一些非常有用的组件和表单控件之外，Dijit 还提供了一个出色的布局框架，使您能够更加轻松地组织应用程序的界面。这一节将介绍如何使用 Dijit 的各种布局组件。为了简便起见，所有示例均使用 Dojo 的声明式语法提供，但是，如有必要，您应该可以能够很轻松地将其转为编程式方法。
内容窗格（panes）
内容窗格是最基本的 Dijit 布局组件。它们允许您定义一个内容部分，通过直接将 HTML 代码提供给内容属性来载入这一部分，或者通过 XmlHttpRequest 调用异步载入它。就后者而言，在从服务器载入内容时，内容窗格会显示一条正在加载的消息。
让我们来看一个非常基础的内容窗格实例。首先，创建一个新文件，将其命名为 content.html，然后为其添加以下代码：<h1>content.html content here!</h1>。
现在，在基本 Dijit 模板中（如 清单 1 所示），将清单 13 中的代码添加到模板的 HTML 部分。
清单 13. 使用 Dijit 内容窗格
| 1 2 3 4 5 6 |
|
接下来，将清单 14 中的代码添加到 dojo.require 部分
清单 14. 将内容窗格添加到 dojo.require 部分
| 1 2 |
|
最后，连接按钮和内容窗格，将 content.html 载入内容窗格。在 dojo.addOnLoad 内添加清单 15 的代码。
清单 15. 将按钮连接到内容窗格
| 1 2 3 4 5 6 |
|
请保存文件，并将它载入您的 Web 浏览器。您会看到如图 7 所示的消息。
图 7. 通过 XHR 加载之前
现在，请单击按钮，消息将会发生变化。
图 8. 通过 XHR 加载之后
不可否认，这个示例非常简单，但它应该能够展示将动态内容载入一个 Dijit ContentPane 组件是多么轻松。Dialog 等其他 Dijit 组件中实际上也使用了这个组件，用它来呈现内容部分。这些组件往往还用于布局容器之中，例如堆叠容器和选项卡容器，稍后我们将介绍相关内容。
堆叠容器
堆叠容器就是允许使用包含多个不同的子容器的容器，但每次仅有一个子容器可见（有时称之为卡片式布局）。如果您正在创建分步向导，那么这种布局组件尤为有用。让我们来看看如何创建 Dijit 堆叠容器，并通过一个堆叠控制器在堆叠的控制器之间进行导航。
首先，通过基本 Dijit 模板（清单 1）创建一个新文件。在 HTML 代码部分中，添加清单 16 所示的代码。
清单 16. 创建一个堆叠容器和控制器
| 1 2 3 4 5 6 7 8 9 10 |
|
在保存该文件之前，请务必确保它包含所需的必要 dojo.require 调用（请参见清单 17）。
清单 17. 向 dojo.require 添加堆叠容器和控制器
| 1 2 3 |
|
请保存文件，并将它载入您的浏览器。您应该看到如图 9 所示的结果。单击控制器按钮会允许您更改当前选定的堆叠。所有这一切均无需使用 JavaScript（当然，dojo.require 调用除外），这真是令人满意，不是吗？
图 9. 堆叠容器和堆叠控制器实例
选项卡容器
与堆叠容器相似，选项卡容器允许您拥有多个视图，而任意给定时间仅有一个视图可见。然而，与堆叠容器不同的是，选项卡容器提供了一些选项，这些选项以显示在内容上方、下方或旁边的选项卡的形式出现，可在各视图之间切换。除此之外，它们不需要任何独立控件，因为它们直接构建在组件本身之内。与前面一样，您可以将清单 18 所示的代码添加到代码的 HTML 部分中。
清单 18. 创建一个选项卡容器
| 1 2 3 4 5 6 7 8 9 10 |
|
在本例中，选项卡容器包含于一个外部 <div> 容器之中，该容器定义了可以包含选项卡容器的区域。当然，不要忘记将相关的代码行添加到您的 dojo.require 块中（请参见清单 19）。
清单 19. 将选项卡容器添加到 dojo.require
| 1 2 |
|
请保存文件，并将它载入您的浏览器，结果应如图 10 所示。您可以单击相关选项卡，在不同视图之间进行切换。
图 10. 选项卡容器实例
折叠容器
另外一种允许您每次显示一个部分的容器就是折叠容器。这种容器通常采用垂直展开/折叠的布局形式，每次仅可打开一个部分，该部分展开时将填充折叠容器的整个空间。要了解这种容器，最好的方法就是观察示例，因此下面我们将给出一个示例。
首先，将清单 20 所示的代码添加到您的模板的 HTML 部分中。
清单 20. 创建一个折叠容器
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
请不要忘记您的 dojo.require 引用（请参见清单 21）。
清单 21. 将折叠容器添加到 dojo.require
| 1 2 |
|
在您的浏览器中打开折叠容器，结果应如图 11 所示。
图 11. 折叠容器实例
要在不同的视图之间进行切换，只需单击相关部分（我更喜欢称之为 blade）的标题即可。
边框容器布局
最后，我们来看看边框容器。如果您过去使用过用户接口库，例如 Swing，那么您可能会熟知边框容器的概念，它允许您将组件放置在四个区域中：东、南、西、北。Dojo 中提供了同样的概念，但能提供分隔线，因此更为强大。同样，最好通过示例来进行说明，因此我们来构建一个示例（如清单 22 所示）。
清单 22. 创建一个边框容器
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
清单 22 创建了一个拥有顶端部分和底端部分的布局，左、右和中心部分位于其间。在尝试之前，请将以下代码（如清单 23 所示）添加到您的 dojo.require 部分中。
清单 23. 将边框容器添加到 dojo.require
| 1 2 |
|
启动您的浏览器，打开刚刚保存的文件。您应看到如图 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 为您的应用程序提供的扩展特性是多么轻松，完全不需要下载和配置额外的插件。
1777
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
