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,totalPage,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,totalPage,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);