Displaying images from an XML file using the Repeater component

The following example shows you how to use the Repeater component to display images loaded from an external XML file.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="imagesXML" source="images.xml" />

    <mx:Zoom id="zoom" />

    <mx:HBox id="hBox">
         <mx:Repeater id="rep"
                 dataProvider="{imagesXML.image}">
            <mx:Image source="{rep.currentItem.@src}"
                    toolTip="{rep.currentIndex}:{rep.currentItem.@alt}"
                    completeEffect="{zoom}" />
        </mx:Repeater>
    </mx:HBox>

</mx:Application>

images.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ -->
<images>
    <image src="images/Button.png" alt="Button" />
    <image src="images/ButtonBar.png" alt="ButtonBar" />
    <image src="images/CheckBox.png" alt="CheckBox" />
    <image src="images/ColorPicker.png" alt="ColorPicker" />
    <image src="images/ComboBox.png" alt="ComboBox" />
    <image src="images/DataGrid.png" alt="DataGrid" />
    <image src="images/DateChooser.png" alt="DateChooser" />
    <image src="images/DateField.png" alt="DateField" />
</images>

View source is enabled in the following example.

12 thoughts on “Displaying images from an XML file using the Repeater component

  1. Im having difficulties.

    When I embed imagess using : “”
    it works FINE.

    But When I use “”
    then the resulting swf embeded into a HTML page does not show…

    Irrespective of pulling images from XML or even staticly as I’ve shown above.

    I have a feeling it’s something to do with ‘use-network’… I’ve tried this approach to no avail (setting it to true and false.)

    PLEASE SOMEONE Hlep Me!

    Alternatively knowing that ” synatx works fine when using the swf on my webroot…… how can I edit the below XML repeater Image syntax

    source=”{rep.currentItem.@src}” to a version which EMBEDS the image.

    Hence the swf works (displays images) when I use EMBED (hence embeding images at COMPILE TIME) but when using the RUN TIME version [ source=”{rep.currentItem.@src}” ] then it wont work for me.

    Please someone hit me back.

    Regards
    g’

  2. How would I pass the currentIndex to a function??

    click=”myFunction(rr.currentIndex)” does not work…

    1. @Tim Wilson,

      Not sure if it helps, but you could try holding the repeater index in a control’s data property, as seen in the following example:

      <?xml version="1.0" encoding="utf-8"?>
      <!-- http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ -->
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="vertical"
              verticalAlign="middle"
              backgroundColor="white">
       
          <mx:Script>
              <![CDATA[
                  import mx.controls.Alert;
       
                  private function myFunction(idx:uint):void {
                      Alert.show(idx.toString());
                  }
              ]]>
          </mx:Script>
       
          <mx:ArrayCollection id="arrColl" source="[One,Two,Three,Four,Five]" />
       
          <mx:HBox id="hBox">
              <mx:Repeater id="rr" dataProvider="{arrColl}">
                  <mx:Button label="{rr.currentItem}"
                          data="{rr.currentIndex}"
                          click="myFunction(event.currentTarget.data);" />
              </mx:Repeater>
          </mx:HBox>
       
      </mx:Application>

      Peter

  3. Hi,
    I am having similar problem, when I have used data binding but the repeater does not repeat itself when the data source changes.
    My Code::

    The Chart data was static initially and then when I added the function “executeBindings(true);”, then, I saw the chage in my Charts. (when my dataSource was modifyied dynamically )
    However, when I have my debuffer on the after the data has been loaded initially and when i change the datasource (selectedSectors), I can see the change in selectedSectors but the debugger never comes to the tag

    In my output, my Chart data is displayed only for the modified datasource but for the rest, emplty charts are been seen.

    Would appreciate any help :)
    Thank you in advance

  4. Hi,
    I am having similar problem, when I have used data binding but the repeater does not repeat itself when the data source changes.
    My Code::

    The Chart data was static initially and then when I added the function “executeBindings(true);”, then, I saw the chage in my Charts. (when my dataSource was modifyied dynamically )
    However, when I have my debuffer on the after the data has been loaded initially and when i change the datasource (selectedSectors), I can see the change in selectedSectors but the debugger never comes to the tag

    In my output, my Chart data is displayed only for the modified datasource but for the rest, emplty charts are been seen.

    Would appreciate any help :)
    Thank you in advance

  5. Hi,
    I am having similar problem, when I have used data binding but the repeater does not repeat itself when the data source changes.
    My Code::

    The Chart data was static initially and then when I added the function “executeBindings(true);”, then, I saw the chage in my Charts. (when my dataSource was modifyied dynamically )
    However, when I have my debuffer on the after the data has been loaded initially and when i change the datasource (selectedSectors), I can see the change in selectedSectors but the debugger never comes to the tag

    In my output, my Chart data is displayed only for the modified datasource but for the rest, emplty charts are been seen.

    Would appreciate any help :)
    Thank you in advance

    1. chal ja………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

Comments are closed.