`
darrenzhu
  • 浏览: 804928 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

flex等待服务器数据返回期间显示的纺纱机动画

阅读更多
Spinner class
package util
{
	import flash.events.Event;
	import flash.geom.Point;
	
	import mx.controls.SWFLoader;
	import mx.core.FlexGlobals;
	import mx.core.UIComponent;
	import mx.events.ResizeEvent;
	import mx.managers.PopUpManager;
	
	import spark.components.Application;
	import spark.components.SkinnableContainer;
	

	public class Spinner extends SkinnableContainer
	{
		private var _spinnerSWF:SWFLoader;
		private var _target:UIComponent;
		/**
		 * if true indicate the target is in a popup window, otherwise not.
		 */ 
		private var isTargetPopUp:Boolean;
		/**
		 * if user send another request before the first rquest complete, and both of them are spinning the same target,
		 * for the second request we will not use a new spinner, but only increase the counter of the spinner, when request finished, we will check the counter, if counter is not
		 * 0, which means another request has not been finished yet, in this case the spinner is not hidden, we only decrease the counter, 
		 * only all requests having spinner on the same target are finished, the spinner will be hidden.  
		 */ 
		public var counter:int=0;
		
		public function Spinner()
		{
			this.setStyle("backgroundColor","0xfafafc");
			this.alpha=0.5;		
			_spinnerSWF=new SpinnerSWF();
			_spinnerSWF.width=0;
			_spinnerSWF.height=0;	
			width=0;
			height=0;
			x=-10;
			y=-10;
			addElement(_spinnerSWF);
		}
		
		private function measurePosition():void{
			if(!_target){
				throw new Error("Target cannot be null");
			}
			if(_target.parent){
				var globalPosition:Point=_target.parent.localToGlobal(new Point(_target.x,_target.y));
				move(globalPosition.x,globalPosition.y);
			}
		}
		
		/**
		 * Make sure this method is invoked after measureSize()
		 */ 
		private function measureSpinnerSWFSize():void{
			var min:int = _target.width < _target.height? _target.width: _target.height;
			if( min> 0 && min<70 ){
				_spinnerSWF.width = min;
				_spinnerSWF.height = min;
			}else{
				_spinnerSWF.width = 70;
				_spinnerSWF.height = 70;
			}
		}
		
		private function measureSpinnerSWFPosition():void{
			_spinnerSWF.x = (_target.width - _spinnerSWF.width)/2;
			_spinnerSWF.y = (_target.height - _spinnerSWF.height)/2;
		}
		
		private function measureSize():void{
			width=_target.width;
			height=_target.height;
		}
		
		public function showSpinner(trgt:UIComponent):void{
			if(!trgt){
				throw new Error("Target cannot be null");
			}		
			_target=trgt;
					
			measureSize();
			measurePosition();
			measureSpinnerSWFSize();
			measureSpinnerSWFPosition();
			
			//why we add movement listeners to target.parentDocument if target is in a popup window, because "xChanged" and "yChanged" event is not
			//triggered on the target, only triggered on target.parentDocument when we move the popup window.
			//why we don't care whether target itself is a popup window, because if the target itself is a popup window, user
			//actually is not able to move the target, so we don't care
			if(_target.parentDocument!=null && (_target.parentDocument as UIComponent).isPopUp){
				isTargetPopUp=true;
			}else{
				isTargetPopUp=false;
			}
			if(isTargetPopUp){
				_target.parentDocument.addEventListener(ResizeEvent.RESIZE,targetResizeHandler);
				_target.parentDocument.addEventListener("xChanged",targetXChangedHandler);
				_target.parentDocument.addEventListener("yChanged",targetYChangedHandler);
				PopUpManager.addPopUp(this,_target,false);
			}else{
				_target.addEventListener(ResizeEvent.RESIZE,targetResizeHandler);
				_target.addEventListener("xChanged",targetXChangedHandler);
				_target.addEventListener("yChanged",targetYChangedHandler);
				(FlexGlobals.topLevelApplication as SkinnableContainer).addElement(this);
			}
		}
		
		private function targetXChangedHandler(e:Event):void{
			measurePosition();
			measureSpinnerSWFPosition();
		}
		
		private function targetYChangedHandler(e:Event):void{
			measurePosition();
			measureSpinnerSWFPosition();
		}
		
		private function targetResizeHandler(event:ResizeEvent):void{
			measureSize();
			measurePosition();
			measureSpinnerSWFSize();
			measureSpinnerSWFPosition();
		}
		
		public function hideSpinner():void{
			if(_spinnerSWF){
				_spinnerSWF.width=0;
				_spinnerSWF.height=0;
			}
			width=0;
			height=0;
			x=-10;
			y=-10;
			removeListeners();
			removeSpinner();
			
		}
		
		private function removeSpinner():void{
			if(isTargetPopUp){
				PopUpManager.removePopUp(this);
			}else{
				(FlexGlobals.topLevelApplication as SkinnableContainer).removeElement(this);
			}
		}
		
		public function destroySpinner():void{
			removeListeners();
			removeElement(_spinnerSWF);
			_spinnerSWF=null;
			removeSpinner();
		}
		
		private function removeListeners():void{
			if(_target.hasEventListener(ResizeEvent.RESIZE))
				_target.removeEventListener(ResizeEvent.RESIZE,targetResizeHandler);
			if(_target.hasEventListener("xChanged"))
				_target.removeEventListener("xChanged",targetResizeHandler);
			if(_target.hasEventListener("yChanged"))
				_target.removeEventListener("yChanged",targetYChangedHandler);
		}
	}
}


SpinnerFactory class
package util
{
	import flash.utils.Dictionary;
	
	import mx.collections.ArrayCollection;
	import mx.core.UIComponent;

	public class SpinnerFactory
	{
		private static var _instance:SpinnerFactory;
		private var _targetsHasSpinner:Dictionary;
		private var _spinnerPool:ArrayCollection;
		
		public function SpinnerFactory()
		{
			if(_instance){
				throw new Error("SpinnerFactory singleton instance has already constructed");
			}
			_targetsHasSpinner=new Dictionary();
			initSpinnerPool();
		}
		
		private function initSpinnerPool():void{
			_spinnerPool=new ArrayCollection();
			for(var i:int=0;i<5;i++){
				_spinnerPool.addItem(new Spinner());
			}
		}
		
		private function ensureCapacity():void{
			for(var i:int=0;i<5;i++){
				_spinnerPool.addItem(new Spinner());
			}
		}
		
		public static function getInstance():SpinnerFactory{
			if(!_instance){
				_instance=new SpinnerFactory();
			}
			return _instance;
		}
		
		public function spinOneTarget(target:UIComponent):void{
			if(target==null){
				return;
			}
			var spinner:Spinner=_targetsHasSpinner[target];
			if(spinner!=null){
				spinner.counter++;
				return;
			}
			if(_spinnerPool.length>0){
				spinner=_spinnerPool.getItemAt(0) as Spinner;
			}else{
				ensureCapacity();
				spinner=_spinnerPool.getItemAt(0) as Spinner;
			}
			if(spinner){
				_spinnerPool.removeItemAt(0);
				_targetsHasSpinner[target]=spinner;
				spinner.showSpinner(target);
			}
		}
		
		/**
		 * spin multiple UIComponents
		 */ 
		public function spinTargets(targets:Array):void{
			if(targets==null||targets.length==0)
				return;
			for each(var item:Object in targets){
				if(item!=null)
					spinOneTarget(item as UIComponent);
			}
			
		}
		
		public function unspinOneTarget(target:UIComponent):void{
			if(target==null){
				return;
			}
			var spinner:Spinner = _targetsHasSpinner[target];
			if(spinner!=null){
				if(spinner.counter!=0){
					spinner.counter--;
				}else{
					spinner.hideSpinner();
					_targetsHasSpinner[target]=null;
					_spinnerPool.addItem(spinner);
				}
			}
		}
		
		/**
		 * unspin multiple UIComponents
		 */ 
		public function unspinTargets(targets:Array):void{
			if(targets==null||targets.length==0)
				return;
			for each(var item:Object in targets){
				if(item!=null)
					unspinOneTarget(item as UIComponent);
			}
		}
	}
}


swf
<s:SWFLoader xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 width="100" height="100"  source="@Embed(source='assets/loading.swf')">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:SWFLoader>
分享到:
评论

相关推荐

    flex 等待界面显示

    在Flex应用中,我们经常需要实现“等待界面显示”功能,以提供用户友好的体验,尤其是在进行耗时操作如数据加载、网络请求或计算时。这种等待界面通常被称为加载指示器或进度条,它能告知用户应用程序正在运行,并且...

    flex显示数据库数据

    7. 运行与测试:部署项目到Tomcat服务器,启动Flex客户端,查看DataGrid是否正确显示数据库数据。 以上就是Flex 4结合Myeclipse 9.0、MySQL数据库、Tomcat和BlazeDS实现从数据库获取数据并在DataGrid组件中显示的...

    AMF抓取flex页面数据

    例如,使用编程语言(如Python、Java)编写脚本,构造AMF消息并发送到服务器,然后解析返回的数据。 6. **Flex数据解码** - 对于AMF数据的解码,开发者可以使用开源库,如Python的pyamf或Java的BlazeDS,它们提供...

    Flex与服务器端通信

    - **服务接口实现**:C#源码会包含处理AMF请求的接口或类,这些接口对应Flex客户端的调用,处理接收到的数据,并返回结果。 - **数据模型**:为了与Flex客户端共享数据,C#服务器端需要定义与Flex端AMF对象相匹配...

    Flex等待鼠标的图标

    在Flex中,我们可以通过编程来改变鼠标的外观,例如在特定操作期间显示等待图标。 cursor.swf是一个SWF文件,它是Adobe Flash创作的动画或交互式内容的文件格式。SWF是用于网络上的多媒体内容,如动画、游戏、视频...

    Flex和服务器端数据通信

    2. **数据结果处理**:当服务器返回响应时,Flex中的`result`事件被触发,`doResult()`函数被调用。在这个函数中,可以通过`req.lastResult`获取服务器返回的XML数据,并进行解析和展示。如果发生错误,`fault`事件...

    利用FLEX技术建立服务器关系图

    3. **FLEX前端开发**:使用FLEX SDK和ActionScript编写前端代码,从ASP.NET返回的XML数据流中读取服务器关系数据,并使用FLEX提供的图形绘制工具将其可视化。此外,还需要设计一套用户友好的交互方式,以便用户能够...

    flex与PHP数据交互教程

    - 处理返回数据:Flex客户端接收到服务器响应后,解析数据并更新UI。 6. **安全性与优化** - 安全性:确保Flex与PHP之间的通信是安全的,可以使用HTTPS加密传输,同时对服务器端的API进行访问控制和身份验证。 -...

    动画颜色flex源码

    动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色...

    FLEX自定义等待图标资源

    FLEX的用户界面通常包含丰富的交互元素,而等待图标则是这些元素中的一种,用于指示程序正在进行后台处理或加载数据。在某些情况下,开发者可能需要自定义等待图标以符合特定的品牌风格或者提供更友好的用户体验。 ...

    Flex动画效果教程

    Flex动画效果教程主要聚焦于如何在Flex开发环境中创建引人入胜的动态视觉体验。Flex是一种基于ActionScript和MXML的开源框架,主要用于构建富互联网应用程序(RIA)。它提供了丰富的图形库和强大的动画功能,使得...

    Flex 预加载动画demo

    在Flex中,预加载器通常用来显示加载进度,同时隐藏可能由于大文件加载而产生的长时间等待。预加载动画可以是简单的进度条,也可以是更复杂的视觉效果,目的是提供一种反馈,让用户知道程序正在运行并接近完成。 ...

    flex数据交互_方式

    在探讨“flex数据交互方式”这一主题时,我们首先需要理解Flex是什么以及它在数据交互中的角色。Flex是一种用于构建和部署丰富的互联网应用程序(RIA)的开源框架,由Adobe Systems开发并维护。它使用MXML(标记语言...

    使用 Flex 4.5 访问数据

    Flex 应用程序将界面编译成 SWF 文件,这些文件可以直接在客户端运行,无需刷新页面即可与服务器进行数据交互。这一点与传统的 JSP、ASP、PHP 或 CFML 技术不同,在那些技术中,整个页面会被重新生成并返回到浏览器...

    flex数据推送.pdf

    flex数据推送. 与后台服务器的端 基于java as

    flex4与后台数据进行交互

    这是一个关于flex4与后台数据进行交互的内容,个人感觉还不错的。

    flex4Tree组件分层显示数据示例

    在这个“flex4Tree组件分层显示数据示例”中,我们将深入探讨如何在Flex4应用程序中使用Tree组件来有效地呈现层次数据。 首先,Tree组件的基础在于XML数据源。在Flex4中,我们可以使用ArrayCollection或...

    Flex 布局变化时的动画效果解析 简单版

    这篇博客“Flex布局变化时的动画效果解析 简单版”可能是作者对如何在Flex布局中实现动态变换的一种简明介绍。 首先,我们需要理解Flex布局的基础概念。在Flex布局中,容器被设置为`display: flex`,它的子元素称为...

    Flex与java交换数据 Flex数据交换 Flex与java交换数据教程

    Flex数据交换的基础是AMF(Action Message Format),它是一种二进制的消息格式,由Adobe设计用于提高Flex与服务器之间的数据传输效率。AMF不仅压缩数据,还支持序列化,使得对象能在客户端和服务器之间直接传递,...

Global site tag (gtag.js) - Google Analytics