分页留言板学习

在网上看到一个网友做得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=&apos;../images/arrow.gif&apos;)"/>
        
    </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>

 效果如图：