Dynamically loading XML files using the HTTPService tag

by Peter deHaan on March 29, 2008

In previous examples, “Creating a simple image gallery with the Flex TileList control” and “Creating a simple image gallery with the Flex HorizontalList control”, we saw how you could create a simple image gallery using the TileList and HorizontalList controls.

The following example shows how you can load XML files using the HTTPService tag so that you can dynamically load different galleries.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/29/dynamically-loading-xml-files-using-the-httpservice-tag/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            import mx.controls.Alert;

            private var alert:Alert;

            private function loadGallery(src:String):void {
                httpService.url = src;
                httpService.send();
            }

            private function httpService_fault(evt:FaultEvent):void {
                var title:String = evt.type + " (" + evt.fault.faultCode + ")";
                var text:String = evt.fault.faultString;
                alert = Alert.show(text, title);
                xmlListColl.removeAll();
            }

            private function httpService_result(evt:ResultEvent):void {
                var xmlList:XMLList = XML(evt.result).images.image;
                xmlListColl = new XMLListCollection(xmlList);
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="xmlListColl" />

    <mx:HTTPService id="httpService"
            resultFormat="e4x"
            fault="httpService_fault(event);"
            result="httpService_result(event)" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="gallery 1"
                click="loadGallery('gallery1.xml');" />
        <mx:Button label="gallery 2"
                click="loadGallery('gallery2.xml');" />

        <mx:Button label="gallery 404"
                click="loadGallery('gallery404.xml');" />
    </mx:ApplicationControlBar>

    <mx:TileList id="tileList"
            dataProvider="{xmlListColl}"
            itemRenderer="TileListItemRenderer"
            columnCount="3"
            columnWidth="150"
            rowCount="2"
            rowHeight="100" />

</mx:Application>

TileListItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/29/dynamically-loading-xml-files-using-the-httpservice-tag/ -->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Image source="{data.@src}"
            horizontalCenter="0"
            verticalCenter="0" />

    <mx:Label text="{data.@lbl}"
            fontWeight="bold"
            horizontalCenter="0"
            bottom="0" />

</mx:Canvas>

View source is enabled in the following example.

{ 3 comments… read them below or add one }

Bridget April 22, 2010 at 8:13 am

I am having the same problem as sameer. I’m receiving the error he is.

Reply

Hashim August 25, 2010 at 5:06 am

Thanx man this helped me a lot..

Reply

e11world July 29, 2009 at 3:23 pm

Hi Michael,
I’m just wondering if you or anyone here knows how to load multiple/dynamic xml files into the fla from php/asp
Instead of doing the same old xml.load(‘myfile.xml’);, I want to load different xml files per user from a database for example. I have the php/asp code but not sure how to get flash to work with that.
I guess I need some sort of parameter like xml.load(url:String) .
I haven’t done AS2 in a while so it feels like it’s all new to me. Thanks for the help in advance.

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: