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 属性并开始创建指定的子组件时调度。
例如:
重复事件处理
<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 例如
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>