使用 Flex 和 Dojo 开发交互式Web应用程序

核心提示： 其中值得注意的是建议大家在编译 Flex 项目时，将该应用程序的文件放到 bin-debug 文件夹下，使用 Flex 和 Dojo 开发交互式Web应用程序(4)，作为项目开发的输出目录；当准备部署应用程序时，把部署文件生成到指定的部署目录 bin-release 中，为了体现项目的易扩展性，

其中值得注意的是建议大家在编译 Flex 项目时，将该应用程序的文件放到 bin-debug 文件夹下，作为项目开发的输出目录；当准备部署应用程序时，把部署文件生成到指定的部署目录 bin-release 中。在本交中，会将部署成功的 SWF 文件嵌入到 Web 项目中，具体做法会在 2.4 章节中详细讲述。

创建图片处理用户界面

在图 3 中可以看到 src 目录下有一个 MXML 文件，这个主应用程序 MXML 包含了所有的 UI 组件和向外部暴露的接口，为了体现项目的易扩展性，可以将 Script 实现的具体功能作为一个图片处理的组件封装在一个新的 MXML 文件（ImageZoom.mxml）中，然后将这个图片处理组件绑定到主应用程序中去。

清单 1. ImageZoom.mxml

　<?xml　version="1.0"　encoding="utf-8"?>　
　<Canvas　
　xmlns=http://www.adobe.com/2006/mxml　xmlns:flash.filters="flash.filters.*"　
　creationComplete="onCreationComplete()"　horizontalScrollPolicy="off"　verticalScrollPolicy="off"　
　mouseWheel="onMouseWheel(event)"　>　
　<Script>　
　//　图片处理功能具体实现　
　</Script>　
　<Zoom　id="zoomEffect"　target="{image}"　duration="100"　
　zoomHeightTo="1"　zoomWidthTo="1"　effectEnd="onEffectEnd()"　
　easingFunction="{zoomEasingFunction}"/>　
　<Move　id="moveEffect"　target="{image}"　easingFunction="{moveEasingFunction}"　/>　
　<Canvas　id="maskCanvas"　backgroundColor="#FF0000"　width="100%"　height="100%"/>　
　<Image　id="image"　mask="{maskCanvas}"　source="{_source}"　height="420"　
　mouseDown="startImageDrag()"　mouseMove="undoOutside()"　complete="imageComplete()"　
　　doubleClickEnabled="true"　
　visible="{_source　!=　null　image.percentLoaded　==　100}"/>　
　</Canvas>