Flash控件：翻页

PageSelector.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 verticalAlign="middle"
		 creationComplete="init()" gap="1">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>

		<s:Button verticalCenter="0" id="c_btn_firstPage" styleName="FirstPageButton" click="onFirstPage( event )"/>
		<s:Button verticalCenter="0" id="c_btn_prePage" styleName="PreviousPageButton" left="20" click="onPrevPage( event )" />
		<s:TextInput verticalCenter="0" id="c_ti_page" 
					 focusEnabled="false"
					 editable="false"
					 selectable="false"
					 width="48" 
					 restrict="0-9"
					 change="c_ti_Page_changeHandler(event)"
					 text = "1/1" textAlign="center">
		</s:TextInput>
		
		<s:Button verticalCenter="0" id="c_btn_nextPage" styleName="NextPageButton" left="115" click="onNextPage( event )"/>
		<s:Button verticalCenter="0" id="c_btn_lastPage" styleName="LastPageButton" left="134" click="onLastPage( event )"/>
	<fx:Script>
		<![CDATA[
			import spark.events.TextOperationEvent;
			/********
			 * 每页数据从服务端取 
			 * 等数据从服务端返回后dataProvider按顺序为curPage,totalPage,data 三个属性赋值即可更新
			 * 
			 * 每页数据从本地取 
			 * 设置dataProvider的data或curPage这两个属性都可以更新
			 * 
			 * @author lqk
			 * */
			
			/**********************************************数据****************************************/
			//每页显示的数目
			private var _numPerPage:uint;
			public function set numPerPage(v:uint):void
			{
				_numPerPage = v;
				if(dataProvider != null)
				{
					dataProvider.numPerPage = v;
				}
			}
			public function get numPerPage():uint
			{
				return _numPerPage;
			}
			
			//总页数
			private var _totalPage:uint = 1;
			[Bindable]
			public function get totalPage():*
			{
				return _totalPage;
			}
			public function set totalPage(v:*)
			{
				_totalPage = v;
				setPageShow(_curPage,v);
				updateControlAvailability();
			}
			//当前页数
			private var _curPage:uint = 1;
			[Bindable]
			public function get curPage():*
			{
				return _curPage;
			}
			public function set curPage(v:*):void
			{
				_curPage = uint(v);
				setPageShow(v,_totalPage);
				updateControlAvailability();
			}
			//要转到的页数
			public var toPage:uint = 1;
			
			/**********************************************输入改变页数****************************************/	
			private function init():void
			{
				c_ti_page.addEventListener(FocusEvent.FOCUS_IN,onFocusIn);
				this.addEventListener(PagerEvent.DATA_CHENGED,onDataChanged);
				if(dataProvider == null)
				{
					dataProvider = new DataForPagerLocal;
				}
			}
			//点击输入要转到页数
			private function onFocusIn(e:FocusEvent):void
			{
				c_ti_page.text = "";
				//监听点击事件，发送请求
				this.stage.addEventListener(MouseEvent.CLICK,onSend);
			}
			//转到页数
			private function onSend(e:MouseEvent):void
			{
				//点击当前输入控件不发送
				if(e.target.parent.parent == c_ti_page)
				{
					return;
				}
				//无输入不发送
				if(c_ti_page.text != "")
				{
					_onPageChanged(toPage,numPerPage);
				}
				//清除输入控件的焦点
				this.setFocus();
				//设回原页数显示
				setPageShow(_curPage,_totalPage);
				//取消点击监听
				this.stage.removeEventListener(MouseEvent.CLICK,onSend);
			}
			//改动页数时检查是否超出
			protected function c_ti_Page_changeHandler(event:TextOperationEvent):void
			{
				if(c_ti_page.text == "")
				{
					return;
				}
				
				toPage = uint(c_ti_page.text);
				toPage = limitPageBoundary(toPage);
				c_ti_page.text = String(toPage);
			}
			
			/**********************************************点击上下页****************************************/
			private function onPrevPage(e:MouseEvent):void 
			{
				if(_curPage == 1)
				{
					return;
				}
				toPage = limitPageBoundary(_curPage - 1);
				_onPageChanged(toPage,numPerPage);
			}
			private function onNextPage(e:MouseEvent):void 
			{
				if(_curPage == _totalPage)
				{
					return;
				}
				toPage = limitPageBoundary(_curPage + 1);
				_onPageChanged(toPage,numPerPage);
			}
			private function onFirstPage(e:MouseEvent):void 
			{
				if(_curPage == 1)
				{
					return;
				}
				toPage = 1;
				_onPageChanged(toPage,numPerPage);
			}
			private function onLastPage(e:MouseEvent):void 
			{
				if(_curPage == _totalPage)
				{
					return;
				}
				toPage = totalPage;
				_onPageChanged(toPage,numPerPage);
			}
			
			/**********************************************改变list****************************************/
			//页面改变函数
			private var _onPageChanged:Function = localPageChange;
			
			//数据源
			private var _dataProvider:IDataForPager;
			//显示控件,必须有dataProvider属性，如list,datagrid
			public var list:*;
			
			//local的就用默认的localPageChange翻页函数，如果使用者重新设置了翻页函数就认为是remote的。
			//这样简化了使用，可能有一定漏洞。要完善的话就是再加个type属性显示设置remote或local，用户多设置一个烦一点。
			public function set onPageChanged(f:Function):void
			{
				dataProvider = new DataForPagerRemote;
				_onPageChanged = f;
			}
			
			public function set dataProvider(dp:IDataForPager):void
			{
				_dataProvider = dp;
				_dataProvider.numPerPage = this.numPerPage;
				_dataProvider.dispatcher = this;
			}
			
			public function get dataProvider():IDataForPager
			{
				return _dataProvider;
			}
			
			//接收到_dataProvider数据改变的EVENT，由于有 _dataProvider的引用，e.data可以不包含3个数据，直接去_dataProvider取。
			private function onDataChanged(e:PagerEvent):void
			{
				list.dataProvider = e.data.data;
				totalPage = e.data.totalPage;
				curPage = e.data.curPage;
			}
			
			private function localPageChange(toPage:uint,numPerPage:uint):void
			{
				_dataProvider.numPerPage = numPerPage;
				_dataProvider.curPage = toPage;
			}
			
			
			
			/**********************************************util****************************************/
			//显示页数
			public function setPageShow(cp:uint,tp:uint):void
			{
				c_ti_page.text = String(cp) + "/" + String(tp);
			}
			
			/**
			 * Ensure the page number won't exceed the illegal boundary
			 */
			private function limitPageBoundary(pageNo:uint):uint
			{
				if ( pageNo < 1 || totalPage == 1 )
				{
					pageNo = 1;
				}
				else if ( pageNo >= totalPage )
				{
					pageNo = totalPage;
				}
				
				return pageNo;
			}
			
			public function updateControlAvailability() : void
			{
//				c_btn_firstPage.enabled = _curPage > 1;
//				c_btn_prePage.enabled = _curPage > 1;
//				c_btn_nextPage.enabled = _curPage < totalPage;
//				c_btn_lastPage.enabled = _curPage < totalPage;
			}
		]]>
	</fx:Script>
