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

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


优质内容筛选与推荐>>
1、获取一个 Object 对象的所有属性
2、拼音首字母查询汉字内容
3、React组件的生命周期
4、设计模式使用方法总结
5、Jmeter性能测试之Monitor监控(SSHMon Samples Collector)


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号