使用 Flex 和 Dojo 开发交互式Web应用程序
为了达到表现层和服务器端动态交互的目的，这里所采用的方式是：由 Flex Builder 编译生成的 SWF 文件可以通过 AMF 协议方式或 XML 方式为 FlashPlayer 与服务器端提供一种高性能的访问方式；而 Dojo 则是通过 JSON-RPC 来异步调用服务器端 Java 对象。具体的实现方式会在接下来的实例中具体阐述。
点击 Finish按钮后完成创建步骤。在 Flex Development 视图下，可以看到新建的项目结构如下所示：
图 3. Flex 应用程序文件结构
其中值得注意的是建议大家在编译 Flex 项目时，将该应用程序的文件放到 bin-debug 文件夹下，作为项目开发的输出目录；当准备部署应用程序时，把部署文件生成到指定的部署目录 bin-release 中。在本交中，会将部署成功的 SWF 文件嵌入到 Web 项目中，具体做法会在 2.4 章节中详细讲述。
?
ImageZoom.mxml 组件包含一个含有脚本块的 Flex Canvas，脚本包含了图片处理功能具体的实现，一个子 Canvas 组件和 Image 组件，该 Image 组件详细定义了组件外观大小，图片信息来源和初始化函数并指定了 mouseDown, mouseMove 等事件的响应函数。
清单 2. FirstFlexProject.mxml 片段
?
清单 2 列举的 FirstFlexProject.mxml 片段表明主应用程序 MXML 组件包括了一个 ImageZoom 组件来显示整个图片区域，两个 VSlider 组件用游标拖动的方式在自定义图片的对比度和明暗度，一个 HSlider 组件用游标拖动的方式对图片进行缩放处理并响应以其他方式完成的缩放图片，四个 Button 分别完成点击按钮放大缩小图片和重置功能。
这样，整个图片处理应用程序的用户界面就构建完成了，如下图所示：
图 4. 图片处理程序用户界面
清单 6. JavaScript 中调用 Flex 程序所提供的接口
接下来的清单 8 和清单 9 举例说明了如何真正引用 Dojo 代码，从而可以直接使用 Dojo 中部分常用的对象。
清单 8. 引用 Dojo 的启动代码
?
其中 djConfig 是 Dojo 里的一个全局对象 , 其作用就是为 dojo 提供各种选项 , isDebug 是最常用的属性之一 , 设置为 True 以便能够在页面上直接看到调试输出 , 当然其中还有些属性与调试有关。
清单 9. 申明你所要用到的包
?
这里面用到了几个 toaster 的属性：
positionDirection：指定了弹出的对话框在什么位置显示。
duration：消息显示的时间，0 意味着用户必须通过点击来确认消息。
messageTopic：消息主题的标识，当页面发布这个主题的消息时，讲弹出次对话框。
步骤二：在本例中首先要和后台交互，取得返回的消息，这些都是异步进行的，首先需要指定哪些后台类能通过 JSON-RPC 的方式进行调用，配置文件代码如清单 11 所示，其中 <pojo></pojo> 指定了某一个特定可以调用的后台类，如需要调用多个不同的类，只需添加对应的 <pojo></pojo> 即可：
清单 11. 在 web-inf 中加入 RpcAdapterConfig.xml
图 6-2 .toaster 控制页面
这样，一个非常简单的 Dojo 与页面和后台交互的小例子就做完了，在实际的应用中当用户点击某一按钮的操作时，会发送请求到后台服务，根据请求的业务组装需要的结果，之后就会把相应的信息显示到页面上左下角的部分，每点击一下按钮就会增加一个对话框。
回页首
结束语
至此，通过基于 Flex 图片处理应用程序和使用 Dojo 控件这两个实例开发和集成的介绍，相信读者能充分认识到同时使用 Flex 和 Dojo 在企业内部或在 Web 上创建 RIA 程序的可行性，同时 Dojo 技术和 Flex 技术具有很强的互补性，通过讲解过程中所描述的场景，我们可以清晰的发现，在创建个性化的丰富多媒体应用程序，需要极强的交互式用户体验的时候，Flex 具有独特的优势，而在系统用户处理响应时间或性能等需要充分体现交互的实时性的领域，用 Dojo 技术来实现往往会将问题迎刃而解。
最后，我们相信同时使用 Flex 技术和 Dojo 技术，能够让企业能够创建个性化的丰富多媒体应用程序，极大地提高用户的体验，使得我们所开发的 web 客户端应用程序更加栩栩如生，彻底革新人与 Web 的交互关系。
<!-- CMA ID: 470167 --><!-- Site ID: 10 --><!-- XSLT stylesheet used to transform this file: dw-article-6.0-beta.xsl -->?