Flex4中Repeater和Flex3中HorizontalList的用法

目前，Flex4中已经将Flex3中的HorizontalList组件替换为通用的List组件。

这里要注意他们的用法，像labelFunction方法，还有一个经常用的itemRenderer方法，该函数对应一个显示组件，使每一项数据对象对应一个组件。

还有一个就是Repeater 组件的用法。该示例中每一个数据对象对应一个RadioButton组件；使用currentItem赋值，  getRepeaterItem（）用来从重复的组件中获取数据。此外常用的还有一个currentIndex。

 

 

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

              xmlns:s="library://ns.adobe.com/flex/spark"

              xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <s:layout>

       <s:HorizontalLayout/>

    </s:layout>

    <fx:Style source="mycss.css">

      

    </fx:Style>

    <fx:Declarations>

       <!-- 将非可视元素（例如服务、值对象）放在此处 -->

    </fx:Declarations>

   

    <fx:Script>

       <![CDATA[

           import mx.collections.ArrayCollection;

           private var arrData:Array = [{name:"banana", cat:"fruit", cost:0.99},

                                       {name:"bread", cat:"bakery", cost:1.99},

                                       {name:"orange", cat:"fruit", cost:0.53}];

           [Bindable]  

           private var dp:ArrayCollection = new ArrayCollection(arrData);

          

           private function multiDisplay(item:Object):String

           {

              return item.cat + ": " + item.name + " $" + item.cost;

           }

       ]]>

    </fx:Script>

   

    <!-- Flex3中的HorizontalList组件用法， lableFunction  labelField,itemRenderer 等方法 -->

    <mx:HorizontalList dataProvider="{dp}" labelFunction="multiDisplay"/>

   

    <!-- List注意itemRenderer的用法, 其中MyVBox是自定义显示组件 ,这样每一个数据对象对应一个MyVBox组件   -->

    <s:List dataProvider="{dp}" itemRenderer="MyVBox"/>

   

    <!-- 下面介绍使用Repeater遍历数据集 -->

    <!-- click事件是从Repeater重复的组件中获取数据 -->

    <mx:Tile>

       <s:Label id="priceLabel" text="Price Here"/>

       <mx:Repeater id="myRepeator" dataProvider="{dp}">

           <s:RadioButton label="{myRepeator.currentItem.name}" click="priceLabel.text=event.target.getRepeaterItem().cost"/>

       </mx:Repeater>

    </mx:Tile>

</s:Application>

 

 

 

 

 

 

 

--MyVBox.mxml组件

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"

        xmlns:s="library://ns.adobe.com/flex/spark"

        xmlns:mx="library://ns.adobe.com/flex/mx" width="46" height="18">

    <fx:Declarations>

       <!-- 将非可视元素（例如服务、值对象）放在此处 -->

    </fx:Declarations>

    <s:Label text="{data.name}" backgroundColor="0xff0ff000"/>

</mx:VBox>

 

 目前，Flex4中已经将Flex3中的HorizontalList