</s:HGroup>

IDataForPager.as

package com.funcity.mmo.mh.ui.controls.pageSelector
{
	import flash.events.EventDispatcher;
	
	import mx.collections.IList;

	public interface IDataForPager
	{
		function get curPage():uint;
		function set curPage(v:uint):void;
		
		function get totalPage():uint;
		function set totalPage(v:uint):void;
		
		function get data():IList;
		function set data(d:IList):void;
		
		function get numPerPage():uint;
		function set numPerPage(v:uint):void;
			
		function get dispatcher():EventDispatcher;
		function set dispatcher(v:EventDispatcher):void;
	}
}

DataForPagerRemote.as

package com.funcity.mmo.mh.ui.controls.pageSelector
{
	import flash.events.EventDispatcher;
	
	import mx.collections.IList;
	
	public class DataForPagerRemote implements IDataForPager
	{
		private var _curPage:uint = 1;
		private var _totalPage:uint = 1;
		private var _data:IList;
		private var _numPerPage:uint;
		private var _dispatcher:EventDispatcher;
		
		public function DataForPagerRemote()
		{
		}
		
		public function get curPage():uint
		{
			return _curPage;
		}
		
		public function set curPage(v:uint):void
		{
			_curPage = v;
			dataChanged();
		}
		
		public function get totalPage():uint
		{
			return _totalPage;
		}
		
		public function set totalPage(v:uint):void
		{
			_totalPage = v;
			dataChanged();
		}
		
		public function get data():IList
		{
			return _data;
		}
		
		//服务端数据回来包含curPage,data。data必须最后赋值才能保证更新。
		//这里有2种选择，1.是现在的方案，2.是增加一个接口同时设置3个值的。直接设置值的3个接口在remote中调用就抛error。
		public function set data(d:IList):void
		{
			_data = d;
			dataChanged();
		}
		
		public function get numPerPage():uint
		{
			return _numPerPage;
		}
		
		public function set numPerPage(v:uint):void
		{
			_numPerPage = v;
		}
		
		public function get dispatcher():EventDispatcher
		{
			return _dispatcher;
		}
		
		public function set dispatcher(v:EventDispatcher):void
		{
			_dispatcher = v;
		}
		
		//remote点下一页后等数据返回curPage,data，3个赋值给DataForPagerRemote后触发更新事件。
		private function dataChanged():void
		{
			if(dispatcher != null)
			{
				var data:Object = new Object();
				data.data = this.data;
				data.curPage = this.curPage;
				data.totalPage = this.totalPage;
				this.dispatcher.dispatchEvent(new PagerEvent(PagerEvent.DATA_CHENGED,data));
			}
		}
		
	}
}

