ChikaraDev Flex/AIR Blog

The Flex 3 help system has example applications showing how to load XML data into an AdvancedDataGrid when the XML is declared inline in the application MXML file, but none showing how to load XML data using HTTPService. 

The Data 

First, here is the data I used. It is in file ProductSales.xml, located in directory “data”, which is a sub-directory of the directory with the main application MXML file:

<?xml version=”1.0″ encoding=”utf-8″ ?>
<Category Category=”Poultry”>
    <Category Category=”Chicken”>
        <Product Product=”skinless breasts”
            InStock=”565 lbs” OnOrder=”1000 lbs”/>
        <Product Product=”thighs”
            InStock=”385 lbs” OnOrder=”700 lbs”/>
        <Product Product=”nuggets”
            InStock=”230 lbs” OnOrder=”400 lbs”/>
    </Category>
    <Category Category=”Turkey”>
        <Product Product=”whole turkeys”
            InStock=”1565 lbs” OnOrder=”2000 lbs”/>
        <Product Product=”turkey burger”
            InStock=”1365 lbs” OnOrder=”1200 lbs”/>
        <Product Product=”turkey ham”
            InStock=”640 lbs” OnOrder=”700 lbs”/>
    </Category>
</Category>

The Application

Now here is the main application MXML file:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
  creationComplete=”salesRequest.send();”>
  <mx:Script>
    <![CDATA[
      import mx.collections.XMLListCollection;
      import mx.rpc.events.ResultEvent;

      [Bindable] public var salesDP:XMLListCollection;
           
      private function salesResultHandler(event:ResultEvent):void{
        salesDP = new XMLListCollection(event.result.Category);
      }
    ]]>
  </mx:Script>
  <mx:HTTPService id=”salesRequest” useProxy=”false” resultFormat=”e4x”
    result=”salesResultHandler(event)” url=”data/ProductSales.xml”/>
  <mx:AdvancedDataGrid width=”100%” height=”100%”>
    <mx:dataProvider>
      <mx:HierarchicalData source=”{salesDP}”/>
    </mx:dataProvider>
    <mx:columns>
      <mx:AdvancedDataGridColumn dataField=”@Category”
        headerText=”Category”/>
      <mx:AdvancedDataGridColumn dataField=”@Product”
        headerText=”Product”/>
      <mx:AdvancedDataGridColumn dataField=”@InStock”
        headerText=”In Stock”/>
      <mx:AdvancedDataGridColumn dataField=”@OnOrder”
        headerText=”On Order”/>
    </mx:columns>
  </mx:AdvancedDataGrid>   
</mx:Application>

What’s Going On 

Let’s go through the application to see what’s going on.

Import Classes and Create an XMLListCollection Variable

 import mx.collections.XMLListCollection;
 import mx.rpc.events.ResultEvent;

 [Bindable] public var salesDP:XMLListCollection;

Add an HTTPService Component to Load the Data

<mx:HTTPService id=”salesRequest” useProxy=”false” resultFormat=”e4x”
  result=”salesResultHandler(event)” url=”data/ProductSales.xml”/>

Add the AdvancedDataGrid

<mx:AdvancedDataGrid width=”100%” height=”100%”>
  <mx:dataProvider>
    <mx:HierarchicalData source=”{salesDP}”/>
  </mx:dataProvider>
  <mx:columns>
    <mx:AdvancedDataGridColumn dataField=”@Category” 
      headerText=”Category”/>
    <mx:AdvancedDataGridColumn dataField=”@Product”
      headerText=”Product”/>
    <mx:AdvancedDataGridColumn dataField=”@InStock” 
      headerText=”In Stock”/>
    <mx:AdvancedDataGridColumn dataField=”@OnOrder” 
      headerText=”On Order”/>
  </mx:columns>
</mx:AdvancedDataGrid>   

Don’t Forget to Call the HTTPService send() Method

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
  creationComplete=”salesRequest.send();”>

 

You can see the running app here (right-click to view source):

ADG_XML_HTTPService  

Hope this helps. Thanks for stopping by, and see you in the Adobe Flex Forums!

Greg

Tags: AdvancedDataGrid, HTTPService, XML, XMLListCollection

This entry was posted on Tuesday, November 18th, 2008 at 12:24 am and is filed under Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.