Dynamically loading XML files using the HTTPService tag at Flex Examples

Mar

Dynamically loading XML files using the HTTPService tag

By peterd

Categories: TileList and HTTPService Tags: fault, HTTPService, send(), TileList, XMLListCollection.

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.

10 Responses to “Dynamically loading XML files using the HTTPService tag”

Feed for this Entry View blog reactions

1 Benny Apr 4th, 2008 at 12:37 am

Thanks for all your examples, they are very helpful! By chance, do you know to write to an xml-file from within Flex using PHP? Or maybe have a link to share? Would be nice use above code to read from xml and somehow be able to update thet xml-file dynamically also.

Thanks again, very appreciated!
/Benny
2 Michael Apr 30th, 2008 at 1:47 pm

I know how to make an XML file using PHP, mail me and i will help you out.

BTW nice article. Helps a lot !! :)
3 Cedric Jun 7th, 2008 at 3:52 am
How do I reload the data of the XMLListCollection?
```
<mx:HTTPService id="xml_httpservice_q1" url="q1.php?randomnumber=(randomnumber)" resultFormat="e4x"/>
<mx:XMLListCollection id="xml_result_q1" source="{xml_httpservice_q1.lastResult.resultaat}"/>
```
and on creationComplete: xml_httpservice_q1.send();

I get the XML data, no problem there.

when I perform xml_httpservice_q1.send(); a second time (I want to reload the data from the q1.php since it has changed), I receive the following error:

warning: unable to bind to property ‘resultaat’ on class ‘XML’ (class is not an IEventDispatcher)
4 sameer Jul 10th, 2008 at 11:37 pm

I’m following up with this example but When I click the Button to load gallery. I get the Following error. I’m using Flex Builder 3.

Error: Unable to load ”.
at mx.controls::SWFLoader/loadContent()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\controls\SWFLoader.as:1368]
at mx.controls::SWFLoader/load()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\controls\SWFLoader.as:1211]
at mx.controls::SWFLoader/commitProperties()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\controls\SWFLoader.as:1015]
at mx.core::UIComponent/validateProperties()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:5670]
at mx.managers::LayoutManager/validateClient()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:791]
at mx.controls.listClasses::TileBase/measureWidthOfItems()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\controls\listClasses\TileBase.as:1860]
at mx.controls.listClasses::TileBase/commitProperties()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\controls\listClasses\TileBase.as:2327]
at mx.core::UIComponent/validateProperties()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:5670]
at mx.managers::LayoutManager/validateProperties()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:519]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:669]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8460]
at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8403]
5 Miguel Torres Jul 18th, 2008 at 12:40 pm

Hi Peterd, first of all i want to thank you for all your great tutorials and example files, you are a life saver!!!
I have modified this example of yours becouse i only want to load 1 gallery XML file.
But i am experiencing much errors.
I would like the TileList to load the “gallery1.xml”file automatic without the end-user clicking on the button.

I really tried everything i thought would fix this, but no success.

Thanks again, have a nice day.

————-
Miguel Torres
6 Miguel Torres Jul 18th, 2008 at 12:44 pm

This is the code i am working on rite now, actually its your code, modified by me ;)
Thanks

7 Miguel Torres Jul 18th, 2008 at 12:47 pm

<?xml version="1.0" encoding="utf-8"?>
<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;
			import mx.events.ListEvent;
			import mx.events.ItemClickEvent;
			import flash.net.URLRequest;

			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);
			}

			private function tileList_itemClick(evt:ListEvent):void {
            var link:URLRequest = new URLRequest(evt.itemRenderer.data.@url);
				navigateToURL(link);
			}
		]]>
	</mx:Script>

	<mx:XMLListCollection id="xmlListColl" />

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

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

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

</mx:Application>

8 Miguel Torres Jul 18th, 2008 at 12:48 pm

<?xml version="1.0" encoding="utf-8"?>
<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;
			import mx.events.ListEvent;
			import mx.events.ItemClickEvent;
			import flash.net.URLRequest;

			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);
			}

			private function tileList_itemClick(evt:ListEvent):void {
            var link:URLRequest = new URLRequest(evt.itemRenderer.data.@url);
				navigateToURL(link);
			}
		]]>
	</mx:Script>

	<mx:XMLListCollection id="xmlListColl" />

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

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

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

</mx:Application>

9 Miguel Torres Jul 20th, 2008 at 9:49 am

Hi,

I have found a method to automaticly load de XML file without pressing the button. I thought post it in here for anybody who has the same problem as I had.

I just added a creationComplete in the mx:Aplicaiton tag passing the “loadGallery (’gallery1.xml’);”

This might NOT be best practice, but for now its the only way I know to make it work.

Again, thanks a lot for your great tuto´s and examples.
10 Joshua Jul 22nd, 2008 at 9:33 am

With the AdvancedDataGrid, if you bind an XMLListCollection to the dataProvider it works perfectly. However, if you bind the same XMLListCollection to the GroupCollection source so that you can do grouping and summary rows, it won’t seem to accept it and instead throws an error.

To solve this, I switched my HTTPService from the format of “e4x” to “object” and it worked perfectly. Basically, you just need a more basic data source it seems like an array or object?

Thought I’d note this since it took me a couple hours to figure out (yes, I’m new :)

.:Joshua