使用 Flex 和 Dojo 开发交互式 Web 应用程序（4）
|
- UID
- 1066743
|
使用 Flex 和 Dojo 开发交互式 Web 应用程序（4）
Dojo 在交互式 Web 程序中的应用在交互式 Web 应用系统中，性能是一个不可忽视的重要因素，特别是用户处理的响应时间往往更容易被关注。因此，在图片加载，文本信息更新以及和后台服务交互这些能充分体现出实时性和交互性的部分，可以选择更具优势的 Dojo 技术来实现。
本部分同样会根据一个实例来详细讲解以下三个方面的内容：如何在 Web 客户端中使用 Dojo 控件，如何在 Dojo 控件和 JSP 页面之间进行交互，如何在客户端和后台服务之间进行消息传递和函数调用。
如何使用 Dojo 控件Dojo 是一个非常强大的面向对象的 JavaScript 的工具箱，在此所下载的版本是 IBM1.2.3-20090331, 下载 dojo 的工具包，它包含有 4 个文件夹，分别是：
- dojo 提供工具包的基本功能，如 CSS 功能吨的查询，事件处理，动画，Ajax，基于类的编程和包系统；
首先将所下载的 Dojo 包引入到 Web 工程中，具体位置如下图所示：
图 5. 项目基本结构及 Dojo 包引入位置示意图 接下来的清单 8 和清单 9 举例说明了如何真正引用 Dojo 代码，从而可以直接使用 Dojo 中部分常用的对象。
清单 8. 引用 Dojo 的启动代码1
2
3
| <script type="text/javascript"
src="/dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true">
</script>
|
其中 djConfig 是 Dojo 里的一个全局对象 , 其作用就是为 dojo 提供各种选项 , isDebug 是最常用的属性之一 , 设置为 True 以便能够在页面上直接看到调试输出 , 当然其中还有些属性与调试有关。
清单 9. 申明你所要用到的包1
2
3
4
5
| <script type="text/javascript">
dojo.require("dojo.math");
dojo.require("dojo.io.*");
dojo.require("dojo.widget.*");
</script>
|
通过 Dojo 静态引用的方式，可以把这些代码当成是 Java 的 import 语句一样。如果你不 require 的话 , 而模块本身又没有整合在 dojo.js 中 , 是会出现脚本错误的。
通过上述的引用以及对常用对象的使用，基本上就能完成大部分的信息展示或异步更新的功能。
Dojo 控件与页面及后台服务的交互接下来要说明的是如何使用 Dojo 控件和 JSP 页面以及后台服务交互。假设所要实现的功能如下：在前台页面上实现一个跟后台服务的异步交互，然后在页面上弹出对话框的功能。
传统的方式需要提交 request 到后台后刷新页面，并且对话框焦点都会落在本身对话框上了，必须要先点击了对话框才能做别的操作，在本文中使用了 dojo 的 toaster 控件，它能在页面上弹出多个对话框，你还可以去做别的操作，当你点击某一个对话框时，被点击的那个会消失，并且页面不会进行刷新，增强了用户体验的多样性。
步骤一：在 JSP 页面中引用相应的包和相应的 dojo.js，申明中的第二句和第三句都是在与后台服务交互是所需要的。
清单 10. 申明并使用 toaster 控件1
2
3
4
5
6
7
8
9
10
11
12
| <script type="text/javascript">
dojo.require("dojox.widget.Toaster");
dojo.require("dojo.rpc.RpcService");
dojo.require("dojo.rpc.JsonService");
</script>
<script type="text/javascript" src="dojo.js"
djConfig="isDebug:true, parseOnLoad: true">
</script>
<div dojoType="dojox.widget.Toaster"
id="toast" positionDirection="bl-up" duration="0"
messageTopic="testMessageTopic">
</div>
|
这里面用到了几个 toaster 的属性：
positionDirection：指定了弹出的对话框在什么位置显示。
duration：消息显示的时间，0 意味着用户必须通过点击来确认消息。
messageTopic：消息主题的标识，当页面发布这个主题的消息时，讲弹出次对话框。
步骤二：在本例中首先要和后台交互，取得返回的消息，这些都是异步进行的，首先需要指定哪些后台类能通过 JSON-RPC 的方式进行调用，配置文件代码如清单 11 所示，其中 <pojo></pojo> 指定了某一个特定可以调用的后台类，如需要调用多个不同的类，只需添加对应的 <pojo></pojo> 即可：
清单 11. 在 web-inf 中加入 RpcAdapterConfig.xml1
2
3
4
5
6
7
8
9
10
11
12
| <rpcAdapter
xmlns="http://www.ibm.com/xmlns/prod/websphere/featurepack/v6.1/RpcAdapterConfig"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<default-format>xml</default-format>
<services>
<pojo>
<name>FirstService</name>
<implementation>com.mytest.dojotest.ToasterTest</implementation>
<description></description>
</pojo>
</services>
</rpcAdapter>
|
步骤三：在页面 Javascript 中完成对后台服务的调用，如清单 12 所示：
清单 12. 在页面中调用后台的 doToasterServiceTestAction 方法1
2
3
4
5
| function clickToaster（）{
var dojoService = new dojo.rpc.JsonService("<%=request.getContextPath()%>
/RPCAdapter/jsonrpc/FirstService");
dojoService.doToasterServiceTestAction().addCallback(getProcessActionResult);
}
|
清单 12 中值得注意的是：dojo.rpc.JsonService 中的内容是拿到所需要调用的后台指定类的实例（上面的 config 配置文件中 name 属性指定的 ToasterTest 类），而 doToasterServiceTestAction() 是 ToasterTest 类的成员方法，它可以写一些具体的业务需求，这个例子里面是把一条字符串（Hello, Toaster !）信息通过回调方法传给 getProcessActionResult 方法，这个方法具体用到了 dojo 的 toaster 控件。
步骤四：在 JavaScript 中调用后台所返回的处理结果，并呈现在 UI 上
清单 13. 在 getProcessActionResult 中调用 toaster 控件1
2
3
4
5
| function getProcessActionResult(result,exception){
processMessage = result;
dojo.publish("testMessageTopic",
[{ message: processMessage }]
}
|
其中 dojo.publish 方法就调用了前面讲的 toaster 控件，此时在页面上点击“Click to show message”就会调用 clickToaster 方法。如下图 6-1 左下绿色部分所示，控制的消息显示出来了，此时你如果继续点击按钮就会出现如图 6-2 的效果。
图 6-1. toaster 控制页面 图 6-2 .toaster 控制页面 这样，一个非常简单的 Dojo 与页面和后台交互的小例子就做完了，在实际的应用中当用户点击某一按钮的操作时，会发送请求到后台服务，根据请求的业务组装需要的结果，之后就会把相应的信息显示到页面上左下角的部分，每点击一下按钮就会增加一个对话框。 |
|
|
|
|
|
