0. 为外层容器的creationComplete指定获取数据的方法
creationComplete="getInfo (1)"//1是当前页
1. 获取数据的方法
<fx:Script> <![CDATA[
import com.adobe.cairngorm.CairngormUtil; import fx.model.ModelConfig; import mx.collections.ArrayCollection; import mx.controls.Alert; private var selectedPaperids:ArrayCollection = new ArrayCollection(); //ModelConfig存储全局配置信息，getOne()以单例的方式返回一个对象注意ModelConfig要声明[Bindable]
[Bindable] public var model:ModelConfig=ModelConfig.getOne();
/** * 页面初始化函数 * 设置查询条件值 * 设置pagingbar **/ public function getInfo (page:int):void{ //参数处理：包括查询约束条件、分页信息 var params:Object={paperName:paperName.text ,source:source.text ,currentPage:page ,pageSize:10 ,pageNumShow:10 ,eventName:"TestCD" ,pagingbar:pagingBar }; //调用事件处理类 CairngormUtil.event("TestCD",params); }
]]> </fx:Script>
2. 数据显示界面调用分页组件
<paging:PagingBar id="pagingBar"></paging:PagingBar>
3.TestCD.as
-------------------------------------------------------------------
package fx.commands { import com.adobe.cairngorm.BaseCommand; import com.adobe.cairngorm.CairngormUtil; import com.adobe.cairngorm.control.CairngormEvent; import com.adobe.serialization.json.JSON; import flash.events.MouseEvent; import fx.model.ModelConfig; import fx.util.PagingBar; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.controls.Button; import mx.formatters.DateFormatter; public class TestCD extends BaseCommand { public var model:ModelConfig=ModelConfig.getOne(); public var pbar:PagingBar=new PagingBar(); public function TestCD() { //TODO: implement function super(); } /** * 获取查询约束条件查询已做试卷 **/ override public function execute(event:CairngormEvent):void{ //查询界面传来的参数 var data:Object=event.data;
//设置pbar 对应getInfo(1) 中的pagingbar:pagingBar pbar = data.pagingbar;
this.showBusy(); var url:String = model.urlRemoteWebServer+"/testAction.action"; //存储查询条件 model.testPageBar.params={paperName:data.paperName,source:data.source,currentPage:data.currentPage,pageSize:data.pageSize,pageNumShow:data.pageNumShow,eventName:data.eventName,pagingbar:data.pagingbar}; var params:Object={userid:model.uservo.getUserid(),papername:data.paperName,source:data.source,currentPage:data.currentPage,pageSize:data.pageSize}; //发送请求到远程服务器端获取信息 CairngormUtil.send(url ,this ,params); } override public function result(data:Object):void{ var json_str:String = data.result as String; //trace(json_str);
//服务器端的返回结果是json的形式 var result_str:Object= JSON.decode(json_str);
//返回的json串自己设定了一个标识，标识服务器端操作是否成功。根据自己定义的情况定 if(result_str.status=="200"){ //设置界面上要展示的已做试卷数据 getData(result_str.context[0].infos); pbar.pageBar=model.testPageBar;//设置对应分页信息来自testPageBar //获取到返回数据后，设置分页基本信息 model.testPageBar.initPageBar(result_str.context[0].totalSize,model.testPageBar.pageSize,result_str.context[0].currentPage,model.testPageBar.params.pageNumShow,model.testPageBar.params.eventName); //view.delayView.addElement( new DelayView() ); }else{ } this.closeBusy(); } /** * 填充数据到ArrayCollection **/ public function getData(data:Object):void{ //清空数据 model.testPageBar.clearOrgData();
for(var i:int=0;i<data.length;i++){ var testData:Object={id:data[i].id,paperId:data[i].paperId,paperName:data[i].paperName,source:data[i].source,userScore:data[i].userScore,finalTime:data[i].finalTimeStr}; //设定数据到orgData中
model.testPageBar.setOrgData(testData); } } override public function fault(info:Object):void{ Alert.show(info.toString()); } } }
----------------------------------------------------------------------------------
分页PagingBar.mxml
-----------------------------------------------------------------------------------
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" paddingLeft="10" backgroundColor="white"> <fx:Style> LinkBar { borderStyle: none; backgroundAlpha: 0.06; separatorColor: #c4cccc; rollOverColor: #009999; selectionColor: #7fcdfe; textSelectedColor: #6600cc; disabledColor: #33ffff; dropShadowEnabled: false; } </fx:Style> <fx:Script> <![CDATA[ import com.adobe.cairngorm.CairngormUtil; import flash.events.KeyboardEvent; import fx.model.ModelConfig; import mx.collections.ArrayCollection; import mx.controls.AdvancedDataGrid; import mx.controls.DataGrid; import mx.events.ItemClickEvent; import mx.utils.ObjectProxy; import mx.validators.NumberValidator; [Bindable] public var model:ModelConfig=ModelConfig.getOne();//在声明ModelConfig是用到[Bindable],在界面使用时也需要用[Bindable]
[Bindable] public var pageBar:PageBar=null;//这才是最关键的，分页的相关信息都从此对象来 获取 public var advancedDataGrid:AdvancedDataGrid=null; //页面初始化函数 public function getDatas(page:int):void{ //重新设定当前页 pageBar.params.currentPage=page; //参数处理 var params:Object=pageBar.params; //调用事件处理类 CairngormUtil.event(pageBar.eventName,params); } /** * 页码按钮按下,first,pre,next,last */ private function navigateButtonClick(pageString:int):void{ //1.重新设置首页、上一页、下一页、尾页 //3.重新设置每页显示的页码条 //2.重新填充页面数据 //pageBar.createNavBar(pageString); getDatas(pageString); } /** * 页码按钮按下(页码条点击) */ private function navigatePage(event:ItemClickEvent):void { //重发数据请求 getDatas(event.item.data); } ]]> </fx:Script> <mx:Label text="第" width="100%"/> <mx:Label id="curPageLabel" text="{pageBar.currentPage}" width="100%"/> <mx:Label text="页/共" width="100%"/> <mx:Label id="totalPageLabel" text="{pageBar.totalPageSize}" width="100%"/> <mx:Label text="页 共" width="100%"/> <mx:Label id="countRecordSizeLabel" text="{pageBar.totalRecordSize}" width="100%"/> <mx:Label text="条记录" width="100%"/> <mx:Button id="firstNavBtn" label="首页" click="navigateButtonClick(pageBar.firstPage)"/> <mx:Button id="preNavBtn" label="上一页" click="navigateButtonClick(pageBar.prePage)"/> <mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{pageBar.pageNumData}"/> <mx:Button id="nextNavBtn" label="下一页" click="navigateButtonClick(pageBar.nextPage)"/> <mx:Button id="lastNavBtn" label="尾页" click="navigateButtonClick(pageBar.lastPage)"/> </mx:HBox>
-----------------------------------------------------------------------------------
分页数据存储类PageBar.as
------------------------------------------------------------------------------------
package fx.util { import com.adobe.cairngorm.CairngormUtil; import mx.collections.ArrayCollection; import mx.controls.Button; import mx.controls.Label; import mx.controls.LinkBar; import mx.events.ItemClickEvent; //必须声明成Bindable才能在其他mxml中Bindable [Bindable] public class PageBar { /** * 查询数据的事件名称 **/ public var eventName:String=""; /** * 总记录数 **/ public var totalRecordSize:int=0; /** * 每页显示行数 **/ public var pageSize:int=10; /** * 当前页数 **/ public var currentPage:int=1; /** * 总页数 **/ public var totalPageSize:int=1; /** * 首页 **/ public var firstPage:int=1; /** * 上一页 **/ public var prePage:int=1; /** * 下一页 **/ public var nextPage:int=1; /** * 尾页 **/ public var lastPage:int=1; /** * 所有的数据 **/ public var orgData:ArrayCollection=new ArrayCollection(); /** * 每页显示页码数 **/ public var pageNumShow:int=10; /** * 每页显示页码 **/ public var pageNumData:ArrayCollection=new ArrayCollection(); /** * 存储查询参数 * */ public var params:Object={}; /** * 当前页 **/ public var curPageLabel:Label=new Label(); /** * 共多少页 **/ public var totalPageLabel:Label=new Label(); /** * 共多少条记录 **/ public var countRecordSizeLabel:Label=new Label(); /** * 首页 **/ public var firstNavBtn:Button=new Button(); /** * 上一页 **/ public var preNavBtn:Button=new Button(); /** * 分页块 **/ public var pageNav:LinkBar=new LinkBar(); /** * 下一页 **/ public var nextNavBtn:Button=new Button(); /** * 尾页 **/ public var lastNavBtn:Button=new Button(); public function PageBar() { } /** * 计算总页数 **/ public function countTotalPageSize():void{ //1.总记录数小于每页显示记录数时 if(this.totalRecordSize<=this.pageSize && this.totalRecordSize>=0){ this.totalPageSize=1 } //2.总记录数大于每页显示记录数时 if(this.totalRecordSize>this.pageSize && this.pageSize>=0){ //trace("this.totalRecordSize/this.pageSize="+this.totalRecordSize/this.pageSize); //2.1 总记录数正好是每页显示记录数的倍数时，总页数=总记录数/每页显示记录数 this.totalPageSize=this.totalRecordSize/this.pageSize; //trace("this.totalRecordSize%this.pageSize="+this.totalRecordSize%this.pageSize); //2.2 总记录数不是每页显示记录数的倍数时，总页数=总记录数/每页显示记录数+1 if(this.totalRecordSize%this.pageSize>0){ this.totalPageSize+=1; } } } /** * 设置首页和尾页 **/ public function setFirstPageAndLastPage():void{ //1.总体分页数第一页和最后一页 this.firstPage=1; this.lastPage=this.totalPageSize; //2.还有一中设置是根据this.pageNumData来设置 var size:int=this.pageNumData.length; //this.firstPage=this.pageNumData.getItemAt(0).label //this.lastPage=this.pageNumData.getItemAt(size-1).label } /** * 初始化分页，设置总记录数、每页显示记录数、当前页、计算总页数、设置首页、设置尾页 * @param totalRecordSize 总记录数 * @param pageSize 每页显示记录数 * @param currentPage 当前页页码 * **/ public function initPageBar(totalRecordSize:int,pageSize:int,currentPage:int,pageNumShow:int,eventName:String):void{ this.pageSize=pageSize; this.totalRecordSize=totalRecordSize; this.pageNumShow=pageNumShow; this.eventName=eventName; countTotalPageSize(); this.currentPage=currentPage; createNavBar(this.currentPage); setNavInfo(); } /** * 创建各分页 **/ public function createNavBar(currentPage:int):void{ //得知总页数、当前页数、每页显示页码数后就可以设置上一页和下一页 //上一页 this.prePage=this.currentPage-1>0?this.currentPage-1:1; //下一页 this.nextPage=this.currentPage+1<=this.totalPageSize?this.currentPage+1:this.totalPageSize; this.pageNumData.removeAll(); if(this.totalPageSize<=this.pageNumShow){//1.总页数小于设定的页码数pageNumShow时，显示所有页码 for(var i:int=0;i<this.totalPageSize;i++){ //确保小于总页数，否则退出循环 this.pageNumData.addItem({label: 1+i ,data: 1+i}); } }else{ if(this.totalPageSize-this.currentPage+1<=this.pageNumShow){//2.剩余页码数(this.totalPageSize-this.currentPage+1)小于设定页码数pageNumShow,补全页码 for(var i:int=this.totalPageSize-this.pageNumShow+1;i<=this.totalPageSize;i++){ //确保小于总页数，否则退出循环 this.pageNumData.addItem({label: i ,data: i}); } }else{ for(var i:int=0;i<this.pageNumShow;i++){//3.当前页码+设定页码数小于totalPageSize时，正常滚动 //确保小于总页数，否则退出循环 if(this.currentPage+i<=this.totalPageSize){ this.pageNumData.addItem({label: this.currentPage+i ,data: this.currentPage+i}); } } } } setFirstPageAndLastPage(); } /** * 设置分页条上的分页统计信息 **/ public function setNavInfo():void{ //设置界面上的分页统计数据 this.curPageLabel.text=this.currentPage.toString(); this.totalPageLabel.text=this.totalPageSize.toString(); this.countRecordSizeLabel.text=this.totalRecordSize.toString(); this.pageNav.dataProvider=this.pageNumData; } /** * 清空orgData中的数据，此数据用于在界面展示 **/ public function clearOrgData():void{ this.orgData.removeAll(); } /** * 绑定数据到orgData中 **/ public function setOrgData(data:Object):void{ this.orgData.addItem(data); } /** * 清空分页条 **/ public function clearPageNumData():void{ this.pageNumData.removeAll(); } /** * 设定分页条 **/ public function setPageNumData(data:Object):void{ this.pageNumData.addItem(data); } } }
--------------------------------------------------------------------
ModelConfig.as
------------------------------------------------------------
package fx.model { import com.adobe.cairngorm.model.IModelLocator; import fx.util.PageBar; import fx.util.Pages; import mx.collections.ArrayCollection; import spark.components.TitleWindow; import spark.components.WindowedApplication; [Bindable] /** *配置所有需要的model类 * @author Administrator * */ public class ModelConfig implements IModelLocator { //远端服务器地址 public var urlRemoteWebServer:String="http://www.test.com"; //存储我已做试卷分页信息 public var testPageBar:PageBar=new PageBar();
public var uservo:UserVO=null;//存放用户登录的信息 //公用 public var rootWin:WindowedApplication; public var loginViewWin:TitleWindow; public var mainViewWin:TitleWindow; public var doEvaluateVO:DoEvaluateVO; / private static var one:ModelConfig=null; public static function getOne():ModelConfig { if (one == null)one = new ModelConfig(); return one; } public function ModelConfig() { } } }
----------------------------------------------------------
注册事件CommandConfig.as
package fx.commands { import com.adobe.cairngorm.control.FrontController; /** * 注册所有的控制器 * @author Administrator * */ public class CommandConfig extends FrontController { public function CommandConfig(){ //事件处理类不注册是不能使用的
add(TestCD ); } } }
