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

9.3.1 实现界面的多语言切换

<?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:Script>
        <![CDATA[
            import mx.events.DropdownEvent
            import mx.controls.ComboBox
            import mx.binding.utils.BindingUtils
            import mx.utils.ObjectProxy
           
            [Bindable]
            internal var langInfo:ObjectProxy;
           
            internal function initApp():void{
                langInfo = new ObjectProxy();
               
                var langArr:Array = new Array();
                langArr.push({label:"中文界面",data:"cn"});
                langArr.push({label:"英文界面",data:"en"});
                lang_select.dataProvider = langArr;
               
                lang_select.addEventListener(DropdownEvent.CLOSE,changeHandler);
               
                //
                var tmp:Object = langs["cn"];
                //
                for(var i:* in tmp){
                    langInfo[i] = tmp[i];
                }
               
                BindingUtils.bindProperty(title_txt,"text",langInfo,"title");
                BindingUtils.bindProperty(panel_1,"title",langInfo,"about");   
                BindingUtils.bindProperty(des_txt,"text",langInfo,"description");
                       
            }
            internal function changeHandler(evt:DropdownEvent):void{
                var lang:String = ComboBox(evt.target).selectedItem.data;
                var tmp:ObjectProxy = langs[lang];
                //
                for(var i:* in tmp){
                    langInfo[i] = tmp[i];
                }
            }
        ]]>
    </mx:Script>
    <mx:Model id="langs">
        <lang>
            <en>
                <title>English title</title>
                <about>About Flex</about>
                <description>Adobe Flex 2 software is a rich Internet application framework</description>
            </en>
            <cn>
                <title>中文标题</title>
                <about>关于Flex</about>
                <description>Adobe公司的Flex 2软件是一个创建RIA应用的程序框架</description>
            </cn>
        </lang>
    </mx:Model>
   
    <mx:ApplicationControlBar dock="true">
        <mx:Label id="title_txt" width="134"/>
        <mx:Spacer width="100%"/>
        <mx:ComboBox width="96" id="lang_select">
        </mx:ComboBox>

    </mx:ApplicationControlBar>
    <mx:Panel id="panel_1" styleName="myPanel" x="75" y="41" width="250" height="200" layout="absolute">
        <mx:TextArea id="des_txt" x="10" y="10" height="136" width="206"/>
    </mx:Panel>
</mx:Application>

 
langInfo 必须使用ObjectProxy 类型，使用下面的代码来更新，通过中括号[]和通过点号都可以访问属性：
var tmp:Object = langs["cn"];
 for(var i:* in tmp){
    langInfo[i] = tmp[i];
 }

 

9.3.2 制作一款名片浏览器

VO类：tree/pepople.as用来
描述用户信息的类，值对象类，其中描述了用户信息的数据结构：

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];
            }           
        }
    }
}

 

自定义事件：event/selectPeopleEvent.as
用在用户列表中，点击用户列表的每个图标，代表用户的单个组件就会派发selectPeopleEvent事件：

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;  //接收传递的参数
        }
    }
}

 

自定义的用户组件：tree/peopleItem.mxml
用来显示用户的基本信息，在用户列表中代表一个用户：

<?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>

 

主程序：Example_9.mxml:

<?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>[e-mail]</email>
                <url>http://www.xhnet.org</url>
                <gender>男</gender>
                <img>images/Baby01.gif</img>
            </user>
            <user>
                <name>小王</name>
                <email>[e-mail]</email>
                <url>http://www.xwnet.org</url>
                <gender>男</gender>
                <img>images/Baby02.gif</img>
            </user>
            <user>
                <name>小李</name>
                <email>[e-mail]</email>
                <url>http://www.xlnet.org</url>
                <gender>女</gender>
                <img>images/Baby03.gif</img>
            </user>
            <user>
                <name>小陈</name>
                <email>[e-mail]</email>
                <url>http://www.xcnet.org</url>
                <gender>女</gender>
                <img>images/Baby04.gif</img>
            </user>
            <user>
                <name>大陈</name>
                <email>[e-mail]</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>

 

评论

2 楼 Army 2009-03-04  

还有for in循环中*的类型应该是string吧，虽然*也可以，但具体点更精确些感觉。

1 楼 Army 2009-03-04  

很好的例子，只是我发现你的类文件和类名怎么都喜欢首字符小写呢……