PRAVINRANJAN's Blog

Return back again.

In this section we’ll see how to retrieve repeater item and its data.

Lets have our example…

<mx:VBox id="box" height="100%" width="100%">
     <mx:Spacer height="10"/>
     <mx:Repeater id="r" dataProvider="{xmlColMenu}" startingIndex="0" recycleChildren="true">
         <mx:LinkButton id="idx" label="{r.currentItem.name}" click="{clbClick(event);}" styleName="RightLink"/>
         <mx:Repeater id="s" dataProvider="{r.currentItem.link}" 
             startingIndex="0" recycleChildren="true">
            <mx:LinkButton id="idy" label="{s.currentItem.name}"
                click="{clbClick(event);}" fontFamily="Verdana"
                fontSize="9" fontStyle="normal" fontWeight="normal"
                textSelectedColor="#03598B" textRollOverColor="#47A318" disabledColor="#47A318" height="15"
                color="#666666" themeColor="#FFFFFF"/>
         </mx:Repeater>
     </mx:Repeater>
 </mx:VBox>

Now we will write clbClick event for the repeater item. Indeed, your event handler will be written in <mx:Script> block.

/**
 * Navigation item click event.
 * @param event of type MouseEvent.
 */
 private function clbClick(event:MouseEvent):void
 {
     trace(event.target.getRepeaterItem().id);
 }

If you use getRepeaterItem(), it gives you access to the data item that you’d set earlier while repeating the item.

<mx:LinkButton id="idx" label="{r.currentItem.name}" click="{clbClick(event);}" styleName="RightLink"/>

In my case, I need to access id. You may have different data.

In next section we’ll check how to update repeater control dynamically. Till then c. y.

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.