Flex Repeater component tips and tricks - Pt.1

My latest project demanded of me to go deep into the world of the repeaters, and I managed to learn much about limitations, tricks, and some very usefull information. Which I will be sharing with you in the following weeks...


Tip #1
------

Fill a repeater from XML.
public var myXML:String = "myXML.xml";
public function Init():void
{
var service:HTTPService = new HTTPService();
service.url = myXML;


service.method = "GET";
service.contentType = "application/x-www-form-urlencoded";
service.resultFormat = "e4x";

service.requestTimeout = 24;

service.headers = null;
service.send();

service.addEventListener(ResultEvent.RESULT, this.ResultData);

}

public function realResultData(e:ResultEvent):void
{
var result:XML=e.result as XML;
setit = result;
myRepeater.dataProvider = setit.data;
}

-----------
XML structure:

<?xml version="1.0" encoding="UTF-8"?>
<xml>
<data>
<item path="www.google.com"/>
<item path="www.google.com"/>
<item path="www.google.com"/>
<item path="www.google.com"/>
<item path="www.google.com"/>
</data>
</xml>


Tip #2
------

Get the unique IDs from two or three dimensional repeaters using event.target.instanceIndices and event.currentTarget.repeaterIndices
(2D Repeaters, 3D Repeater)
Lets assume the following repeater structure:

<mx:Repeater id="repPrime">
<mx:Repeater id="repMain" >

<mx:Repeater id="rep" count="50">
<mx:HBox width="500" y="50" id="box1">

<mx:TextArea id="dummyTa" text="Sample Text" selectable="false" editable="false" borderStyle="none" height="100"/>
<mx:VBox height="100%">
<mx:Button id="dummyBtn" label="Sample Button" height="40"/>
<mx:Button id="dummyBtn2" creationComplete="setColors(dummyBtn2[getNum(event.target.instanceIndices)][getNum2(event.target.instanceIndices)] [getNum3(event.target.instanceIndices)])" label="Sample Button" height="40"/>
</mx:VBox>
</mx:HBox>

</mx:Repeater>

</mx:Repeater>
</mx:Repeater>

/*to receive the numbers of the repeater indices we use the following methods */

/*The number here is in the form of 0,0,0 for a 3 dimensional array */
public function getNum(num):Number
{
var n:Number;
var str:String;
String(num).length;

str=String((Number(String(num).length)-1)*-1);
n=Number(String(num).slice(0,Number(str)));

return n;
}

public function getNum2(num):Number
{
var n:Number;
var str:String;
if (Number(String(num).slice(-2))>=10)
{
str=String(num).slice(0,-3);
if(Number(str.slice(-2))>=10)
{
n=Number(str.slice(-2));
}
else
{
n=Number(str.slice(-1));
}
}
else
{
str=String(num).slice(0,-2);
if(Number(str.slice(-2))>=10)
{
n=Number(str.slice(-2));}
else
{
n=Number(str.slice(-1));
}
}

return n;
}

public function getNum3(num):Number
{
var n:Number;
var str:String;

if(Number(String(num).slice(-2))>=10)
{n=Number(String(num).slice(-2));}
else
{n=Number(String(num).slice(-1))}

repeaterNum3D3=n;
return n;
}

//the function that changes the Text color of the button
public function setColors(id)
{
id.setStyle("color","#FF0000");
}

Tip #3
------

When using an Image component within repeater or a link event do not use event.target.instanceIndices to receive the number of repetition instead use event.currentTarget.repeaterIndices


until next week have fun!