WEB开发网
开发学院软件开发Java 使用 Flex 和 Dojo 开发交互式Web应用程序 阅读

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

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

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

图 4. 图片处理程序用户界面
使用 Flex 和 Dojo 开发交互式Web应用程序

加入操作支持事件响应

在实际应用系统中,人机交互是必不可少且非常重要的一部分,如何对用户触发的事件进行有效的响应是 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 } 

上一页  1 2 3 4 5 6 7 8 9 10  下一页

Tags:使用 Flex Dojo

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接