在Flex控件中使用XMLListCollection

现在，应用程序已经通过
HTTPService
取得了数据，并将数据保存在了一个
XMLListCollection

中。而目前唯一能够知道应用程序可以正常工作的方式是使用调试器。在下面这个练习中，我们会在应用程序中通过一个水平的列表来显示类别数据。

(1)
打开
FlexGrocer.mxml
文件。

如果你没有完成上一课中的练习，或者你的代码工作不正常，可以从
Lesson06/intermediate
文件夹中导入
FlexGrocer-PreList.fxp
项目。附录为跳过了某一课或者无法解决代码中问题的读者提供了导入项目的完整说明。

(2)
在应用程序的
controlBarContent

区域中添加一个
<s:List>

控件。可以在现有的几个按钮后面添加这个控件。

<s:controlBarContent>

<s:Button id="btnCheckout"
label="Checkout" right="10" y="10"/>

<s:Button id="btnCartView"
label="View Cart" right="90" y="10" click.

State1="handleViewCartClick(
event )"/>

<s:Button label="Flex Grocer"
x="5" y="5"/>

<s:List>

</s:List>

</s:controlBarContent>

(3)
然后，指定这个
List
距控制条区域的左边
200
像素，高度为
40
像素。

<s:List left="200"
height="40">

</s:List>

(4)
指定这个
List
会使用
HorizontalLayout

。

<s:List left="200"
height="40">

<s:layout>

<s:HorizontalLayout/>

</s:layout>

</s:List>

前面我们对控件组使用了水平和垂直布局，但
List
类也可以使用相同的对象来确定其子控件的排列方式。

(5)
接下来，将前面定义和填充的
categories

变量绑定到
List
实例的属性
dataProvider

。

<s:List left="200"
height="40" dataProvider="{categories}">

<s:layout>

<s:HorizontalLayout/>

</s:layout>

</s:List>

这个语法告诉
Flex
框架，当发生
categories

属性变化的事件时，列表需要从数据源取得更新的数据，以便正确地响应。本书后面将经常用到
List
和
dataProvider
。

(6)
保存并运行应用程序。



新创建的列表将横跨在界面上方，其中的数据元素水平排列。然而，此时不仅显示了类别名称，还显示了与类别相关的
XML
标签。我们真正想要显示的是
XML
的
<category>

节点包含的
<name/>

节点中的数据。

(7)
返回
FlexGrocer
应用程序，为列表添加一个名为
labelField

的属性，将其值设置为
name

。

<s:List left="200"
height="40" dataProvider="{categories}" labelField="name">

<s:layout>

<s:HorizontalLayout/>

</s:layout>

</s:List>

这里的
labelField

属性用于告诉列表将数据源中的哪个字段（属性）作为列表项的标签。

(8)
保存并运行应用程序。



这样，列表中只显示了类别名称，下一课还将用到这些数据。