Flex学习笔记_09 数据绑定_运用实例

• Flex学习笔记_09 数据绑定_概念、使用
• Flex学习笔记_05 使用组件处理数据和交互_01常用组件
• Flex学习笔记8——数据绑定
• 学习笔记四－－数据绑定
• Intel82576学习笔记 数据的发送接收整体流程

package tree
{
    //设置类基本的绑定
    [Bindable]
    public class people
    {
        //定义用户的数据
        public var name:String;
        public var email:String;
        public var url:String;
        public var gender:String;
        public var img:String;
       
        //在构造函数中传递数据
        function people(obj:Object):void{
            //遍历所有的属性，并将这些属性赋值给people 的同名属性
            for(var i:String in obj){
                this[i]  = obj[i];
            }           
        }
    }
}

package event
{
    import flash.events.Event;
    import tree.people;
   
    //继承Event 类
    public class selectPeopleEvent extends Event
    {
        //存储数据，供监听器使用
        public var selectedUser:people;   
        //使用静态变量定义事件类型
        public static const CLICK_PEOPLE:String = "selectPeople";
       
        function selectPeopleEvent(p:people):void{
            super(selectPeopleEvent.CLICK_PEOPLE,false,false);           
            selectedUser = p;  //接收传递的参数
        }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="42" horizontalAlign="left" verticalAlign="middle"
     rollOver="doRollOver()" rollOut="doRollOut()" mouseDown="doPress()">
   
    <mx:Script>
        <![CDATA[
            import tree.people;
            import event.selectPeopleEvent;
           
            [Bindable]
            public var p:people;  //设置p为绑定数据源
           
            //鼠标移入动作，设置边框样式
            internal function doRollOver():void{
                setStyle("borderStyle", "solid");
                setStyle("borderColor", "#666699");               
            }
            //鼠标移出动作，取消设置边框样式
            internal function doRollOut():void{
                setStyle("borderStyle", "none");
            }
            //当点击组件时，派发事件
            internal function doPress():void{
                dispatchEvent(new selectPeopleEvent(p));  //把用户信息派发出去
            }
        ]]>
    </mx:Script>
    <mx:Image width="32" height="32" source="{p.img}"/>
    <mx:Label text="{p.name}"/>
</mx:HBox>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
    <mx:Style source="style.css" />
    <mx:Model id="peoples">
        <users>
            <user>
                <name>小张</name>
                <email>xiaozhang@126.com</email>
                <url>http://www.xhnet.org</url>
                <gender>男</gender>
                <img>images/Baby01.gif</img>
            </user>
            <user>
                <name>小王</name>
                <email>xiaowang@126.com</email>
                <url>http://www.xwnet.org</url>
                <gender>男</gender>
                <img>images/Baby02.gif</img>
            </user>
            <user>
                <name>小李</name>
                <email>xiaoli@hotmail.com</email>
                <url>http://www.xlnet.org</url>
                <gender>女</gender>
                <img>images/Baby03.gif</img>
            </user>
            <user>
                <name>小陈</name>
                <email>xiaoch@gmail.com</email>
                <url>http://www.xcnet.org</url>
                <gender>女</gender>
                <img>images/Baby04.gif</img>
            </user>
            <user>
                <name>大陈</name>
                <email>dach@gmail.com</email>
                <url>http://www.dcnet.org</url>
                <gender>女</gender>
                <img>images/Baby05.gif</img>
            </user>
        </users>
    </mx:Model>
   
    <mx:Script>
        <![CDATA[
            import tree.*;
            import event.*;
           
            [Bindable]
            internal var currentPeople:people; //设置绑定，将作为用户详细信息面板的数据源
           
            internal function initApp():void{
                var users:Object = peoples.user; //访问Model里的数据，得到所有的用户资料
               
                var n:Number = 0; //使用n 记录用户数量
                for(var i:* in users){
                    var newPeople:peopleItem = new peopleItem();
                    var peopleInfo:people = new people(users[i]); //使用users[i]创建用户对象
                    newPeople.p = peopleInfo; //给用户组件的绑定属性p 指定数据，将触发peopleItem组件中的数据绑定
                    holder_user.addChild(newPeople);//将newPeople添加到容器中，并显示出来
//监听组件的点击事件
                    newPeople.addEventListener(selectPeopleEvent.CLICK_PEOPLE,selectHandler);
                    newPeople.y = n*newPeople.height; //设置组件的坐标
                    n++;
                }
            }
               
            internal function selectHandler(evt:selectPeopleEvent):void{
                //修改currentPeople 的值,指向当前点击的对象.selectedUser是事件传过来的信息.表示点击用户的信息,一旦修改了selectedUser,将积分详细面包的数据变化
                currentPeople = evt.selectedUser;
            }
                //tile_user.dataProvider =users;
        ]]>
    </mx:Script>
    <mx:Panel styleName="myPanel" x="23" y="32" width="130" height="268" layout="absolute" title="名册">
        <mx:Canvas id="holder_user" x="0" y="10" width="100%" height="100%"></mx:Canvas>
    </mx:Panel>
    <mx:Panel styleName="myPanel" x="174" y="32" width="235" height="220" layout="absolute" title="详细信息 {currentPeople.name}" horizontalAlign="center" verticalAlign="middle">
        <mx:Image width="32" source="{currentPeople.img}" x="10" y="19"/>               
        <mx:Label x="78" y="9" text="{currentPeople.name}" width="83" fontWeight="bold"/>
        <mx:Label x="10" y="76" text="邮箱：{currentPeople.email}" width="191"/>
        <mx:Label x="10" y="117" text="主页：{currentPeople.url}" width="191"/>
        <mx:Label x="78" y="34" text="{currentPeople.gender}" width="83"/>
    </mx:Panel>
</mx:Application>