Flex服务端分页

Structure:
model
    event
        PaginationEvent.as
    vo
        IPageable.as
        PaginatedResults.as
view
    paginationBarImg(folder)
    PaginationBar.mxml
    PaginationImgBar.mxml


Souce code:

package model.event
{
	import flash.events.Event;
	
	public class PaginationEvent extends Event
	{
		public static var PAGE_CHANGED:String="pageChanged";
		public static var DATA_SORTED:String="dataSorted";
		public static var DATA_FILTERED:String="dataFiltered";
		
		public var searchCriteria:Object;
		public var pageNumber:int;
		public var recordsPerPage:int;
		public var sortable:Boolean = false;
		public var sortField:String = "";
		public var isAscendSort:Boolean = true;
		public var filterField:String = "";
		public var filterValue:String = "";
		
		public function PaginationEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false){
			super(type, bubbles, cancelable);
		}
		
		/**
		 * Please override the clone method if the event need to be redispatched, because
		 * when redispatching an event, a clone event will be created automatically using this method.
		 */ 
		override public function clone():Event {
			var e:PaginationEvent = new PaginationEvent(type, bubbles, cancelable);
			e.searchCriteria=searchCriteria;
			e.pageNumber = pageNumber;
			e.recordsPerPage = recordsPerPage;
			e.sortable = sortable;
			e.sortField = sortField;
			e.isAscendSort= isAscendSort;
			e.filterField = filterField;
			e.filterValue = filterValue;
			return e;
		}
		
	}

}

package model.vo
{
	public interface IPageable
	{
		function toFirstPage():void;
		function toLastPage():void;
		function toNextPage():void;
		function toPreviousPage():void;
		function toSelectedPage(selectedPage:int):void;
		function get totalPages():int;
		function get totalRecords():int;
	}
}

