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