flex Repeater

flex Repeater

flex 可以使用重复 Repeater 控件在运行时动态重复MXML的内容
flex 中除了<mx:Application>其他都可以被重复而 Repeater 控件
可以多次使用，也可以嵌套使用 有点for循环的意思

常用的属性
dataProvider : Object 此 Repeater 创建其子项的重复实例时使用的数据提供程序。
startingIndex : int dataProvider 中的索引，此 Repeater 从此索引位置开始创建子项。
count : int 此 Repeater 应执行的次数。
currentIndex : int Repeater 执行时，当前正在处理的 dataProvider 中项目的索引。
currentItem : Object 此 Repeater 执行时，当前正在处理的 dataProvider 中的项目。
recycleChildren : Boolean 布尔值标志，指示此 Repeater 是重新使用以前创建的子项还是创建新子项。
事件
repeat 每次处理项目或更新 currentIndex 和 currentItem 属性时调度。
repeatEnd 创建了 repeater 的所有子组件后调度。
repeatStart 当 Flex 开始处理 dataProvider 属性并开始创建指定的子组件时调度。
例如：

<?xml version="1.0"?>
<!-- Simple example to demonstrate the Repeater class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            import mx.controls.Alert;

            [Bindable]
            private var dp:Array = [1, 2, 3, 4, 5, 6, 7, 8, 9];    

        ]]>
    </mx:Script>

    <mx:Panel title="Repeater Example" width="75%" height="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Text width="100%" color="blue" 
            text="Use the Repeater class to create 9 Button controls in a 3 by 3 Tile container."/>

        <mx:Tile direction="horizontal" borderStyle="inset" 
            horizontalGap="10" verticalGap="15"
            paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10">

            <mx:Repeater id="rp" dataProvider="{dp}">
                <mx:Button height="49" width="50" 
                    label="{String(rp.currentItem)}" 
                    click="Alert.show(String(event.currentTarget.getRepeaterItem()) + ' pressed')"/>
            </mx:Repeater>    
        </mx:Tile>

    </mx:Panel>  
</mx:Application>

   <mx:Repeater id="rp" dataProvider="{dp}" count="3">
	<mx:Label id="lbl1" text="value:{rp.currentItem}Loop #{rp.currentIndex+!} of {rp.count} />
   </mx:Repeater >

<mx:Script>
	<![CDATA[
		import mx.collections.*;
		import mx.controls.Alert;
		[Bindable]
		public var images:ArrayCollection = 
			new ArrayCollection([{source:"image/heavyrain.png"},{source:"image/partlycloudy.png"},
	         {source:"image/sunny.png"},{source:"image/thunder.png"},{source:"image/cloudy.png"},
             {source:"image/drizzle.png"},{source:"image/snow.png"},{source:"image/clearnight.png"}]);

        public function handleRepeatStart():void
        {
        	mx.controls.Alert.show("Repeater starting!");
        }

        public function handleRepeat():void
        {
        	trace("Current on index:" + myRepeater.currentIndex);
        	trace("Image is:" + myRepeater.currentItem.source);
        }


        public function handleRepeatEnd():void
        {
        	mx.controls.Alert.show("Repeater finished!");
        }

	]]>
</mx:Script>
<mx:Tile direction="horizontal" >
  <mx:Repeater id="myRepeater" dataProvider="{images}" 
               repeatStart="handleRepeatStart()"
               repeat="handleRepeat()"
               repeatEnd="handleRepeatEnd()">
    <mx:Image source="{myRepeater.currentItem.source}" />	
  </mx:Repeater>
</mx:Tile>

当然可以使用

 <mx:HTTPService id="service" url="test.xml" resultFormate="e4x" />
   <mx:XMLListCollection id="myxc" source="{service.lastResult.product}" />
   xml结构如下:
   <products>
	   <product>
		<name>demo</name>
	   </product>
   </products>
   -- product 为xml中的节点

   <mx:Repeater id="repeater1" dataProvider="{myxc}" >
	<mx:Label id="lbl1" label="{repeater1.currentItem.name}" />
   </mx:Repeater>

   as中使用
//例子中因为 Label 的id都是一样的,引用每个标签的实体为 lbl1[0],lbl1[1]
   public fucntion demo():void
   {
	for(var i:int=0;i<lbl1.length;i++)
	{
		Alert.show("demo"+lbl1[i].text);
	}

   }

重复事件处理
<mx:Repeater id="repeater1" dataProvider="{myxc}" >
<mx:Label id="lbl1" label="{repeater1.currentItem.name}" click="event.currentTarget.getRepeaterItem()"/>
</mx:Repeater>

使用 Repeater 控件需要注意的地方
1.不能使用重复循环控件来循环一个二维数组对象
2.在运行是改变重复组件的数据源数组，不会对重复控件产生影响，可以使用(colleciton)来定义数据源
3.如果重复使用控件建议使用{}标识
4.如果使用相邻或嵌套的重复控件:需要使用一个 UIComponent 例如

<mx:Spacer>
	   <mx:Repeater id="repeater1" dataProvider="{myxc}" >
   </mx:Repeater>
	   <mx:Repeater id="repeater2" dataProvider="{myxc}" >
   </mx:Repeater>
 </mx:Spacer>