简介：
在Flash MX Professional 2004中，可以用XMLConnector组件更容易地获取XML数据并在Flash中显示，还有新增的动态数据绑定功能。在本文中，介绍一种快速和容易的方法，在Flash MX Professional 2004中创建XML数据驱动接口，不需要手工写ActionScript程序。
网址：http://www.macromedia.com/devnet/mx/flash/articles/xmlconnector.html
下载本文的代码：connector.zip (2.59 MB)
经验级别：中等
阅读本文的知识背景：
1.熟悉Flash
2.看过XML
3.知道为什么数据驱动的web应用程序有用
一、简介
从Macromedia Flash 5开始我们就可以使用XML文档了，现在我们可以用XMLConnector组件更容易地获取XML数据并在Flash中显示，在Flash MX Professional 2004中还有新增的动态数据绑定功能。在本文中，我们介绍一种快速和容易的方法，在Flash MX Professional 2004中创建XML数据驱动接口，不需要手工写一行ActionScript程序，当然，如果你愿意，也可以用手工写ActionScript脚本来完成同样的功能。
本文含盖以下内容：
1.配置XMLConnector组件和它的架构
2.绑定复杂的数据到ComboBox组件
3.动态绑定text数据到TextInput和TextArea组件
4.格式化动态绑定的数据
5.动态绑定图象到Loader组件
在本文中，你将学习在Flash MX 2004中数据绑定意味着什么，以及动态数据绑定是怎样让组件响应用户输入的。
二、让我们开始：检查自行车旅行程序及其数据
这个程序从一个外部XML文件中读自行车旅行信息，然后显示这些信息。用户可以用名称选择任一旅行项目，还可以看相应的介绍、价格和图片。当所选择的旅行项目改变时，这些内容也会更新。
1.下载XMLConnector.zip，解压到一个本地目录。
2.文件和目录结构如下：
完成的程序：XMLConnector_done.fla
未完成的程序：XMLConnector_raw.fla
数据：data/trips.xml
图片：
images/bigsur.jpg
images/grandcanyon.jpg
images/greatsmokies.jpg
images/natchez.jpg
images/vermont.jpg
images/napa.jpg
阶段完成的程序(测试点)：
solution/XMLConnector_step1_done.fla
solution/XMLConnector_step2_done.fla
solution/XMLConnector_step3_done.fla
solution/XMLConnector_step4_done.fla
solution/XMLConnector_step5_done.fla
3.在FlashMX Professional 2004.打开XMLConnector_done.fla
4. 选择 控制 > 测试影片 开始测试程序。
5. 改变在ComboBox组件中的旅行项目名称，查看图片和内容的更新情况。
6. 打开文件data/trips.xml，检查XML数据结构。
7. 关闭XMLConnector_done.fla，但保持data/trips.xml在打开状态以备稍后再检查。
三、设置程序以使用XMLConnector组件
为了使用XMLConnector组件，你必须在程序中放一个组件实例，为它设置数据源XML文件，并且加一个行为来触发这个组件在程序装载时装载数据。
1. 在Flash MX 2004中打开XMLConnector_raw.fla文件，将它另存为XMLConnector_step1.fla.
2. 看看层的结构；注意只有背景和静态文本层有内容。
注意：尽管文本包含一个代码层，你将通过增加行为的方法添加代码，所以你不必处理代码。但是，对于好的文件组织，应该将代码放在一个单独的层中，而不是放在可视内容层中。
3. 打开组件面板，拖一个XMLConnector 组件实例到你的程序的code层中，将它放在舞台旁边，靠近写有Bike Trip Central的静态文本（用工具箱中的文本工具写出）左边的地方。
注意：虽然XMLConnector组件在运行时是不可见的，但如果将它放在舞台上，在设计时会干扰其他部分，所以，建议你把它放在旁边。
4. 选中XMLConnector组件，打开属性窗口，单击参数表，设置下面的值：
o 组件<实例名称 designtimesp=28400>：xcTrips
o URL：data/trips.xml
o Direction：receive
保留其它属性值为默认:
o ignoreWhite: true
o multipleSimultaneousAllowed: true
o suppressInvalidCalls: false
注意：通常设置ignoreWhite:true，在读XML时忽略空白，当你不知道源XML是否包含可读空白时，使用其它的两个设置，它们与通过组件发送的XML数据有关，本文不涉及。
5. 加一个触发器数据源行为到代码层的第一帧，用来触发XMLConnector组件装入数据：
a) 选择代码层的第一帧。
b) 打开 行为 面板。
c) 按 (+) 按钮添加一个新行为。
d) 选择 数据 > 触发器数据源。
e) 从 选择数据源组件 对话框中选择xcTrips。
这个行为添加了如下的代码到代码层：
this.xcTrips.trigger();
行为是Flash MX 2004的一个新特性。行为可以添加预写代码到程序中。本例中的行为引发XMLConnector组件(组件名为xcTrips)执行其 trigger()方法，当播放这个单帧程序的第一帧时，从trips.xml文件中装入数据。在该帧的时间轴上可以看到一个小写字母“a”，指示代码已添加到这一帧。
6. 测试程序，验证数据装入过程：
a) 选择 控制 >测试影片 测试程序。
b) 选择 调试 > 变量列表 检查程序中的可用变量。
c) 按Control-F 查找已调用的变量：level0.xcTrips.results
d) 检查这个变量中的XML数据；注意它与trips.xml 中值的匹配。
7. 导入data/trips.xml作为xcTrips的架构：
a) 选择xcTrips。
b) 打开 组件检查器 面板。
c) 选择 架构 表。
d) 选择results:XML 属性。
e) 按位于架构表右上角的“从示例XML文件导入架构”按钮。
f) 打开/data目录，选择trips.xml，按 打开。
8. 在XMLConnector_step1.fla和data/trips.xml之间切换，比较在xcTrips组件的results:XML属性中的导入的数据架构和在data/trips.xml文件中的XML数据。
对比如下：
| XML文件: data/trips.xml |
组件检查器面板中xcTrips的架构（从data/trips.xml导入） |
| 在data/trips.xml文件中的整个XML文档被包装进一个单个的trips标签中。 |
导入架构的根是一个被称为trips的，数据类型为Object的属性(表示为trips:Object)。 |
| XML文档中包含有一系列的均被称为trip 的区域(sections)或节点(nodes)。 |
trips对象包含一个属性，称为trip，这个属性是一个对象数目不确定的对象数组 (Array)。 |
| 每一个trip节点(node)有一个被称为name的属性，其中还有4个嵌套的节点：description, cost, tapes, and image。 |
每一个对象在trip:Array 有5个属性：name, description, cost, tapes, and image。Name 是一个对象的属性(用@表示)；3个属性是string数据，2个是integer (数字numeric)数据。 |
9. 保存对XMLConnector_step1.fla的改变。
四、绑定XML数据到一个ComboBox组件
1. 将XMLConnector_step1.fla另存为XMLConnector_step2.fla。
2. 打开组件面板，拖一个ComboBox组件的实例到舞台上code层中，将它放在静态文本“Trip”的下面。
3. 打开这个ComboBox实例的属性面板，设置下面的值：
实例名：cbTrips
宽：120
注意：虽然你能在属性面板中设置静态的，默认标签（Label），但不要在这儿这样做，因为XMLConnector组件xcTrips将动态地为这个ComboBox提供标签和数据。
4. 从XMLConnector组件xcTrips中暴露trip对象数组，作为一个可用的绑定：
a) 选择xcTrips.
b) 打开 组件检查器 面板，选择 绑定 表。
c) 单击 (+) 按钮，添加一个新的数据绑定，显示已导入的，先前绑定到xcTrips的XML数据架构。
d) 从 添加绑定 窗口中选择trip对象数组 (称为trip:Array)，按 确定。
e) 你现在应该看到xcTrips绑定列表中的results.trips.trip属性作为一个绑定附加到xcTrips。
5. 添加最新暴露的绑定(results.trips.trip)到cbTrips的dataProvider 属性：
a) 在xcTrips的 组件检查器 面板的 绑定 表中，选择results.trips.trip 绑定。
b) 在绑定表下面的绑定属性网格中，设置direction属性为out。
c) 选择bound to 属性，按 放大镜工具 按钮。
d) 在 绑定到 对话框中，如下设置：
组件路径：ComboBox
架构位置：dataProvider : Array
数据绑定是由Flash自动维持的，两个部件间的数据连接。一个绑定可以是单向的，也可以是双向的。在本例中，你已经建立了从xcTrips:results.trips.trip(out)到cbTrips:dataProvider(in)单向绑定。因为ComboBox的行中只能显示作为标签的字串，所以你必须指定来自trip:Array的哪个值是标签。
五、用XML数据创建ComboBox标签
格式化从xcTrips输入的数据，cbTrips知道怎样从输入数组的每个对象中，显示name属性，作为label属性，显示在它自己的每一行中：
1. 选择cbTrips。
2. 打开 组件检查器 的面板的绑定表。
3. 选择dataProvider绑定。
4. 设置绑定方向为in，因为它是来自xcTrips:results:trips:trip的入站数据。
5. 设置用于这个绑定的formatter(格式化)属性为Rearrange Fields.。
6. 选择formatter options（格式化选项）属性，按放大镜按钮，打开 重新排列字段 对话框。
7. 设置 字段定义 为：label=name，单击 确定。
你已经暴露了复杂数据——一个对象数组，其中，每一个对象有来自xcTrips 组件的5个属性（你可以类推到一个每行有5列的表中的数据结构）。但是，因为ComboBox对每一行只能暴露一个作为标签的值，你必须指定哪些属性用于标签的值。尽管我们在这儿不这样做，在标签中连接多值为一个单个的字串也是可以的。
8. 选择 控制 > 测试电影 测试程序。从xcTrips输出的来自trip:Array中每一个对象的name值，现在应该作为标签在cbTrips的行中显示出来。
9. 保存对XMLConnector_step2.fla的改变。
六、在一个TextArea组件中显示和更新一个Trip介绍
1. 将XMLConnector_step2.fla另存为XMLConnector_step3.fla。
2. 打开 组件 面板，拖一个TextArea组件实例放到舞台上，把它移到静态文本“Description”的下方。
3. 打开这个新TextArea实例的属性面板，设置下面的值：
o 组件的<实例名称 designtimesp=28518>：taDescription
o 宽：275
o 高：75
o Editabl：false
注意：虽然你能对一个TextArea组件设置默认文本(甚至HTML格式的文本)，但不要在这儿这样做，因为XMLConnector组件xcTrips将动态地为这个TextArea组件。
4. 从xcTrips 组件的trip:Array中暴露description属性。作为一个有效的绑定：
a) 选择xcTrips。
b) 打开 组件检查器 面板，选择 绑定 表。
c) 按 (+) 按钮增加一个新的数据绑定，显示先前你已经导入并绑定到xcTrips XML数据架构。
d) 从架构中选择trip对象数组 (称为trip:Array)的description属性，单击 确定。
e) 你现在应该看到xcTrips 的results.trips.trip.[n].description属性已经作为xcTrips的一个可用绑定列出。
5. 附加最新设置的绑定到TextArea组件taDescription的text属性：
a) 选择xcTrips组件，从组件检查器面板的绑定表中选择results.trips.trip.[n].description绑定。
b) 在绑定表下面的绑定属性格中，设置direction为“out”。
c) 选择bound to属性，单击放大镜按钮。
d) 在 绑定到 对话框中，做如下设置：
组件路径：TextArea
架构位置text : String
e) 按 确定。
6. 选择 控制 > 测试电影 测试程序。注意第一个旅行项目的简介现在已经显示在TextArea组件taDescription中。如果你在cbTrips中选择其它的旅行项目， taDescription中显示的简介还不会随之更新。
7. 为了使得在taDescription中显示的简介随在cbTrips选择的行变化，用cbTrips的selectedIndex属性从xcTrips的trip对象数组中选出相应的简介。因为当绑定的值改变时，数据绑定动态地更新，所以当旅行项目名称改变时，其简介也将更新：
a) 选择xcTrips组件。
b) 打开 组件检查器 面板，选择 绑定表。
c) 选择results.trips.trip.[n].description绑定。
d) 选择Index for 'trip' 属性，按放大镜按钮。
e) 在 绑定索引 对话框中，取消“使用常数值”复选框，做如下设置：
Component Path: cbTrips ComboBox
Schema Location: selectedIndex : Number
注意：如果你在这一点测试程序，简介将未定义的，直到你改变cbTrips 属性一次，简介才会象我们期望的那样更新。你下面将设置一个默认值来确保，当程序第一次装入时，数据绑定到taDescription。
8. 设置cbTrips的selectedIndex属性的默认值为0，使得当程序第一次装入时，这个值对驱动taDescription的数据绑定有效：
a) 选择cbTrips组件。
b) 打开 组件检查器 面板，选择 架构 表。
c) 选择selectedIndex:Number属性。
d) 在属性格中设置default value为0。
e) 选择 控制 > 测试电影 测试程序。当电影装入时，你应该看见旅行“Napa”，并且它的简介为“The incredible variety of Napa …”。当你改变旅行项目名称时简介将自动更新。
f) 保存XMLConnector_step3.fla。
七、在TextInput组件中显示并更新格式化的价格
1. 将XMLConnector_step3.fla另存为XMLConnector_step4.fla。
2. 打开 组件 面板。拖一个TextInput组件的实例到舞台上，并将它移到静态文本“Cost”的下面。
3. 打开这个新TextArea实例的 属性 面板，做如下设置：
o 组件的<实例名称 designtimesp=28578>：tiCost
o Width: 135
o Editable: false
注意：尽管你能够设置TextInput组件的默认文本(text)，在这儿不要这样做，因为XMLConnector组件xcTrips将动态地提供这些值，并且用户将用ComboBox组件cbTrips改变它们。
4. 从xcTrips的trip:Array中暴露cost属性，作为一个可用的绑定：
a) 选择xcTrips。
b) 打开 组件检查器 面板，选择 绑定 表。
c) 单击 (+) 按钮添加一个新的数据绑定，暴露已导入的预先绑定到xcTrips 的XML数据架构。
d) 你现在应该看到xcTrips的results.trips.trip.[n].cost属性作为xcTrips的可用绑定列出。
5. 添加新设置的绑定到TextInput组件tiCost的text属性：
a) 从xcTrips的 组件检查器 面板的绑定表中选择results.trips.trip.[n].cost绑定。
b) 在绑定表下面的绑定属性中设置direction 属性为“out”。
c) 选择bound to属性，单击放大镜按钮。
d) 在 绑定到 对话框中设置：
组件路径：TextInput
架构位置：text : String
e) 单击 确定。
6. 选择 控制 > 测试电影 测试测试程序。注意，第一条旅行项目的价格已经显示在tiCost组件中。但是，当你选择其它旅行项目时，价格没相应地更新。同时价格的显示也没有格式化。
7. 用cbTrips的selectedIndex属性，根据当前选择的行，来决定显示在tiCost 中的价格。因为当绑定值改变的时候，数据绑定会动态地更新，所以，价格将会随着旅行项目的不同而变化：
a) 选择xcTrips。
b) 打开 组件检查器 面板，选择 绑定 表。
c) 选择results.trips.trip.[n].cost绑定。
d) 选择Index for 'trip' 属性，单击放大镜按钮。
e) 在 绑定索引 对话框中，取消“使用常数值”复选框，做如下设置：
Component Path: cbTrips ComboBox
Schema Location: selectedIndex : Number
注意：在上个步骤的这一点，为cbTrips的selectedIndex属性设置了一个默认值0，为了确认当程序首次装入时数据绑定发生了，可以用选择cbTrips的索引来检查。但你不需要在这儿重复，因为对于绑定到cbTrips的所有组件都有效。
8. 格式化tiCost中的货币数据为美圆：
a) 选择tiCost。
b) 打开 组件检查器 面板，选择 绑定 表。
c) 选择formatter属性为“Compose String”。
d) 选择formatter options，按放大镜按钮。
e) 在 构成字符串 对话框中，设置下面的值：$<.>.00
f) 单击 确定。
注意：在使用格式时，将动态值放在尖括号中。如果指定的字段收到的是复杂的数据，在括号中使用属性名。如果指定的字段收到的是简单的数据，例如串或者数字，就像本例的情况，在括号中用一个点“.”来代表实际收到的值。然后在动态值的两旁，按你的希望排列字串的其余的部分（就像你在上面所做的那样）。
注意：Flash MX Professional 2004有工具和方法来支持本地化的数据格式化。但是那已超出了本文的内容。
9. 选择 控制 > 测试电影 测试程序。你应该看到了旅行项目“Napa”，以及它的简介和它的价格，价格已被格式化为“$1095.00”。当你改变旅行项目时，价格和简介都会相应地更新。
10. 保存XMLConnector_step4.fla。
八、在Loader组件中显示和更新图象
1. 将XMLConnector_step4.fla另存为XMLConnector_step5.fla。
2. 打开 组件 面板，拖一个Loader组件到舞台上，把它移到静态文本“Bike Trip Central”的下面，其它组件的上面。
3. 打开新Loader组件实例的 属性面板做如下设置：
o 组件的<实例名称 designtimesp=28638>：loImage
o Width: 297
o Height: 85
o X: 2
注意：While尽管你能够设置Loader组件的默认路径(contentPath)，在这儿不要这样做，因为XMLConnector组件xcTrips将动态地提供路径，并且用户将用ComboBox组件cbTrips改变路径。因为你已经设置了ComboBox默认的选择索引为0，当电影首次装入时，数据将绑定到ComboBox的第一项，图象napa.jpg 将会显示。
4. 从xcTrips的trip:Array中暴露image属性，作为可用绑定：
a) 选择xcTrips。
b) 打开 组检查器 面板，选择 绑定 表。
c) 单击 (+) 按钮添加一个新的数据绑定，暴露已导入的，你先前绑定到xcTrips的 XML数据架构。
d) 从架构的trip数组对象(称为trip:Array) 中，选择image属性，单击 确定。
e) 你现在应该看见xcTrips的results.trips.trip.[n].image属性已作为可用绑定列出。
5. 添加最新暴露的绑定到Loader组件loImage的contentPath属性：
a) 从xcTrips的组件检查器面板的绑定表中，选择results.trips.trip.[n].image绑定。
b) 在下面的绑定属性格中，设置direction为“out”。
c) 选择bound to属性，按放大镜按钮。
d) 在 绑定到 对话框中，做如下设置：
组件路径：Loader
架构位置：contentPath : String
6. 选择 控制 > 测试电影 测试应用程序。注意，对应第一个旅行项目的图象napa.jpg现在已经显示在Loader组件loImage中了。但是，如果你选择不同的cbTrips值，图形并不更新。
7. 再次，使用cbTrips的selectedIndex属性，使得能用当前选择的行，触发相应的图象显示在loImage中。 use the selectedIndex property of the cbTrips ComboBox component to make the currently selected row trigger the correct image to display in the loImage Loader component. 从xcTrips的绑定到Loader组件的trip对象数组中，使用selectedIndex属性来动态地决定恰当的image属性。因为当绑定值改变的时候，数据绑定动态地更新。所以，当旅行名称改变的时候，图象也将相应地更新：
a) 选择xcTrips。
b) 打开 组件检查器 面板，选择 绑定 表。
c) 选择results.trips.trip.[n].image绑定。
d) 选择Index for 'trip'属性，按放大镜按钮。
e) 在 绑定索引 对话框中，取消“使用常数值”复选框，做如下设置：
组件路径：cbTrips ComboBox
架构位置：selectedIndex : Number
注意：再次，因为你先前设置了一个cbTrips的selectedIndex属性默认值0，当程序第一次装入时数据将绑定，就象用户已经选择ComboBox的索引一样。所以，对于cbTrips的所有的数据绑定都将在程序装入时发生，包括这里对Loader组件的新绑定。
8. 选择 控制 > 测试电影 测试程序。当程序装入时，你应该看到旅行“Napa”了，它的简介，它的格式化的价格和图象。当你改变旅行的名称时，价格，简介和图象都将自动地更新。
9. 保存XMLConnector_step5.fla。
摘要
在这篇文章中，你已经看到了Flash MX Professional 2004的一系列新特性，最重要的是，XMLConnector组件和动态数据绑定。接下来是你已经使用了组件检查器面板组件架构（包括用于XMLConnector组件的自定义架构导入），还有用于一些复杂数据类型的测试，例如，数组和对象。还有其它许多。
Flash MX Professional 2004做了一个很好的平衡，它将成为主流的富Web应用开发平台。这才仅仅是开始，是否它的开发者能共同抓住这个机会。如果这个教程让你感到兴奋，访问http://www.macromedia.com/support/training/ ，并且找出所有有机会学习的讲师课程。
相关的文章和资源
再次声明，这篇文章是从下面的Macromedia Authorized Training课程中摘录的：
Macromedia Authorized Training: Flash MX 2004: Application Development
Sign up for this course now >
一些相关的对Flash MX Professional 2004有兴趣的开发者中心用户，他们正在将数据集成到应用程序中，包括：
Data Binding in Macromedia Flash MX Professional 2004
by Aral Balkan
Choosing Between XML, Web Services, and Remoting for Rich Internet Applications
by Steven Webster
Building a Tip of the Day Application (Part 2): Working with Web Services
(WebServiceConnector component)
by Jen deHaan
Time Entry Application: Sample Workflow for Designing and Building Applications in Flash MX Professional 2004
by Paul Gubbay
