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);
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
