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

核心提示： ImageZoom.mxml 组件包含一个含有脚本块的 Flex Canvas，脚本包含了图片处理功能具体的实现，使用 Flex 和 Dojo 开发交互式Web应用程序(5)，一个子 Canvas 组件和 Image 组件，该 Image 组件详细定义了组件外观大小，两个 VSlider 组件用

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

清单 2. FirstFlexProject.mxml 片段

　<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 分别完成点击按钮放大缩小图片和重置功能。