清单 7. 创建 Dojo 组件
var newEditor = dojo.widget.createWidget('Editor2');
var layoutWinEd2 = dojo.widget.createWidget("LayoutContainer",
{layoutAlign:"top"});
layoutWinEd2.addChild(newEditor);
清单 7 在布局容器中添加编辑器。为了连接邮件组件，可以包含以下代码：
FloatingPaneWidget.addChild(layoutWinEd2);
为了添加业务逻辑（用来发送电子邮件的实际代码），Dojo 允许把定制的方法与工具包提供的基本方法连接在一起。连接定制方法所用的代码如下：
dojo.event.connect(SubmitButtonId,"onClick", "codeForSendingMail");
编写处理 onclick 事件的函数，见清单 8：
清单 8. 处理事件的示例代码
function codeForSendingMail () {
alert("Special handling for onclick ...");
...Your logic goes here
}
最后，显示组件：
dojo.widget.byId('pane1').show();
为了异步地提交数据，需要使用 dojo.io 库。这个库提供一个相当简单的接口，可以通过 bind 方法异步地提交表单数据。清单 9 给出一个示例：
清单 9. 处理事件
var myform = dojo.byId("myform");
dojo.io.bind({
url: xyz.com,
/* This is not required if the form has an action element defined */
formNode: myform,
method: myform.method, /* Get or Post */
load: myCallBackFuntion,
error: function(type, error)
{
alert("Error: " + type + "n" + error);
}
});
Dojo 支持跨域通信。因为这个应用程序需要跨不同的域（应用服务器，邮件服务器）进行通信，所以需要使用 Dojo 的 XhrIframeProxy 库。在前面编写的 .js 文件中添加清单 10 中的代码。
在 Dojo 的 bind 函数中包含 dojo.io.XhrIframeProxy，这个库完成所有 Iframe 工作：
dojo.require("dojo.io.XhrIframeProxy");
清单 10. Dojo 的绑定调用
dojo.io.bind({
IframeProxyUrl: http://externalDomain/myhtml.html,
url:http://externalDomain/path/myservlet.do,
content:
{
To:toVal, From: fromVal, CC: ccVal, BCC:bccVal, Subject: subVal, Message:
messageText
},
load: showSucessMessage,
error: showErrorMessage,
method: 'POST',
mimetype: "text/html"
});
IframeProxyUrl 是外部域上 HTML 文件的位置，这个域包含一个实现授权（isAllowedRequest）功能的 .js 文件。
externalDomain 域上的 HTML 文件 myhtml.html 应该包含 .js 文件或者直接在脚本标记中实现清单 11 中的函数：
清单 11. 远程 HTML 应该包含的函数
function isAllowedRequest(request){
/*
Return true if you want to allow cross domain interaction,
else return false
*/
}
结束语
在本文中，学习了如何添加一个浮动面板（Dojo 组件），并在不修改原来的代码的情况下把它集成到主应用程序中。这种开发战略的优点包括：
不同的团队可以分别开发项目的各个独立部分，这样就可以同时开发不同的模块。这种开发方式支持开发和集成独立且可重新发布的代码。
显著降低测试和接受代码所需的工作量。测试人员只需关注要集成的新功能，而不需要重新测试整个应用程序。
可以根据业务需求进行灵活的定制。可以在任何时候添加或删除功能。