package model.vo
{
	import model.event.PaginationEvent;
	
	import flash.events.Event;
	import flash.events.EventDispatcher;
	
	import mx.collections.ArrayCollection;
	import mx.controls.Alert;
	
	/**
	 * Service side will return a new PaginatedResults object for each search with only setting the value of totalPages and resultSet, 
	 * so we need to reset the value of selectedPage, recordsPerPage and searchCriteria at flex side.</br>
	 * 
	 * <p>There are two classes for implementing pagination: PaginationBar.mxml and PaginatedResults, and usually you need to make two calls:</br>
	 * 1) make the initial call to set the results of the first page to your target.</br>
	 * 2) make the second call to set the results of the requested page to your target.</br>
	 * 
	 * <p>Please ensure to invoke method:resetToolBar after invoking the setter methods: selectedPage and recordsPage, 
	 * otherwise the tool bar may not update to proper status, currently resetToolBar is invoked inside PaginationBar, and you only need to remember
	 * to reset the value of other 3 required parameters mentioned above.
	 */ 
	public class PaginatedResults extends EventDispatcher implements IPageable
	{
		public static const DEFAULT_PAGE_NUMBER:int=1;
		public static const DEFAULT_PAGE_SIZE:int=10;
		public var alertCapturedErrorInfo:Boolean=false;
		
		[Transient]
		private var _searchCriteria:Object;
		
		[Transient]
		private var _selectedPage:int;
		[Transient]
		private var _totalRecords:int;
		
		private var _totalPages:int;
		
		[Transient]
		private var _recordsPerPage:int;//same meaning as pageSize
		
		[Bindable]
		[Transient]
		public var recordsPerPageComboBoxSeletedIndex:int;
		
		[Bindable]
		[Transient]
		public var selectedPageComboBoxSeletedIndex:int;
		
		[Transient]
		[Bindable]
		public var availablePageRange:ArrayCollection=new ArrayCollection();
		
		[Transient]
		[Bindable]
		public var availabeRecordsPerPageRange:ArrayCollection=new ArrayCollection([10,20,30,40,50,60,80,100,150,200,500]);
		
		public var resultSet:Object;
		
		[Bindable] public var enableToFirstPage:Boolean=false;
		[Bindable] public var enableToLastPage:Boolean=false;
		[Bindable] public var enableToNextPage:Boolean=false;
		[Bindable] public var enableToPreviousPage:Boolean=false;
		[Bindable] public var enableRecordsPerPageRange:Boolean=false;
		[Bindable] public var enableAvailablePageRange:Boolean=false;
		[Bindable] public var enableRefresh:Boolean=false;
		
		[Bindable]public var pageNumberStatus:String="0/0";
		
		
		public function PaginatedResults(recordsType:String=null){
			this._selectedPage=DEFAULT_PAGE_NUMBER;
			this._recordsPerPage=DEFAULT_PAGE_SIZE;
		}
		
		/**
		 * This function should be called after reset the value of selectedPage and recordsPerPage,
		 * Otherwise, PaginationBar may not update to the right status.
		 */ 
		public function resetToolBar():void{
			resetSelectedPageCombBoxSeletedIndex();
			resetRecordsPerPageComboBoxSeletedIndex();
			resetNavigationButton();
		}
		
		private function resetAvailablePageRange():void{
			if(this.availablePageRange==null)
				this.availablePageRange=new ArrayCollection();
			if(this._totalPages>0){
				this.availablePageRange.removeAll();
				for(var i:int=0;i<this._totalPages;i++){
					this.availablePageRange.addItem(i+1);
				}
			}
		}
		
		private function resetNavigationButton():void{
			if(this.totalPages>0){
				this.enableToFirstPage=true;
				this.enableToLastPage=true;
				this.enableAvailablePageRange=true;
				this.enableRecordsPerPageRange=true;
				this.enableRefresh=true;
			}else{
				this.enableToFirstPage=false;
				this.enableToLastPage=false;
				this.enableAvailablePageRange=false;
				this.enableRecordsPerPageRange=false;
				this.enableRefresh=false;
			}
			
			if(this._selectedPage==this.totalPages)
				this.enableToLastPage=false;
			if(this._selectedPage==1)
				this.enableToFirstPage=false;
			
			if(this._selectedPage<this.totalPages){
				this.enableToNextPage=true;
			}else{
				this.enableToNextPage=false;
			}
				
			if(this._selectedPage>=2){
				this.enableToPreviousPage=true;
			}else{
				this.enableToPreviousPage=false;
			}				
		}
				
		private function updatePageNumberStatus():void{
			this.pageNumberStatus=this._selectedPage+"/"+this._totalPages;
		}
		
		public function refresh():void{
			dispatchPaginationEvent();
		}
		
		public function toNextPage():void
		{
			if(this._selectedPage==this._totalPages){
				toLastPage();
			}else{
				toSelectedPage(this._selectedPage+1);
			}
		}
		
		public function toPreviousPage():void
		{
			if(this._selectedPage==1){
				toFirstPage();
			}else{
				toSelectedPage(this._selectedPage-1);
			}
			
		}
		
		public function toFirstPage():void
		{
			toSelectedPage(1);
			
		}
		
		public function toLastPage():void
		{
			toSelectedPage(this._totalPages);
			
		}
		
		public function toSelectedPage(selectedPage:int):void{
			this._selectedPage=selectedPage;
			dispatchPaginationEvent();
		}
		
		/**
		 * Please set value to recordsPerPage manually, because server don't return recordsPerPage to flex though flex will send recordsPerPage to server.
		 */ 
		public function set recordsPerPage(recordsPerPage:int):void{
			this._recordsPerPage=recordsPerPage;
		}
		
		/**
		 * each time server will return us a new PaginatedResults object, which will result in the default index to be set in PaginationBar's UIComponent,
		 * so we need to manually update UIComponent's selectedIndex to the proper value.
		 */ 
		private function resetRecordsPerPageComboBoxSeletedIndex():void{
			var index:int=this.availabeRecordsPerPageRange.getItemIndex(this._recordsPerPage);
			if(index!=-1){
				this.recordsPerPageComboBoxSeletedIndex=index;
			}else{
				this.recordsPerPageComboBoxSeletedIndex=0;
			}
		}
		
		private function resetSelectedPageCombBoxSeletedIndex():void{
			var index:int=this.availablePageRange.getItemIndex(this._selectedPage);
			if(index!=-1){
				this.selectedPageComboBoxSeletedIndex=index;
			}else{
				this.selectedPageComboBoxSeletedIndex=0;
			}
		}
		
		public function get recordsPerPage():int{
			return this._recordsPerPage;
		}
		
		/**
		 * Change UIComponent directly, no new PaginatedResults object has been set to PaginatinoBar, so don't need to manually update the selectedIndex.
		 */ 
		public function resetRecordsPerPage(recordsPerPage:int):void{
			this._recordsPerPage=recordsPerPage;//Don't use setter method:this.recordsPerPage, otherwise may cause infinite loop value set
			this._selectedPage=1;
			dispatchPaginationEvent();	
		}
		
		private function dispatchPaginationEvent():void{
			try{
				if(this._searchCriteria!=null){
					var newEvent:PaginationEvent=new PaginationEvent(PaginationEvent.PAGE_CHANGED);
					newEvent.pageNumber=this._selectedPage;
					newEvent.recordsPerPage=this._recordsPerPage;
					newEvent.searchCriteria=this._searchCriteria;
					this.dispatchEvent(newEvent);
				}else{
					Alert.show("SearchCriteria is null.","Message");
				}
			}catch(error:Error){
				if(alertCapturedErrorInfo){
					Alert.show("PaginatedResults->dispatchPaginationEvent error:"+error.message,"Error");
				}
			}
		}
		
		[Bindable]
		public function get totalPages():int
		{
			return this._totalPages;
		}
		
		public function set totalPages(totalPages:int):void
		{
			this._totalPages=totalPages;
			resetAvailablePageRange();
			updatePageNumberStatus();
		}
		
		[Bindable]
		public function get totalRecords():int
		{
			return this._totalRecords;
		}
		
		public function set totalRecords(totalRecords:int):void
		{
			this._totalRecords=totalRecords;
		}
		
		[Bindable]
		public function get selectedPage():int
		{
			return this._selectedPage;
		}
		
		/**
		 * Please set value to selectedPage manually, because server don't return selectedPage to flex though flex will send selectedPage to server.
		 */ 
		public function set selectedPage(selectedPage:int):void
		{
			this._selectedPage=selectedPage;
			updatePageNumberStatus();
		}
		
		/**
		 * Please set value to searchCriteria manually, because server don't return searchCriteria to flex though flex will send searchCriteria to server.
		 */ 
		public function set searchCriteria(searchCriteria:Object):void{
			this._searchCriteria=searchCriteria;
		}
		
		public function get searchCriteria():Object{
			return this._searchCriteria;
		}
		
		override public function toString():String{
			return "PaginatedResults["
				+"selectedPage:"+this._selectedPage
				+",recordsPerPage:"+this._recordsPerPage
				+",totalPages:"+this._totalPages
				+",totalRecords:"+this._totalRecords
				+",searchCriteria:"+this._searchCriteria
				+"]"
				+"\n"+super.toString();
		}
	}
}

