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

look_w

加入操作支持事件响应在实际应用系统中，人机交互是必不可少且非常重要的一部分，如何对用户触发的事件进行有效的响应是 Flex 应该解决的重点问题之一，下面将通过一个具体功能的实现来介绍三种常见的交互模式，鼠标事件响应、键盘事件响应和控件触发事件的响应。
图片缩放功能是本图片处理应用程序的主要功能，它主要提供了三种交互模式完成图片局部放大缩小的功能，包括支持鼠标左右键单击放大缩小，支持键盘快捷键放大缩小以及点击 Flex 控件完成放大缩小。
首先来看一下在 Flex 中实现放大缩小的功能，封装在 ImageZoom.mxml 文件中，代码如下：
清单 3. Flex 中实现图片缩放功能

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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  }

这段代码有几个要点，第一，会根据 isButton 参数和 zoomEffect.originX 的值来判断图片放大缩小的焦点位置，如果满足如第 9 行 code 所列举的条件则按照图片中心位置进行缩放，否则按照鼠标点击位置进行缩放；第二，图片缩放的倍数值事先配置到数组 scaleSize[] 中，然后会根据 factor 参数指定具体的缩放倍数。
为了提高应用程序和用户的交互性，势必需要满足客户的如下要求：

• 鼠标左键点击图片放大，右键点击图片缩小

• 鼠标左键点击保持时可拖拽图片

为了实现这样的功能，需要克服两个障碍：第一，屏蔽 Flex 右键菜单并捕获鼠标右键点击事件；第二，区分图片拖拽和图片缩放功能。为此，将采用的解决办法如下：

• 在 Flex 应用程序中定义一个接口函数接收用户右键点击事件，并用 mouseUp 处理函数实现这个鼠标事件函数；另一方面，在 JSP 代码中阻止鼠标右键事件向下传递并调用 Flex 外部函数。

至此，一个简单的 Flex 应用程序就构建完毕了，接下来可以将这个 Flex 应用程序集成到 Web 项目中。
如何与 Web 项目的集成首先，在 Flex Builder 中通过选择 Project -> Export Release Build来生成图片处理程序的 SWF 部署文件。接下来讲解如何将这个 SWF 文件与 Web 项目集成，并在 JSP 中调用 Flex 程序所提供的功能，具体的事例如下：
在某些具体的应用场景中，可能需要针对一组图片列表中的某张图片提供图片处理的功能，这样就存在一个问题，如何将图片应用到基于 Flex 的图片处理程序中去。
在这里，所采用的处理方式如下：将图片作为输入源，通过调用图片处理程序向外暴露的接口，以参数传递的方式将图片文件应用到 Flex 程序中，这就需要从两方面着手工作：
一方面，需要在 Flex 应用程序中利用外部接口注册一个函数，作为接收 JSP 中图片选择事件的一个入口，具体实现代码如下：
清单 4. FirstFlexProject.mxml 中显示所选图片功能实现

1 2 3 4 5 6 7 8 9 10

ExternalInterface.addCallback(“getValue”, getImgValue); private function getImgValue(imgURL:String):Boolean { var returnMsg:Boolean; if(zoomComponent.image.source != imgURL) { zoomComponent.image.load(imgURL); application.setFocus(); } return returnMsg; }

清单 4 分为两部分，第一行是利用外部接口方式注册了一个函数，提供给 JSP 去调用；后面的 getImgValue() 方法则是通过调用 SWFLoader.as 文件中 load 方法的方式从文件目录中加载图片信息。
另一方面，需要在 JSP 中调用所开发的 Flex 应用程序以及其向外暴露的接口。清单 5 说明了如何在 JSP 中定义 Flex 应用程序实例，值得注意的是使用 src 属性指定所调用的 Flex 应用程序，使用 id 属性将实例的 ID 传给 Flex 应用程序。还应该注意到 wmode 这个属性，它的默认值是 Window，表明 Flash 应用程序与 HTML 层没有任何的交互，并且始终位于最顶层，而在应用中实现了 Flash 上添加浮层，所以将此属性值改为 Opaque。清单 6 简单说明了如何调用 Flex 中所实现的“显示所选图片”功能的接口。
清单 5. JSP 中定义 Flex 程序实例

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

<td colspan="4" valign="top" id="imgFlex" onmouseup="whichElement(event)"> <script language="JavaScript" type="text/javascript"> AC_FL_RunContent( "src","<%=request.getContextPath()%>/theme/FirstFlexProject", "width", "100%", "height", "420","align", "middle", "id", "ImageObj", "quality", "high", "name", "ImageObj", "wmode", "opaque", "allowScriptAccess","sameDomain", "type", "application/x-shockwave-flash" "pluginspage", "http://www.adobe.com/go/getflashplayer" ); </script> </td>

清单 6. JavaScript 中调用 Flex 程序所提供的接口

1 2 3 4 5

function SendImg(value) { if(value !=""){ dojo.byId('ImageObj').getValue(value); } }

通过上述的几段代码的定义和调用，就能实现从 JSP 页面调用 Flex 程序提供的功能，从而将图片应用到基于 Flex 的图片处理程序中。