掌握 Dojo 工具包，第 5 部分: Dojo 的 UI 组件库 - Dijit
http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro5/index.html
Dijit 简介
从 Dojo 0.9 开始，Dojo 把 Widget 从 Dojo 的核心包中分离出来，组成 Dijit 。 Dojo 在 Dijit 中为 Widget 家族添加了多位成员，增强了 Widget 的实力的同时也加快了其在页面中的加载速度。
为改善 Widget 的外观，Dijit 提供了多套样式主题，比如默认绑定的样式主题 Tundra，提高页面可访问性的样式主题 A11y，以及其它两种可供选择的主题 Soria 和 Nihilo 。并且开发人员还可以根据自身项目的需求开发个性化的主题。同时 Dijit 对国际化和针对残障人士的可访问性的支持成度很高。可以说 Dijit 已成为 Dojo 工具包中三辆马车之一。
本文将会详细介绍 Dijit 中的 Widget 的使用。由于 Dojo Widget 数量众多，不能一一介绍。为此从功能的角度把 Widget 分为三类：表单 Widget，布局 Widget，高级 Widget 。在每个类别中选择代表性的 Widget 结合示例加以介绍。
回页首
表单 Widget 的使用
在有用户概念的 Web 应用中，注册是一项必不可少的功能，同时注册也是有点枯燥的任务。有个不争的事实就是：没人喜欢填表单——无论是网上还是网下。所以设计有效的页面表单不是件容易的事情。如果不能改变注册表单存在的事实，那么就要改变表单枯燥令人生厌的现状，让表单或整个注册过程变得轻松省力。为实现这个目标，Web 开发人员会把较长的注册表单设计成标签的形式；当用户填错信息时，利用 Javascript 和正则表达式的结合给用户一些提示信息；设计方便的日期选择组件等等。可是这些提高用户友好性的努力往往会给开发人员增加很大的工作量，并且确保这些组件的浏览器无关性也不是一件容易的事情。
有没有更简便的方法来开发 Web 表单呢？当然有！Dijit 为 Web 开发人员提供了一系列的表单 Widgets，利用这些表单 Widgets，Web 开发人员可以轻松的设计出功能强大、用户友好性高的表单。
表单 Widget 简介
可以说每一个 HTML 表单控件都可以在 Dijit 找到与其对应的表单 widgets 。下面列表列出了目前 Dijit 提供的 Form Widgets：
Form – 类似于 HTML 的 [form] 控件，同时提供了一些有用的方法和扩展点；
Button – 类似于 HTML 的 [button] 风格的控件，同时增加了一些高级的特性；
CheckBox
RadioButton
ToggleButton
ComboBox – 类似于 HTML 的 [select] 组合框和 [text] 域控件的结合体。可以像 [select] 组合框那样提供一列可选值；同时允许用户忽略这些可选值，而像在 [text] 域控件里那样输入自己想要输入的任何值；
FilteringSelect – 类似于 HTML 的 [select] 控件，可以动态填充可选项，并且可以按需设置加载选项的数量；
Textbox – 类似于 HTML 的 [text] 控件，同时提供一系列很酷的功能：可以裁空，改变大小写，设置必填，验证输入合法性，日期组件等；
Validation
Currency
Date, Time
Integer
Textarea – 类似于 HTML 的 [textarea] 控件，同时可以根据文本的容量动态调整自己的大小，达到了真正的按需分配空间；
Slider – 这个 widget 没有相对应的 HTML 控件，是一个相对独立的图形化的组件，可以通过鼠标、方向键来控制刻度尺的刻度。
NumberSpinner – 数字转轴，应用此 widget，会让数字的输入更方便，可以通过输入框右侧的上下按钮（支持键盘上下方向键）来调节数字大小。
所有的这些表单 widgets 都可以放置在 HTML 的 [form] 标签内，也可以放在 dijit.form.Form widget 内，甚至可以放在 [form] 标签外。这些表单 widgets 拥有标准的 HTML 控件的所有属性和方法，在实际开发中可以完全取代标准的 HTML 控件。同时它们都继承于 dijit.form._FormWidget，所以这些表单 widgets 还统一拥有一些附加的属性和方法。下表是它们共有的属性和方法：
表 1. dijit.form._FormWidget 属性和方法
属性 属性类别 描述
disabled Boolean 判断此 widget 是否响应用户的输入，如果为真则此 widget 不响应用户的输入。可以用方法setAttribute("disabled", true/false)来改变此属性值。
intermediateChanges Boolean 判断在调用 setValue 方法后是否立即引发 onChange 事件。
tabIndex Integer 当用户点击 tab 键在 widget 中切换时，可以通过此属性来设置 widget 获得焦点的顺序。
方法 描述
focus 在 widget 上设置 focus
getValue 获得 widget 的值
setValue 设置 widget 的值
reset 重置 widget 的值为初始值
undo 恢复 widget 的值为之前最后一次更改的值
表单 Widget 使用示例
接下来,我们将通过一个网站注册表单案例的实现来介绍表单 widget 的使用方法。此案例的场景是一个电子商务类型网站的用户注册页面。表单的设计概要需求为：
表单结构为多步骤，需要给出清晰的导航
使用进度标尺来告诉用户当前的位置和整个步骤
强调几个步骤中的逻辑联系，比如标明：第一步、第二步、第三步等
表单的布局
尽量使用对齐的字段、等长的输入框以及一致的视觉样式来减少视觉干扰
尽量控制在一屏内出现 3-6 个字段或输入框
标明选填和必填的差别
注册过程中的提示
提示信息（tips）尽量在需要帮助的地方和时间出现
填写表单时如有出错，即时显示提醒 / 警示信息，指引用户改正
尽量避免出现弹出框的警示提醒
这个注册页面设计成两步三屏组成：设置用户名和密码，填写个人资料，注册完成。这三屏由 Slider widget 作为进度标尺串联而成，下面分步介绍这些表单 widgets 。
图 1
[img]/upload/attachment/61054/a949b2f7-4a1b-3928-9ee8-fe1baa9d7ad7.jpg[/img]
在由图 1 可以看到所需要填写的域有用户名、密码、设置密码保护问题、答案等。在处理表单提交的数据时，经常会碰到非法数据，此时就需要对数据的合法性进行校验。目前主流应用都会采用服务器端验证和客户端验证相结合的方案以兼顾网站安全性和用户友好性。 Dijit 的 TextBox 家族提供了 Validation, Currency, Number, Date, Time 等 Widgets 。可以说它们是标准 text 标签的功能加强版，在方便用户输入的同时，加强了数据的合法性校验能力。
对于需要用户输入的文本域，ValidationTextBox widget 提供了强大的正则匹配功能，正好符合此需求；对于设置密码保护问题这一项，需要为用户提供备选项，同时又允许用户输入自己的希望输入的内容。本案例选择了用 ComboBox widget 来实现。所以在第一步中应用到了三类 widgets：Form widget，TextBox widget 和 ComboBox widget 。可以说这三个 widget 的用法都相对简单，下面来看一下它们用法。
首先看 Form widget 的使用方法，清单 1 是实例化 Form widget 的代码。
清单 1
Dijit 简介
从 Dojo 0.9 开始，Dojo 把 Widget 从 Dojo 的核心包中分离出来，组成 Dijit 。 Dojo 在 Dijit 中为 Widget 家族添加了多位成员，增强了 Widget 的实力的同时也加快了其在页面中的加载速度。
为改善 Widget 的外观，Dijit 提供了多套样式主题，比如默认绑定的样式主题 Tundra，提高页面可访问性的样式主题 A11y，以及其它两种可供选择的主题 Soria 和 Nihilo 。并且开发人员还可以根据自身项目的需求开发个性化的主题。同时 Dijit 对国际化和针对残障人士的可访问性的支持成度很高。可以说 Dijit 已成为 Dojo 工具包中三辆马车之一。
本文将会详细介绍 Dijit 中的 Widget 的使用。由于 Dojo Widget 数量众多，不能一一介绍。为此从功能的角度把 Widget 分为三类：表单 Widget，布局 Widget，高级 Widget 。在每个类别中选择代表性的 Widget 结合示例加以介绍。
回页首
表单 Widget 的使用
在有用户概念的 Web 应用中，注册是一项必不可少的功能，同时注册也是有点枯燥的任务。有个不争的事实就是：没人喜欢填表单——无论是网上还是网下。所以设计有效的页面表单不是件容易的事情。如果不能改变注册表单存在的事实，那么就要改变表单枯燥令人生厌的现状，让表单或整个注册过程变得轻松省力。为实现这个目标，Web 开发人员会把较长的注册表单设计成标签的形式；当用户填错信息时，利用 Javascript 和正则表达式的结合给用户一些提示信息；设计方便的日期选择组件等等。可是这些提高用户友好性的努力往往会给开发人员增加很大的工作量，并且确保这些组件的浏览器无关性也不是一件容易的事情。
有没有更简便的方法来开发 Web 表单呢？当然有！Dijit 为 Web 开发人员提供了一系列的表单 Widgets，利用这些表单 Widgets，Web 开发人员可以轻松的设计出功能强大、用户友好性高的表单。
表单 Widget 简介
可以说每一个 HTML 表单控件都可以在 Dijit 找到与其对应的表单 widgets 。下面列表列出了目前 Dijit 提供的 Form Widgets：
Form – 类似于 HTML 的 [form] 控件，同时提供了一些有用的方法和扩展点；
Button – 类似于 HTML 的 [button] 风格的控件，同时增加了一些高级的特性；
CheckBox
RadioButton
ToggleButton
ComboBox – 类似于 HTML 的 [select] 组合框和 [text] 域控件的结合体。可以像 [select] 组合框那样提供一列可选值；同时允许用户忽略这些可选值，而像在 [text] 域控件里那样输入自己想要输入的任何值；
FilteringSelect – 类似于 HTML 的 [select] 控件，可以动态填充可选项，并且可以按需设置加载选项的数量；
Textbox – 类似于 HTML 的 [text] 控件，同时提供一系列很酷的功能：可以裁空，改变大小写，设置必填，验证输入合法性，日期组件等；
Validation
Currency
Date, Time
Integer
Textarea – 类似于 HTML 的 [textarea] 控件，同时可以根据文本的容量动态调整自己的大小，达到了真正的按需分配空间；
Slider – 这个 widget 没有相对应的 HTML 控件，是一个相对独立的图形化的组件，可以通过鼠标、方向键来控制刻度尺的刻度。
NumberSpinner – 数字转轴，应用此 widget，会让数字的输入更方便，可以通过输入框右侧的上下按钮（支持键盘上下方向键）来调节数字大小。
所有的这些表单 widgets 都可以放置在 HTML 的 [form] 标签内，也可以放在 dijit.form.Form widget 内，甚至可以放在 [form] 标签外。这些表单 widgets 拥有标准的 HTML 控件的所有属性和方法，在实际开发中可以完全取代标准的 HTML 控件。同时它们都继承于 dijit.form._FormWidget，所以这些表单 widgets 还统一拥有一些附加的属性和方法。下表是它们共有的属性和方法：
表 1. dijit.form._FormWidget 属性和方法
属性 属性类别 描述
disabled Boolean 判断此 widget 是否响应用户的输入，如果为真则此 widget 不响应用户的输入。可以用方法setAttribute("disabled", true/false)来改变此属性值。
intermediateChanges Boolean 判断在调用 setValue 方法后是否立即引发 onChange 事件。
tabIndex Integer 当用户点击 tab 键在 widget 中切换时，可以通过此属性来设置 widget 获得焦点的顺序。
方法 描述
focus 在 widget 上设置 focus
getValue 获得 widget 的值
setValue 设置 widget 的值
reset 重置 widget 的值为初始值
undo 恢复 widget 的值为之前最后一次更改的值
表单 Widget 使用示例
接下来,我们将通过一个网站注册表单案例的实现来介绍表单 widget 的使用方法。此案例的场景是一个电子商务类型网站的用户注册页面。表单的设计概要需求为：
表单结构为多步骤，需要给出清晰的导航
使用进度标尺来告诉用户当前的位置和整个步骤
强调几个步骤中的逻辑联系，比如标明：第一步、第二步、第三步等
表单的布局
尽量使用对齐的字段、等长的输入框以及一致的视觉样式来减少视觉干扰
尽量控制在一屏内出现 3-6 个字段或输入框
标明选填和必填的差别
注册过程中的提示
提示信息（tips）尽量在需要帮助的地方和时间出现
填写表单时如有出错，即时显示提醒 / 警示信息，指引用户改正
尽量避免出现弹出框的警示提醒
这个注册页面设计成两步三屏组成：设置用户名和密码，填写个人资料，注册完成。这三屏由 Slider widget 作为进度标尺串联而成，下面分步介绍这些表单 widgets 。
图 1
[img]/upload/attachment/61054/a949b2f7-4a1b-3928-9ee8-fe1baa9d7ad7.jpg[/img]
在由图 1 可以看到所需要填写的域有用户名、密码、设置密码保护问题、答案等。在处理表单提交的数据时，经常会碰到非法数据，此时就需要对数据的合法性进行校验。目前主流应用都会采用服务器端验证和客户端验证相结合的方案以兼顾网站安全性和用户友好性。 Dijit 的 TextBox 家族提供了 Validation, Currency, Number, Date, Time 等 Widgets 。可以说它们是标准 text 标签的功能加强版，在方便用户输入的同时，加强了数据的合法性校验能力。
对于需要用户输入的文本域，ValidationTextBox widget 提供了强大的正则匹配功能，正好符合此需求；对于设置密码保护问题这一项，需要为用户提供备选项，同时又允许用户输入自己的希望输入的内容。本案例选择了用 ComboBox widget 来实现。所以在第一步中应用到了三类 widgets：Form widget，TextBox widget 和 ComboBox widget 。可以说这三个 widget 的用法都相对简单，下面来看一下它们用法。
首先看 Form widget 的使用方法，清单 1 是实例化 Form widget 的代码。
清单 1