PRAVINRANJAN's Blog

Repeater control is very useful but little bit complex to understand.

Why flex introduced this repeater control. Very simple. To avoid unnecessary looping and to reduce complexity of component/s or control/s repeatation.

In simple way, we can do the same repeatation by using for loop or while or do-while loop. Repeater control saves our time.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">

  <mx:Script>
    <![CDATA[
      [Bindable]
      public var myArray:Array=[1,2,3,4];
    ]]>
  </mx:Script>

  <mx:ArrayCollection id="myAC" source="{myArray}"/>
  <mx:Repeater id="myrep" dataProvider="{myAC}">
    <mx:Label id="Label1" text="This is loop #{myrep.currentItem}"/>
  </mx:Repeater>
</mx:Application>

This is a simple example how the repeater component is used. Please note here that the repeater control is itself a loop so don’t need to use another loop to support the control.
We can also use nested repeater controls. Just like example below.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">

  <mx:Script>
    <![CDATA[
      [Bindable]
      public var myArray:Array=[1,2,3,4];
    ]]>
  </mx:Script>

  <mx:ArrayCollection id="myAC" source="{myArray}"/>
  <mx:Repeater id="myrep" dataProvider="{myAC}">
    <mx:Label id="Label1" text="This is loop #{myrep.currentItem}"/>
    <mx:Repeater id="nestedrep" dataProvider="{myrep.currentItem.secondaryXMLList}">
        <mx:Label id="Label2" text="This is loop #{nestedrep.currentItem}"/>
     </mx:Repeater>  
   </mx:Repeater>
</mx:Application>

In next series, we’ll see how to retrieve data from repeated controls or components. We’ll also see controlling and refreshing the repeater component.

ciao.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.