Dynamic XML generated Controls

[jazzman121]

hey guys im new to flex.. so excuse my questions if they seem
simple...

I have xml data that has categories
and images in different categories

<photos>
<category label="washington">
<image url="images/washington1.jpg">Washington 1</image>
<image url="images/washington2.jpg">Washington 2</image>
<image url="images/washington3.jpg">Washington 3</image>
</category>
<category label="nashville">
<image url="images/nashville1.jpg">nashville 1</image>
<image url="images/nashville2.jpg">nashville 2</image>
</category>
</photos>

in my application the way I want to show these images are using two
controls.. ( and maybe you can suggest a better way to go about this )
the accordion to put the images in categories and the tile control to
lay them out

<mx:Accordion id="accordion1" name="accordion1"
y="24"
width="320"
headerHeight="30"
horizontalCenter="143"
headerStyleName="accHeader"
resizeToContent="true"
color="#000000" >

<mx:Canvas label="Washington" width="100%" height="100%">
<mx:Tile direction="horizontal"
horizontalGap="3" verticalGap="3"
paddingTop="3" paddingBottom="3" paddingLeft="3"
paddingRight="3" >

<mx:Image id="image1" name="image1" source="images/washington1.jpg"></mx:Image>
<mx:Image id="image2" name="image2" source="images/washington2.jpg"></mx:Image>
<mx:Image id="image3" name="image3" source="images/washington3.jpg"></mx:Image>
</mx:Tile>
</mx:Canvas>

<mx:Canvas label="Nashville" width="100%" height="100%">
<mx:Tile direction="horizontal"
horizontalGap="3" verticalGap="3"
paddingTop="3" paddingBottom="3" paddingLeft="3"
paddingRight="3" >

<mx:Image id="image4" name="image4" source="images/nashville1.jpg"></mx:Image>
<mx:Image id="image5" name="image5" source="images/nashville2.jpg"></mx:Image>
</mx:Tile>
</mx:Canvas>
</mx:Accordion>

So my question is how do I get the xml data to dynamiclly generate the
images in the Tile control and ofcourse the Canvas control too

I hope that makes sense
thanks

[wvxvw]

<?xml version="1.0" encoding="utf-8"?>
<!-- TileExample -->
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="imagesService.send()">

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var collection:ArrayCollection;

private function resultHandler():void
{
collection = new ArrayCollection();
imagesService.lastResult.image.(collection.addItem (@url));
}
]]>
</mx:Script>

<mx:HTTPService
url="images.xml"
resultFormat="e4x"
id="imagesService"
result="resultHandler()" />

<mx:Tile
direction="horizontal"
horizontalGap="3"
verticalGap="3"
paddingTop="3"
paddingBottom="3"
paddingLeft="3"
paddingRight="3">

<mx:Image
id="image4"
source="{collection.getItemAt(0)}"/>

<mx:Image
id="image5"
source="{collection.getItemAt(1)}"/>
</mx:Tile>

</mx:Application>
images.xml
<?xml version="1.0" encoding="utf-8" ?>
<data>
<image url="test.jpg"></image>
<image url="test.jpg"></image>
</data>
Example with Tile...

[jazzman121]

Im sorry I dont think I explained right.. I know how to get the data loaded dynamically but what I want to do is.. get the controls.. loaded dynamicly depending on how many <images> are in the xml

for example if

the xml has 4 <images></images>

there should be four
<mx:images url="images1.jpg" />

if there are only 3 <images></images>
there should be

3 <mx:images />

make sense?

thanks again

[wvxvw]

Then use
(addChild(new Image()) as Image).source = "argument from XML"; in the result handler...

[jazzman121]

Thanks for your help ... also figured out there is a flex component called

<mx:Repeater>

that you can use

http://livedocs.adobe.com/flex/3/html/help.html?content=repeater_3.html

thanks for your help anyways.. that helped a lot :)