[flexcoders] Datagrid pagination w/ httpService

[iloveyouwisconsin]

As you can surmise I am new to the flex world so this is probably a 
stupid easy question that I've been struggling with for the past 
couple of hours. 

Using an example from http://www.boyzoid.com/flexdemos/pagableAC/main.html I 
was able to 
generate pagination in a datagrid. My problem now is I don't have a 
clue how to  change the dataprovider to my httpService, which is xml.

The code from boyzoid is below. My xml is in the format:

<container>
 <entry>
   <black>black<\black>
   <white>white<\white>
 <\entry>
<\container>


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; 
layout="vertical" xmlns:bz="com.boyzoid.*" 
creationComplete="initApp()"  viewSourceURL="srcview/index.html">
 <mx:HTTPService id="blackwhite" url="http://localhost/index.php"; 
fault="httpFaultHandler(event)" result="httpResultHandler(event)"/>     
<mx:Script>
    <![CDATA[
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent; 
    
import com.boyzoid.PagableArrayCollection.PagableArrayCollection
import mx.controls.Alert;
[Bindable]
public var myTest:PagableArrayCollection = new PagableArrayCollection(
            [{label:"AK", data:"Alaska"},
                {label:"AL", data:"Alabama"},
                {label:"AR", data:"Arkansas"},
                {label:"AZ", data:"Arizona"},
                {label:"CA", data:"California"},
                {label:"CO", data:"Colorado"},
                {label:"CT", data:"Connecticut"},
                {label:"DC", data:"District of Columbia"},
                {label:"DE", data:"Delaware"},
                {label:"FL", data:"Florida"},
                {label:"GA", data:"Georgia"},
                {label:"HI", data:"Hawaii"},
            ]);

        public function initApp():void{
          myTest.filterFunction = filterStates;
        }
        
        public function ItemsPerPage(value:Number):void{
            myTest.itemsPerPage = value as Number;
             
        }
        
        private function filterStates(item:Object):Boolean{

               
if(item.data.toLowerCase().search(search.text.toLowerCase()) == -1){
                   return false
               }              
               return true              
           }
         
    ]]>
</mx:Script>

    <mx:VBox y="10" width="50%" horizontalCenter="0" 
horizontalAlign="center">
        <mx:HBox width="100%" horizontalAlign="center">
            <mx:Button label="&lt;&lt;" click="myTest.pageDown()"/>
            <mx:Button label=">>" click="myTest.pageUp()"/>
        </mx:HBox>
        <mx:Text x="532" y="28" text="Page {myTest.currentPage} of 
{myTest.pages}"/>
        <mx:HBox width="100%" horizontalAlign="center">
            <mx:TextInput text="20" id="items" textAlign="center" 
change="ItemsPerPage(int(items.text))" restrict="0-9"   width="40" />
            <mx:Text text="items per page"/>
        </mx:HBox>
        <mx:HBox>
        <mx:FormItem label="Search State Name">
            <mx:TextInput id="search" change="{myTest.refresh()}" />
        </mx:FormItem>
            
        </mx:HBox>
    </mx:VBox>
    <mx:DataGrid dataProvider="{myTest}" width="200" 
horizontalCenter="0" bottom="15" top="100"/>
</mx:Application>