在网上看到一个网友做得FLEX练习:http://myqiao.oxyhost.com/flex/,很不错。特别是关于分页留言板的小练习,我详细看了看,有很多学习的地方。特在此记录一下,为以后用的着做准备。
这个练习底层是用PHP做得,通讯用的是HTTPSERVICE,不过底层他没公布,那就学习上层FLEX吧。主要是分页的flex实现:
他主要使用组件来完成嵌套,像NavBar.mxml
NavBar.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" verticalAlign="middle" xmlns:local="*"> <mx:Script> <![CDATA[ //page_no 从 0 开始计数 private var current_no:int; //page_count 从 0 开始计数 private var page_count:int; private var nav_callback:Function = function (url:String):void; private var new_callback:Function = function ():void; //设置导航条的 当前页号 和 各页号的Url 和 点击导航按钮的回调函数 public function setButtons(current_no:int,page_count:int,nav_back:Function,new_callback:Function):void { if(current_no>page_count) throw (new Error("当前页超出范围")); this.current_no=current_no; this.page_count=page_count; this.nav_callback=nav_back; prio_btn.click_callback=nav_callback; next_btn.click_callback=nav_callback; this.new_callback=new_callback; page_nav_box.removeAllChildren(); makeBar(); } private function onNew():void { new_callback(); } //num 从零开始计数 private function addNumberButton(num:int):void //生成按钮并添加到page_nav_box中 { var btn:NavButton=new NavButton(); btn.setNumber(num); btn.click_callback=nav_callback; if(num ==current_no) btn.setCurrent(true); //设置按钮是不是可点击 else btn.setCurrent(false); page_nav_box.addChild(btn); } private function makeBar():void { var i:int; var btn:NavButton; if(page_count>5)//页面数大于五 6 7 8 ... { if(current_no<3)//当前页号为 0 1 2 { //显示最前面五个 for(i=0;i<5;i++) addNumberButton(i); page_nav_box.addChild(new DotLabel()); //添加省略号,这个以前真不知道 addNumberButton(page_count); //添加最后一个 } else if(current_no>(page_count-3))//当前页号为 page_count page_count-1 page_count-2 { addNumberButton(0);//添加第一页 page_nav_box.addChild(new DotLabel()); //添加省略号 //显示最后面五个 for(i=page_count-4;i<page_count+1;i++) addNumberButton(i); } else // 2 < 当前页号 < length-3 { addNumberButton(0); if(current_no>3) //在第4页的时候怎么没显示省略号呢?因为它是从0开始的 page_nav_box.addChild(new DotLabel()); //添加省略号 for(i=current_no-2;i<current_no+3;i++) //中间显示五个 addNumberButton(i); if(current_no<(page_count-3)) page_nav_box.addChild(new DotLabel()); addNumberButton(page_count); } } else { for(i=0;i<page_count+1;i++) addNumberButton(i); } //设置上一页和下一页是不是可点击,可点击时的URL if(page_count==0) { prio_btn.enabled=false; next_btn.enabled=false; } else { //设置当前页按钮为 disable switch(current_no) { case 0: prio_btn.enabled=false; next_btn.enabled=true; next_btn.setNumber(current_no+1); break; case page_count: prio_btn.enabled=true; prio_btn.setNumber(current_no-1); next_btn.enabled=false; break; default: prio_btn.enabled=true; prio_btn.setNumber(current_no-1); next_btn.enabled=true; next_btn.setNumber(current_no+1); } } } ]]> </mx:Script> <mx:HBox width="100%" horizontalGap="0" verticalAlign="middle" backgroundColor="#FFFFFF"> <local:NavButton id="prio_btn" label="上一页" fontWeight="bold" fontSize="12" textDecoration="underline" color="#0000FF"/> <mx:HBox id="page_nav_box"/> <local:NavButton id="next_btn" label="下一页" textDecoration="underline" color="#0000FF" fontSize="12"/> <mx:Spacer width="100%"/> <mx:LinkButton label="我要留言" click="onNew()" fontSize="12" textDecoration="underline" color="#0000FF" icon="@Embed(source='../images/arrow.gif')"/> </mx:HBox> </mx:HBox>
每个按钮,也写成了一个组件:NavButton.mxml
NavButton.mxml:
<?xml version="1.0" encoding="utf-8"?> <mx:LinkButton xmlns:mx="http://www.adobe.com/2006/mxml" color="red" label="1" click="onClick()" > <mx:Script> <![CDATA[ private var url:String=""; private var call_back:Function = function (url:String):void; private function onClick():void { call_back(url); } public function set click_callback(value:Function):void { this.call_back=value; } public function setNumber(n:int):void //设置按钮的label和url { if((this.name!="prio_btn")&&(this.name!="next_btn")) this.label=(n+1).toString(); this.url=BBS.START_URL+n.toString(); } public function setCurrent(b:Boolean):void //设置按钮可点击与否 { this.enabled=!b; } ]]> </mx:Script> </mx:LinkButton>
效果如图: