在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) 保存并运行应用程序。

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