DataForPagerLocal.as

package com.funcity.mmo.mh.ui.controls.pageSelector
{
	import flash.events.EventDispatcher;
	
	import mx.collections.ArrayCollection;
	import mx.collections.IList;
	
	public class DataForPagerLocal implements IDataForPager
	{
		private var _curPage:uint = 1;
		private var _totalPage:uint = 1;
		private var _data:IList;
		private var _dataList:IList;
		private var _numPerPage:uint;
		private var _dispatcher:EventDispatcher;
		
		
		
		public function DataForPagerLocal()
		{
			
		}
		
		public function get curPage():uint
		{
			return _curPage;
		}
		
		public function set curPage(v:uint):void
		{
			_curPage = v;
			dataChanged();
		}
		
		public function get totalPage():uint
		{
			return _totalPage;
		}
		
		public function set totalPage(v:uint):void
		{
			return;
		}
		
		public function get data():IList
		{
			return _dataList;
		}
		
		public function set data(d:IList):void
		{
			_data = d;
			dataChanged();
		}
		
		public function get numPerPage():uint
		{
			return _numPerPage;
		}
		
		public function set numPerPage(v:uint):void
		{
			_numPerPage = v;
		}
		
		public function get dispatcher():EventDispatcher
		{
			return _dispatcher;
		}
		
		public function set dispatcher(v:EventDispatcher):void
		{
			_dispatcher = v;
		}
		
		public function removeItemAt(index:int):Object
		{
			var si:uint = (curPage - 1) * numPerPage;
			var ri:uint = si + index;
			var ro:Object = _data.removeItemAt(ri);
			
			dataChanged();
			return ro;
		}
		
		//由于remote的是异步的，只能通过事件通知界面更新，为了接口统一把local的也改成事件机制。
		//local的翻页后更改DataForPagerLocal的curPage，触发更新事件。
		private function dataChanged():void
		{
			_totalPage = Math.ceil(_data.length / numPerPage);
			if(_totalPage < 1)
			{
				_totalPage = 1;
			}
			
			if(_curPage > _totalPage)
			{
				_curPage = _totalPage;
			}
			
			_dataList = new ArrayCollection();
			
			var si:uint = (curPage - 1) * numPerPage;
			var ei:uint = curPage * numPerPage;
			if(ei > _data.length)
			{
				ei = _data.length;
				
			}
			
			for(var i:uint = si; i != ei; i++)
			{
				_dataList.addItem(_data[i]);
			}
			
			if(dispatcher != null)
			{
				var data:Object = new Object();
				data.data = this.data;
				data.curPage = this.curPage;
				data.totalPage = this.totalPage;
				this.dispatcher.dispatchEvent(new PagerEvent(PagerEvent.DATA_CHENGED,data));
			}
		}
	}
}

PagerEvent.as

package com.funcity.mmo.mh.ui.controls.pageSelector
{
	import flash.events.Event;
	
	public class PagerEvent extends Event
	{
		public static const DATA_CHENGED:String = "DATA_CHENGED";
		
		private var _data:Object = 0;
		public function PagerEvent(type:String,data:Object = null,bubbles:Boolean=false,cancelable:Boolean=false)
		{
			super(type,bubbles,cancelable);
			_data = data;
		}
		
		public function get data():Object
		{
			return _data;
		}
	}
}

使用? remote

?? ??? ???? <pageSelector:PageSelector
?? ??? ??? ??? ?numPerPage="{UnionLogic.NUM_PER_PAGE}" 
?? ??? ??? ??? ?list="{c_list_unions}"
?? ??? ??? ??? ?onPageChanged="{outGetUnionList}"
?? ??? ??? ??? ?verticalCenter="1" id="c_psr" x="190">
?? ??? ??? ?</pageSelector:PageSelector>



//收到服务端的数据
			public function inGetUnionList(e:UnionEvent):void
			{
				c_psr.dataProvider.curPage = e.data.curPage;
				c_psr.dataProvider.totalPage = e.data.totalPage;
				c_psr.dataProvider.data = new ArrayCollection(e.data.items);
			}

使用local

		<pageSelector:PageSelector 
			id="c_ps"
			list="{c_list_mails}"
			numPerPage="{MailLogic.NUM_PER_PAGE}"
			right="45" y="423">
		</pageSelector:PageSelector>

c_ps.dataProvider.data = new ArrayCollection(MailLogic.receiveMails);