2 Replies Latest reply on Oct 6, 2006 4:28 AM by Ham0

    HTTPService Binding Samples

    Ham0 Level 1
      Struggled with this for far to long so I figured I'd post my findings to help others.

      Problem: How to use an external XML file as a dataProvider and also take advantage of the fillter and sort capabilities associated with an ArrayCollection.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="catRequest.send()" >
      <mx:Script>
      <![CDATA[
      import mx.rpc.events.ResultEvent;
      import mx.collections.*;
      import mx.rpc.http.HTTPService;
      import mx.utils.ArrayUtil;

      [Bindable]
      private var myAC:ArrayCollection
      private function bindXML(event:ResultEvent):void{
      myAC = event.result.root.thing;
      }
      ]]>
      </mx:Script>
      <mx:HTTPService id="catRequest" url="../catalog.xml" useProxy="false" result="bindXML(event)" />
      <mx:ArrayCollection id="mxAC" source="{ArrayUtil.toArray(catRequest.lastResult.root.thing)}"/>

      <!-- Bind the HTTPService result directly to the Grid -->
      <mx:DataGrid id="direct" dataProvider="{catRequest.lastResult.root.thing}" left="10" top="10" width="32%" bottom="10">
      <mx:columns>
      <mx:DataGridColumn headerText="type" dataField="typ"/>
      <mx:DataGridColumn headerText="priority" dataField="pri"/>
      <mx:DataGridColumn headerText="status" dataField="sts"/>
      </mx:columns>
      </mx:DataGrid>

      <!-- Use HTTPService's result event to call a function that assigns the result to an AC, then Bind the AC to the Grid -->
      <mx:DataGrid id="byevent" top="10" width="32%" horizontalCenter="0" dataProvider="{myAC}" bottom="10">
      <mx:columns>
      <mx:DataGridColumn headerText="type" dataField="typ"/>
      <mx:DataGridColumn headerText="priority" dataField="pri"/>
      <mx:DataGridColumn headerText="status" dataField="sts"/>
      </mx:columns>
      </mx:DataGrid>

      <!-- Use ArrayUtil.toArray to assign the HTTPService's result to an AC, then Bind the AC to the Grid -->
      <mx:DataGrid id="byutil" right="10" top="10" width="32%" dataProvider="{mxAC.getItemAt(0)}" bottom="10">
      <mx:columns>
      <mx:DataGridColumn headerText="type" dataField="typ"/>
      <mx:DataGridColumn headerText="priority" dataField="pri"/>
      <mx:DataGridColumn headerText="status" dataField="sts"/>
      </mx:columns>
      </mx:DataGrid>

      </mx:Application>


      The first example is the most straightforward and frequently sighted in the Flex documentation. However, since the result isn't an ArrayCollection we can't use sorting and filtering functions associated with an ArrayCollection.

      The second method is the most complicated to implement (not mentioned in the Flex docs), but produces an ArrayCollection without a root node. Children of the ArrayCollection are the XML items, not the XML root, so directly referencing the AC as a DataProvider produces the expected list.

      The third method is mentioned in the Flex docs but all examples I found were incomplete (did not include the getItemAt(0) method). Converting the HTTP result to an ArrayColledction via ArrayUtil.toArray retains the XML root node. Directly referencing the AC as shown in the documentation produces a 1 item list with no data. To bypass the root node and list the items under root, you must attach.getItemAt(0) to the AC reference.

      Hope that's helpful.
        • 1. Re: HTTPService Binding Samples
          cg22c
          Ham0, it's very helpful to have this all in 1 place.

          I'm a flex noob and I had a question about event.result.root.thing ... what am I supposed to put in place of 'thing'? I'm getting bind errors at runtime.

          Thanks!
          • 2. Re: HTTPService Binding Samples
            Ham0 Level 1
            root: your top level XML object that wraps all the other objects. Using a database metaphor, root would be like a table.

            thing: whatever your next nested XML tag is. Again with a database metaphor, thing would be like a row in the table.

            data: the next level of tags are like columns in the table. With Flex, this set of tags it what you typically assign to columns in a dataGrid, fields in a list, etc.

            A 2 record sample of XML using these tag would look like...

            <root>
            <thing>
            <data>some data</data>
            </thing>
            <thing>
            <data>some more data</data>
            </thing>
            </root>

            Of course the XML nesting can be alot more complicated. Thing might contain OtherThings and so on. And of course the tag names don't matter so long as what you use in Flex matches what's used in your XML. Your "root" might be "messages". Your "thing" might be "message".