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

核心提示： 这样，整个图片处理应用程序的用户界面就构建完成了，使用 Flex 和 Dojo 开发交互式Web应用程序(6)，如下图所示：图 4. 图片处理程序用户界面加入操作支持事件响应在实际应用系统中，人机交互是必不可少且非常重要的一部分，支持键盘快捷键放大缩小以及点击 Flex 控件完成放大缩小，首先来

这样，整个图片处理应用程序的用户界面就构建完成了，如下图所示：

图 4. 图片处理程序用户界面

加入操作支持事件响应

在实际应用系统中，人机交互是必不可少且非常重要的一部分，如何对用户触发的事件进行有效的响应是 Flex 应该解决的重点问题之一，下面将通过一个具体功能的实现来介绍三种常见的交互模式，鼠标事件响应、键盘事件响应和控件触发事件的响应。

图片缩放功能是本图片处理应用程序的主要功能，它主要提供了三种交互模式完成图片局部放大缩小的功能，包括支持鼠标左右键单击放大缩小，支持键盘快捷键放大缩小以及点击 Flex 控件完成放大缩小。

首先来看一下在 Flex 中实现放大缩小的功能，封装在 ImageZoom.mxml 文件中，代码如下：

清单 3. Flex 中实现图片缩放功能

　1　public　function　zoom(　factor　:　Number,　isButton　:　Boolean　)　:　void　
　2　{　
　3　　if(!isAnimating　){　
　4　　　isAnimating　=　true;　
　5　　　if(zoomEffect.isPlaying　){　
　6　　　　zoomEffect.end();　
　7　　　}　
　8　　　if(factor　<=　5　&&　factor　>=　-5){　
　9　　　　　if((isButton　&&　zoomEffect.originX.toString()　==　'NaN'　
　　　　　　&&zoomEffect.originY.toString()　==　'NaN')||　flag　==　true　&&　
　　　　　　isButton){　
　10　　　　　　　zoomEffect.originX　=　image.contentWidth/2;　
　11　　　　　　　zoomEffect.originY　=　image.contentHeight/2;　
　12　　　　　}　
　13　　　　　flag　=　false;　
　14　　　　　scale_temp　=　factor;　
　15　　　　　if(scaleSize[factor+5]　>　1){　
　16　　　　　　zoomEffect.zoomHeightTo　=　Math.max(temp　+　scaleSize[factor+5],　minScale);　
　17　　　　　　zoomEffect.zoomWidthTo　=　Math.max(temp　+　scaleSize[factor+5],　minScale);　
　18　　}else　if(scaleSize[factor+5]　<　1){　
　19　　　zoomEffect.zoomHeightTo=Math.max(temp　-　temp*(1-scaleSize[factor+5]),　minScale);　
　20　　　zoomEffect.zoomWidthTo=Math.max(temp　-　temp*(1-scaleSize[factor+5]),　minScale);　
　21　　　}else{　
　22　　　　zoomEffect.zoomHeightTo　=　Math.max(temp,　minScale);　
　23　　　　zoomEffect.zoomWidthTo　=　Math.max(temp,　minScale);　
　24　　　}　
　25　　}　
　26　　　zoomEffect.play();　
　27　　　this.dispatchEvent(new　Event(EVENT_SCALE_UPDATED));　
　28　　}　
　29　}