MX2004组件(四) ：Data Components--Binding

?

今儿个来学习2k4里的Data Components.

涉及到的Data components的有:DataSet ,XMLConnector,DataGrid,Label
相关的技术有：xml,MySql
目的：了解data components之间的数据绑定

我们将用一个Address List的例子来逐步讲解，看下例子先

本文的原型是在
http://www.flash-db.com/Tutorials/databind/
原文用到的是php，可是俺不会，只有换成jsp,跟原文的例子也不一样，会php的朋友可以看下那篇文章 ,当然，数据库结构都一样，程序语言无所谓。

[下面开始正文，先按照步骤做一遍，不要深究那样做的原因，做完以后再看每一步的解释，再加上自己的理解，相信很快就能搞定地。]

先做准备工作：
这里假设您已经有了jsp容器,可以正常运行jsp文件.在web根目录下建一个文件夹：addresslist
在mysql里建个数据库叫addresslist,然后下载db.sql文件，导入mysql,运行，创建需要的表.最后会用的到。
创建两个xml文件来存储班级名称和同学信息。
Classes.xml:


?
?
?

member.xml

? ad@adf.com" rel="nofollow" msn="null" />
? ad@adf.com" rel="nofollow" msn="null" />
? ad@adf.com" rel="nofollow" msn="null" />

您也可以下载classes.xml和member.xml到你的addresslist目录下,我们会先用上这两个文件

正文开始，列位上眼呐~~

先预览一下原文件的截图，下面所有步骤都是根据下图做的。

?

XMLConnector:
1)拖一个XMLConnector到主场景,命名为con1,ctrl+F3打开属性面板,在Parameter面板里：??? URL：classes.xml,Direction:reveive
保持con1的选中状态，打开Component Inspector选中result:xml,然后点击面板右上角的那个向下的箭头：”import a schema from a sample xml file”,在弹出的框框里选择addresslist/classes.xml
?

[Tips:这一步是建立XMLconnector与外部数据源的链接,并把xml文件导入到schema中，产生一个xml文件结构的视图，以便于绑定数据]

2)再手臂一个XMLConnector到主场景，命名为con2, URL：classes.xml Direction:reveive
如同1)，把addresslist/member.xml 导进来。
[Tips:同上]

DataSet:
3)拖一个DataSet 到主场景，命名为：data1_ds,Component InspectorBinding,点”+”号在弹出的Add Binding对话框里选dataprovider:Array,然后在下面的属性面板里点Bound to栏最右边那个小放大镜,在弹出的Bound to 对话框里选左边的XMLConnector, ,接着在右边一栏里选class:Array,ok!
保持data1_ds选中状态，Components InspectorSchema,点左边那个大+号:Add a component property.在下面面板里的file name栏填：className,其它属性不变
?
?
?
[Tips:这里是建立DataSet与XMLConnector之间的链接，把xml外部文件通过XMLConnector映射到DataSet里，DataSet的功能很强大，它不但是一个数据容器，还是一个过滤器，可以通过DataSet设定你想显示哪些数据,上面提到的添加的className意思就是过滤其它属性，只输出className属性]

4)再拖一个DataSet进来，命名为:data2_ds,步骤同3)一样，只是这次是Bound to 到XMLConnector, 的classmate:Array,并增加name,qq,msn,email,adds五个component property

[Tips:原理同上，新加的五个属性就是你将来想显示到DataGrid里的内容。像member.xml里的cid属性由于没有被加到DataSet里去，所以它就不会显示出来(但它仍存在，仍然可以被访问)]

5)再再拖一个。。DataSet进来(主要是它太好用了)命名为:data3_ds,步骤同4)一样，只是增加一个component property:name

[Tips:同上，这里我们只想在member_grd里显示一个member.xml的name 属性，所以只加一个就行了]

DataGrid:
6)现在开始拖DataGrid,拖一个到主场景，命名为class_grd,放在靠左的位置，(像例子中的那样),Component InspectorBinding,选dataprovider:Array,Bound to 到data1_ds的provider:Array;
????

[Tips:这一步就是把DataSet 与DataGrid连起来，把DataSet里的数据用DataGrid显示出来]

7)重复6)的步骤，再拖一个DataGrid,命名为 member_grd,靠class_grd右边放，Component InspectorBindingdataprovider:Array? bound to 到data3_ds的dataprovider:Array

[Tips:把data3_ds的内容在class_grd里显示出来]

Label
8)拖六个Label组件到主场景中，分别命名为class_txt,name_txt,qq_txt,msn_txt,email_txt,address_txt
class_txt:Compoents InspectorBindingtext:String 绑定到data1_ds的className:String属性

name_txt: Compoents InspectorBindingtext:String 绑定到data2_ds的name:String属性

qq_txt: Compoents InspectorBindingtext:String 绑定到data2_ds的qq:String属性