PaginationBar.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle" horizontalAlign="left" initialize="init()">
	<mx:Metadata>
		[Event(name="pageChanged", type="model.event.PaginationEvent")]
		[Event(name="dataSorted", type="model.event.PaginationEvent")]
		[Event(name="dataFiltered", type="model.event.PaginationEvent")]
	</mx:Metadata>
	<mx:Script>
		<![CDATA[
			import model.event.PaginationEvent;
			import model.vo.PaginatedResults;
			
			import mx.controls.Alert;
			
			[Bindable]
			private var _paginatedResults:PaginatedResults;

			protected function init():void{
				_paginatedResults=new PaginatedResults();
			}
			
			public function set paginatedResults(value:PaginatedResults):void{
				if(value!=null){
					this._paginatedResults=value;
					this._paginatedResults.resetToolBar();				
					registerEventListener(this._paginatedResults);
				}
			}
					
			public function get paginatedResults():PaginatedResults{
				return this._paginatedResults;
			}
			
			private function registerEventListener(obj:PaginatedResults):void{
				if(!obj.hasEventListener(PaginationEvent.PAGE_CHANGED)){
					obj.addEventListener(PaginationEvent.PAGE_CHANGED,propagateEvent);
				}
				if(!obj.hasEventListener(PaginationEvent.DATA_FILTERED)){
					obj.addEventListener(PaginationEvent.DATA_FILTERED,propagateEvent);
				}
				if(!obj.hasEventListener(PaginationEvent.DATA_SORTED)){
					obj.addEventListener(PaginationEvent.DATA_SORTED,propagateEvent);
				}			
			}
			
			private function propagateEvent(e:PaginationEvent):void{
				//a clone event will be created automatically by using the clone method of class PaginationEvent
				this.dispatchEvent(e);
			}
			
		]]>
	</mx:Script>
	<mx:HBox paddingBottom="2">
		<mx:LinkButton width="36" label="First" click="_paginatedResults.toFirstPage()"
					   enabled="{_paginatedResults.enableToFirstPage}" styleName="PaginationLinkButton"/>
		<!--<mx:Image source="Embed(source='assets/customImg/pagingImg/page-first.gif')"/>-->
		<mx:LinkButton width="65" label="Previous" click="_paginatedResults.toPreviousPage()"
					   enabled="{_paginatedResults.enableToPreviousPage}"
					   styleName="PaginationLinkButton"/>
		<mx:LinkButton width="37" label="Next" click="_paginatedResults.toNextPage()"
					   enabled="{_paginatedResults.enableToNextPage}" styleName="PaginationLinkButton"/>
		<mx:LinkButton width="38" label="Last" click="_paginatedResults.toLastPage()"
					   enabled="{_paginatedResults.enableToLastPage}" styleName="PaginationLinkButton"/>
	</mx:HBox>
	<mx:Spacer width="5"/>
	<mx:Label text="Go to Page:" styleName="PaginationText"/>
	<mx:ComboBox id="cmbSelectedPage" height="20" dataProvider="{_paginatedResults.availablePageRange}" width="65" 
				 selectedIndex="{_paginatedResults.selectedPageComboBoxSeletedIndex}"
				 enabled="{_paginatedResults.enableAvailablePageRange}" change="_paginatedResults.toSelectedPage(int(cmbSelectedPage.text))"/>
