学步园

Main.mxml

<?xml
version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
    <mx:Panel x="30" y="10" width="463" height="317"
layout="absolute" fontSize="12" creationComplete="init()">
        <mx:Label x="10" y="100" text="选择头像"/>
        <mx:ComboBox id="cboPhoto" x="92" y="100"
dataProvider="{photos}" prompt="-请选择-" width="90">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox>
                        <mx:Label text="{data.label}-"/>
                        <mx:Image width="20" height="20"
source="{data.image}"/>
                    </mx:HBox>
                </mx:Component>               
            </mx:itemRenderer>
        </mx:ComboBox>
        <mx:Label x="10" y="218" text="表情"/>
        <mx:PopUpButton x="79" y="214"
icon="@Embed(source='images/icon/0.gif')" id="pbtn"
close="closeHandle()"
            labelPlacement="top" />
        <mx:Image x="195" y="100" width="39" height="24"
source="{cboPhoto.selectedItem.image}"/>
    </mx:Panel>
   
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import render.FacePanel;
            import mx.collections.ArrayCollection;
            [Bindable]
            private var photos:Array=[];//头像集合
            /* 弹出表情界面 */
            private var fp:FacePanel=new FacePanel();
            /* 初始化 */
            private function init():void{
                this.getPhotos();
                this.getFaces();
            }
            /* 活动头像数据源 */
            private function getPhotos():void{
                for(var i:int=1;i<100;i++){
                   
photos.push({label:i,image:"images/face/"+i+"_m.jpg"});
                }
            }
            /* 指定--传值 */
            private function getFaces():void{
                fp.init();
                fp.pb=pbtn;
                pbtn.popUp=fp;
            }
           
            private function closeHandle():void{
                Alert.show(fp.getSelectItem()+"");
            }
        ]]>
    </mx:Script>
</mx:Application>

FacePanel.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="260"
height="192"
    backgroundColor="#DFD6D6" >
    <mx:TileList id="tlface" x="0" y="0" width="258" height="161"
change="changeHandle(event)"
         maxColumns="6" maxRows="5" dataProvider="{faces}"
creationComplete="init()">
         <mx:itemRenderer>
             <mx:Component>
                 <mx:VBox>
                    <mx:Image width="25" source="{data.imgPath}"
height="25"/>
                </mx:VBox>
             </mx:Component>
         </mx:itemRenderer>
    </mx:TileList>
    <mx:Label x="0" y="165" text="{currPage}/{totalPage}" width="90"
color="#F91504"/>
    <mx:LinkButton x="113" y="163" label="上一页" click="prevPage()"
width="67"/>
    <mx:LinkButton x="188" y="163" label="下一页" click="nextPage()"
width="62"/>
   
   
    <mx:Script>
        <![CDATA[
            import mx.controls.PopUpButton;
            import mx.events.ListEvent;
            [Bindable]
            private var faces:Array=[];
            [Bindable]
            private var currPage:int=1;//当前页
            private var pageSize:int=24;//显示多少条
            private var totalPage:int=0;//总页数
            private var total:int=100;//总条数
            private var rowCount:int=0;
           
            public var pb:PopUpButton;
           
            /* 初始化 */
            public function init():void{
                if(total%pageSize==0){
                    totalPage=total/pageSize;
                }else{
                    totalPage=total/pageSize+1;
                }
                this.viewPage(1);
            }
            /* 上一页 */
            private function prevPage():void{
                if(currPage==1){
                    return
                }else{
                    currPage=currPage-1;
                }
                viewPage(currPage);
            }
            /* 下一页 */
            private function nextPage():void{
                if(currPage==totalPage){
                    return;
                }else{
                    currPage=currPage+1;
                }
                viewPage(currPage);
            }
            /* 添加数据 */
            private function viewPage(page:int):void{
                faces=[];
                var index:int=0;
                var pos:int=(page-1)*pageSize;
                for(var i:int=0;i<pageSize;i++){
                    index=pos+i;
                   
faces.push({label:index,imgPath:"images/smile/"+index+".gif"});
                }
            }
            /* 活动选择的表情 */
            public function getSelectItem():Object{
                if(tlface.selectedIndex!=-1){
                    return tlface.selectedItem.label;
                }else{
                    return "0";
                }
            }
            /* 关闭PopUpButton */
            private function changeHandle(event:ListEvent):void{
                pb.close();
            }
        ]]>
    </mx:Script>
</mx:Canvas>