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

look_w

构建基于 Flex 的图片处理应用程序本图片处理应用程序创建一个 Canvas 组件，用于显示用户在图片列表中选中的图片，对于在 Canvas 组件中显示的图片，提供图片放大缩小及图片拖拽的功能。接下来将详细介绍这个基于 Flex 图片处理应用程序的实现步骤：
创建新的 Flex 应用程序打开 Flex Builder 工具，在菜单中选择 File -> New -> Flex Project创建一个新的 Flex 工程，其他选项如下图所示：
图 2. 创建应用程序点击 Finish按钮后完成创建步骤。在 Flex Development 视图下，可以看到新建的项目结构如下所示：
图 3. Flex 应用程序文件结构其中值得注意的是建议大家在编译 Flex 项目时，将该应用程序的文件放到 bin-debug 文件夹下，作为项目开发的输出目录；当准备部署应用程序时，把部署文件生成到指定的部署目录 bin-release 中。在本交中，会将部署成功的 SWF 文件嵌入到 Web 项目中，具体做法会在 2.4 章节中详细讲述。
创建图片处理用户界面在图 3 中可以看到 src 目录下有一个 MXML 文件，这个主应用程序 MXML 包含了所有的 UI 组件和向外部暴露的接口，为了体现项目的易扩展性，可以将 Script 实现的具体功能作为一个图片处理的组件封装在一个新的 MXML 文件（ImageZoom.mxml）中，然后将这个图片处理组件绑定到主应用程序中去。
清单 1. ImageZoom.mxml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?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>

ImageZoom.mxml 组件包含一个含有脚本块的 Flex Canvas，脚本包含了图片处理功能具体的实现，一个子 Canvas 组件和 Image 组件，该 Image 组件详细定义了组件外观大小，图片信息来源和初始化函数并指定了 mouseDown, mouseMove 等事件的响应函数。
清单 2. FirstFlexProject.mxml 片段

1 2 3 4 5 6 7 8 9 10 11 12

<ImgZomm:ImageZoom id="zoomComponent" borderStyle="solid" source="{}" bottom="0" left="0" top="0" right="0" zoomIncrement="0.2" imageDoubleClickEnabled="true" mouseWheelEnabled="false" mouseFollow="true" mouseUp="showMouseEvent(event)" /> <VSlider id="brightnessValue" alpha="0" minimum="-100" maximum="100" snapInterval="1" value="0" height="120" liveDragging="true" x="7" y="96" dataTipFormatFunction="degrees_func_Brightness" buttonMode="true" useHandCursor="true"/> <Button id="zoomInButton" alpha="0" icon="@Embed('/theme/Icons_02.gif')" click="imgZoomIn(true)" top="395" height="16" width="16" toolTip="Zoom In" useHandCursor="true" buttonMode="true" left="136"/>

清单 2 列举的 FirstFlexProject.mxml 片段表明主应用程序 MXML 组件包括了一个 ImageZoom 组件来显示整个图片区域，两个 VSlider 组件用游标拖动的方式在自定义图片的对比度和明暗度，一个 HSlider 组件用游标拖动的方式对图片进行缩放处理并响应以其他方式完成的缩放图片，四个 Button 分别完成点击按钮放大缩小图片和重置功能。
这样，整个图片处理应用程序的用户界面就构建完成了，如下图所示：
图 4. 图片处理程序用户界面