Filling Datagrid from remote http service

Question

Hi!

I am trying my first flex application. And have a problems adding data from xml http service to datagid.

My xml file looks like this:

<players>

  <player>
    <name>test</name>
    <status>F</status>
    <claimed>1</claimed>
  </player>

  <player>
    <name>meta</name>
    <status>F</status>
    <claimed>1</claimed>
  </player>
</players>

First I tried to fill the data in a raw way, so created mxml tag for HTTP service, and added handlers.

But very soon I realized that main application file became unreadable (because of huge amount of code), so I decided to organize it some way.

So decided to replace services with a separate as classes.

My new code looks like this:

MXML:

  <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
         layout="absolute" creationComplete="main()"  height="756" borderColor="#FFFFFF" width="950" top="10" left="10" horizontalAlign="left" verticalAlign="top" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FCFCFC, #FCFCFC]">

        <mx:Panel width="900" height="727" layout="absolute" title="Игра ГО" horizontalAlign="center" horizontalCenter="0" top="10">
        <mx:Script>
         <![CDATA[

          import goclient.ListOfPlayers;
          import goclient.usersList;
          import goclient.Tester;
          import mx.controls.Alert;
          // And makes periodical requests to the server
          [Bindable]
          public var users:ListOfPlayers;
          [Bindable]
           public var test:Tester; 

          public function main():void{
           test = new Tester();
           users = new ListOfPlayers();



          }   

         ]]>
        </mx:Script>


         <mx:DataGrid doubleClickEnabled="true" dataProvider="{users.getPlayersList()}" 
          x="10" y="157" width="860" height="520" id="userList">
          <mx:columns>
           <mx:DataGridColumn dataField="claimed" headerText="Was claimed" width="25"/>
           <mx:DataGridColumn dataField="name" headerText="Name of the player"  />
           <mx:DataGridColumn dataField="status" headerText="Status (Free or Busy)" />
          </mx:columns>
         </mx:DataGrid>

And the service class:

ListOfPlayers.as

package goclient
{
    import flash.utils.Timer;
    import mx.controls.Alert;
    import mx.collections.ArrayCollection;
    import mx.rpc.events.ResultEvent;
    import mx.rpc.http.mxml.HTTPService;

    public class ListOfPlayers
    {
     public var usersListService:HTTPService;
     private var minTimer:Timer = new Timer(100000, 0); 
     private var playersData:ArrayCollection; 
     private var person:currentPerson; 

     public function ListOfPlayers()
     {
      usersListService = new HTTPService();
      usersListService.url = "http://127.0.0.1:8000/go/active/";
      usersListService.addEventListener(ResultEvent.RESULT, resultHandler);
      //Alert.show("Here");
      sendData(); 
      //minTimer.addEventListener(TimerEvent.TIMER, sendData);
      //minTimer.start();

     }

     public function getResp():String
     {
      return "Resr";
     }

     public function resultHandler(event:ResultEvent):void
     {
      //person = new currentPerson(event.result.current.username, event.result.current.img, event.result.current.rank);
      playersData = event.result.players.player;
      Alert.show("resh");

     }
     public function sendData():void
     {
      usersListService.send();
     }

     public function getPlayersList():ArrayCollection
     {
      Alert.show(playersData.toString());
      return playersData;
     }

    }
}

The problem is that nothing is shown in the datagrid

I am just a beginner, so please advice what did I wrong with the class

Answer 1

The result function (in ListOfPlayers class) should give the list of players and not the function that is calling the webservice.

What you could do is add this in server class:

[Bindable]
public var playersData:ArrayCollection;

and in your view add also this variable with the bindable tag and set the value add this line in main(): playersData = users.playersData;

then the datagrid dataprovider is "{playersData}"

this should work. But with XML list it is always a bit difficult to know how deep you are in the tree ;)