msn_txt: Compoents InspectorBindingtext:String 绑定到data2_ds的msn:String属性

email_txt: Compoents InspectorBindingtext:String 绑定到data2_ds的email:String属性

address_txt: Compoents InspectorBindingtext:String 绑定到data2_ds的adds:String属性

[Tips:这里的几个Label组件与data2_ds,data1_ds新添加的几属性绑定到一起，以便与data1_ds,data2_ds的数据保持同步，data1_ds,data2_ds的数据改变的时候，能在label中反映出来]

Button

9)拖四个Button组件到主场景，class_grd下面放俩，分别起名为prev_btn,next_btn，member_grd下面放俩,起名为mprev_btn,mnext_btn.

好了，到这一步，ctrl+enter,测试一下，看到class_grd和member_grd,还有那几个Label里已经有内容了， 但它们之间还不能交互，下面我们就让它们连起来。

[Tips:这里就不多说了，就是控制两个DataGrid的上一个下一个，主要功能在as来实现]

SelectedIndex
10)选中data2_ds,Component InspectorBinding,绑定selectedIndex:Number到member_grd的selectedIndex:Number,direction为in.
???????

?

11)保持data2_ds选中状态，绑定selectedIndex:Number 到data3_ds的selectedIndex:Number

12)选中member_grd,绑定它的selectedIndex:Number到data3_ds的selectedIndex:Number

13)选中class_grd,绑定它的selectedIndex:Number到data1_ds的selectedIndex:Number

[Tips:上面这几步很重要，selectedIndex就是被选取择条目的索引值， 通过这个属性把DataSet,DataGrid连结起来，实现同步.DataSet,DataGrid都有这个属性,简单点说：当你点击DataGrid里的第一个条目，那么DataSet 的数据指针就会指到第一行数据，点第二个，指针指到第二行数据(指针只是个联想，以助理解)]

好了，这样，就可以实现左栏与右栏的同步了，嗯。。就是说你点击左栏的条目，右边的内容也做相应的变化，就像你在开头看到的例子一样。

下面，我们就该写点as了,别担心，很简单的一些。

ActionScript
14)在第一帧上写：
System.useCodePage=true;(如果你的内容是中文的话最好写上这句)
con1.trigger();
con2.trigger();//这两句不写xmlconnector就不会加载xml文件
var display=new Object();//自定义一个对像

//为display对像添加iteratorScrolled和cellPress方法，iteratorScrolled是当DataSet? 内部数据指针发生变化的时候
触发，cellPress是当DataGrid的一个单元格被点击的时候触发
display.iteratorScrolled=display.cellPress=function(evt){
//获得被选择条目的selectedIndex值，是一个整数
?var nr:Number=evt.target.selectedIndex;
//把class.xml的id属性传递给member.jsp, 根据id值由member.jsp动态生成member.xml的内容。
?con2.URL=”member.jsp?cid=”+data1_ds.items[nr].id;
//重新加载member.xml文件?
con2.trigger();
}
//给四个nav button增加 onPress事件，来改变DataSet的内部数据指针
prev_btn.onPress=next_btn.onPress=mprev_btn.onPress=mnext_btn.onPress=function(evt){
?if(this._name==”prev_btn”){this._parent.data1_ds.previous()}
?if(this._name==”next_btn”){this._parent.data1_ds.next()}
?if(this._name==”mprev_btn”){this._parent.data3_ds.previous()}
?if(this._name==”mnext_btn”){this._parent.data3_ds.next()}

}

//把对应的事件加到相关的DataGrid和DataSet上
class_grd.addEventListener(“cellPress”,display);
data1_ds.addEventListener(“iteratorScrolled”,display);

15)下面是member.jsp的代码
<%@ page import="java.sql.*"%>
<%
?String cid=request.getParameter("cid");
?Class.forName("org.gjt.mm.mysql.Driver").newInstance();
?Connection conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/addrsslist?user=YourName&password=YourPassword");
?Statement stmt=conn.createStatement();
?ResultSet rs=stmt.executeQuery("select * from member where cid="+cid);
?out.println(" ");
?out.println("

");
?while(rs.next()){
??//out.println(rs.getString("name"));
??out.println(" ");
?
?}
?out.println("

");
%>

[Tips:jsp的内容俺就不解释了，会的话很容易懂的。根据con2.URL=”member.jsp?cid=”+data1_ds.items[nr].id;这句传过来的cid值来确定该从数据库中取得哪些数据]

好啦，到这儿就算完了，ctrl+enter试一下，是不是跟开始的例子一样工作正常？如果不能正常工作的话就花点时间检查一下是不是按照每一步说明严格的去做，或都对比一下俺做好的源代码，哪里不一样。这些东西做对一次是没多大效果的，要多做几次，起码要三次，而且第二次第三次的时候都是凭着自已的理解去做的，而不是仍按照教程一步步的做。

?