<!--	<mx:LinkButton label="Go" click="_paginatedResults.toSelectedPage(int(cmbSelectedPage.text))" 
				   styleName="PaginationLinkButton" enabled="{_paginatedResults.enableAvailablePageRange}"/>
	<mx:Spacer width="10"/>-->
	<!--<mx:LinkButton label="Refresh" click="_paginatedResults.refresh()" styleName="PaginationLinkButton" enabled="{_paginatedResults.enableRefresh}"/>-->
	<mx:Spacer width="5"/>
	<mx:HBox verticalAlign="middle">
		<mx:Label text="CurrentPage/TotalPages:" styleName="PaginationText"/>
		<mx:Label text="{_paginatedResults.pageNumberStatus}" styleName="PaginationText" id="txtCurrentPage"/>
<!--		<mx:Label text="TotalPages:" styleName="PaginationText"/>
		<mx:Label text="{_paginatedResults.totalPages}" styleName="PaginationText" id="txtTotalPages"/>-->
	</mx:HBox>
	<mx:Spacer width="5"/>
	<mx:Label text="Records Per Page:" styleName="PaginationText"/>
	<mx:ComboBox id="cmbRecordsPerPage" width="65" height="20"
				 dataProvider="{_paginatedResults.availabeRecordsPerPageRange}" 
				 selectedIndex="{_paginatedResults.recordsPerPageComboBoxSeletedIndex}"
				 enabled="{_paginatedResults.enableRecordsPerPageRange}" change="_paginatedResults.resetRecordsPerPage(int(cmbRecordsPerPage.text))"/>
<!--	<mx:LinkButton label="Apply" click="_paginatedResults.resetRecordsPerPage(int(cmbRecordsPerPage.text))" 
				   styleName="PaginationLinkButton" enabled="{_paginatedResults.enableRecordsPerPageRange}"/>-->
</mx:HBox>

PaginationImgBar

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
		 width="100%" verticalAlign="middle">
	<mx:Script>
		<![CDATA[
			[Embed(source="paginationBarImg/arrow_refresh.png")]
			[Bindable] public var arrowRefresh:Class;
			
			[Embed(source="paginationBarImg/arrow_left.png")]
			[Bindable] public var arrowLeftIcon:Class;
			
			[Embed(source="paginationBarImg/arrow_right.png")]
			[Bindable] public var arrowRightIcon:Class;
			
			[Embed(source="paginationBarImg/arrow_double_left.png")]
			[Bindable] public var arrowDoubleLeftIcon:Class;
			
			[Embed(source="paginationBarImg/arrow_double_right.png")]
			[Bindable] public var arrowDoubleRightIcon:Class;
		]]>
	</mx:Script>
	
	<mx:Image source="{arrowDoubleLeftIcon}"/>
	<mx:Image source="{arrowLeftIcon}"/>
	<mx:TextInput id="pageInput" width="30" height="20"/>
	<mx:Label text="TotalPages:"/>
	<mx:Image source="{arrowRightIcon}"/>
	<mx:Image source="{arrowDoubleRightIcon}"/>
	<mx:Image source="{arrowRefresh}"/>
</mx:HBox>