添加 Dojo 组件

　　首先，需要设置 Dojo（设置方法参见 参考资料）。在设置 Dojo 之后：

　　需要创建一个 .js 文件，这个文件将包含后面编写的大多数代码。在插入所需的功能时，只需把这个 .js 包含在表示层（jsp、HTML 等等）中。

　　为了避免在表示层中包含 Dojo 库，应该在步骤 1 中创建的 .js 文件中包含它们。清单 1 给出的示例代码启用了 dojo.js 的包含：

　　清单 1. 启用 dojo.js 的包含

function addOnJsFiles(file)
{
　　var scriptTag= document.createElement('script');
　　scriptTag.src　= file;
　　scriptTag.type = 'text/javascript';
　　scriptTag.defer = true;
　　document.getElementsByTagName('head').item(0).appendChild(scriptTag);
}
/*Take special care that you have not included the dojo.js in the jsp also, as this
is known to cause problem in IE though it works fine with Firefox. If　you have
included both dojo.js and the .js file in which this function is to implemented,
you should remove inclusion of dojo.js from jsp file.*/

　　根据目录结构的不同，可能需要像清单 2 这样调用清单 1：

　　清单 2. 调用清单 1 中的功能

addOnJsFiles('js/dojo/dojo.js');　
/* Take care of the directory structure */

　　通过一个解析机制，可以找到用户在屏幕上输入的任何电子邮件地址。可以使用 JavaScript 的正则表达式完成这个任务，如清单 3 所示：

　　清单 3. 搜索所有有效的电子邮件模式

var email = /(([a-zA-Z0-9_-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+)/g

　　编写一个代码片段，把电子邮件地址包围在一个标签标记中，如清单 4 所示：

　　清单 4. 替换所有有效的电子邮件模式

var htmlContent = document.body.innerHTML;
htmlContent=htmlContent.replace(email, "<label onclick=
　　"sendmail('$1')">$1</label>");
document.body.innerHTML=htmlContent;

　　使用 sendmail 函数包含用来创建和显示 Dojo 组件的主业务逻辑和代码。根据使用的组件和 API，包含组件所需的文件。清单 5 给出一个示例：

　　清单 5. 包含必需的包

dojo.require("dojo.widget.*");
dojo.require("dojo.event.*");
dojo.require("dojo.widget.Button");
dojo.require("dojo.widget.Editor2");
dojo.require("dojo.widget.Textbox");

　　即使只需包含特定的组件库（比如 dojo.widget.Button），也必须包含 dojo.widget.* 等包。这种方式与 Java 和其他语言不一样。dojo.require 方法将动态地获取 JavaScript 代码并把它们装载到页面中。如果没有包含 dojo.widget.* 和 dojo.widget.Button，就会遇到一个运行时异常，因为还没有装载通用的组件库。

　　Dojo 提供两种创建组件的方法：

　　在构造函数中传递组件的父 id（见清单 6）。这里的 “父” 是指组件将连接的 DOM 元素。

　　清单 6. 创建 Dojo 组件

var tmpDiv = document.getElementById(divid);
var FloatingPaneWidget = dojo.widget.createWidget("FloatingPane",
　　{
　　　　id:"pane1",windowState:"minimized",
　　　　title:"Send Email", hasShadow: "true",
　　　　resizable:"true",displayMinimizeAction:"true",
　　　　toggle:"explode",constrainToContainer: "false"
　　},
　　tmpDiv);

　　以程序方式创建组件并把它们插入 DOM 结构，见清单 7：