Kompunikacja Flex-PHP z użyciem formatu JSON (odbieranie danych)

Do korzystania z formatu JSON niezbędna będzie zewnętrzna biblioteka ActionScript 3 corelib
Jeżeli pobraliśmy niezbędne pliki, tworzymy nowy projekt i nazywamy go json.

Do katalogu libs w projekcie kopiujemy plik as3corelib.swc (katalog as3corelib-NR_WERSJI/lib w pobranej bibliotece), jeżeli we Flex Navigator nie widzymy tego pliku - odświeżamy cały projekt.

Na początek tworzymy tablę (DataGrid), w której będziemy wyświetlać dane użytkowników:

<mx:DataGrid id="usersGrid" right="10" left="10" top="10" bottom="10">
    <mx:columns>
        <mx:DataGridColumn headerText="Imię" dataField="name"/>
        <mx:DataGridColumn headerText="Wiek" dataField="age"/>
    </mx:columns>
</mx:DataGrid>

Po utworzeniu tabeli tworzymy obiekt klasy HTTPService o identyfikatorze service. Będzie on służył do porania danych z określonej lokalizacji (url), czyli w naszym przykładzie jest to
http://localhost/flex/json.php

Dodatkowo określamy jaka funkcja ma zostać wywołana po poprawnym odebraniu danych z serwera, nazwiemy ją onSuccess. Pozostało jeszcze wskazanie, że odebrane dane będą w formacie tekstowym:

<mx:HTTPService id="service"
    url="http://localhost/flex/json.php"
    result="onSuccess(event)"
    resultFormat="text" />

Dla przejrzystości przykładu nie dodajemy obsługi błędów.

Teraz trzeba zdefiniować funkcję onSuccess, w tym celu musimy utworzyć blok Script w naszej aplikacji

<mx:Script>
    <![CDATA[
    ]]>
</mx:Script>  

Blok CDATA jest konieczny, aby zawartość nie została potraktowana jako MXML.

Wewnątrz tego bloku definiujemy funkcję onSuccess, która przyjmuje jeden argument będący obiektem klasy ResultEvent. Aby kompilator wiedział co to za typ obiektu musimy zaimportować odpowiednią bibliotekę (polecenie import):

<mx:Script>
    <![CDATA[
        import mx.rpc.events.ResultEvent;

        public function onSuccess(event:ResultEvent):void
        {
        }
    ]]>
</mx:Script>

Następnie definiujemy ciało funkcji, czyli przetwarzamy dane otrzymane z serwera. W pierwszej kolejności tworzymy zmienną typu String jsonDataFromPHP i przypisujemy do niej ciąg znaków odebrany z serwera. Aby mieć pewność, że jest to String tworzymy nowy obiekt String z event.result:

var jsonDataFromPHP:String = String(event.result);

W kolejnym kroku odkodowujemy dane z formatu JSON i mapujemy je na tablicę (Array). Następnie przypisujemy do zmiennej users. Aby korzystać z obiektu JSON należy również zaimportować odpowiednie klasy z biblioteki ActionScript 3 corelib:

import com.adobe.serialization.json.JSON;
...
var users:Array = (JSON.decode(jsonDataFromPHP) as Array);

Jeżeli udało nam się otrzymać dane w formie tablicy pozostało tylko przypisanie danych do dataProvider'a  tabeli usersGrid, aby skorzystać z kolekcji tablic należy zaimportować odpowienią klasę.

import mx.collections.ArrayCollection;
...
var usersDataProvider:ArrayCollection = new ArrayCollection(users);
usersGrid.dataProvider = usersDataProvider;

Ostatecznie blok Script powinien wyglądać następująco:

<mx:Script>
    <![CDATA[
        import mx.rpc.events.ResultEvent;
        import com.adobe.serialization.json.JSON;
        import mx.collections.ArrayCollection;

        public function onSuccess(event:ResultEvent):void
        {
            var jsonDataFromPHP:String = String(event.result);
            var users:Array = (JSON.decode(jsonDataFromPHP) as Array);
            var usersDataProvider:ArrayCollection = new ArrayCollection(users);
            usersGrid.dataProvider = usersDataProvider;
        }
   ]]>
</mx:Script>

Teraz pozostało jeszcze wywołanie HTTPService, możemy to zrobić za pomocą atrybutu creationComplete. Atrybut ten definiuje jaka metoda/funkcja zostanie wykonana po zakończeniu renderowania aplikacji. W naszym przypadku jest to metoda send() obiektu service:

creationComplete="service.send()"

Oto kod aplikacji w całości:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute"
creationComplete="service.send()">
<mx:Script>
    <![CDATA[
        import mx.rpc.events.ResultEvent;
        import com.adobe.serialization.json.JSON;
        import mx.collections.ArrayCollection;
    
        public function onSuccess(event:ResultEvent):void
        {
            var jsonDataFromPHP:String = String(event.result);
            var users:Array = (JSON.decode(jsonDataFromPHP) as Array);
            var usersDataProvider:ArrayCollection = new ArrayCollection(users);
            usersGrid.dataProvider = usersDataProvider;
        }
    ]]>
</mx:Script>
<mx:DataGrid id="usersGrid" right="10" left="10" top="10" bottom="10">
      <mx:columns>
            <mx:DataGridColumn headerText="Imię" dataField="name"/>
            <mx:DataGridColumn headerText="Wiek" dataField="age"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:HTTPService id="service" 
            url="http://localhost/flex/json.php"
            result="onSuccess(event)"
            resultFormat="text" />
</mx:Application>

Teraz pozostało jeszcze stworzenie pliku json.php. Plik ten jest bardzo prosty jedynie na uwagę zasługuje linia:

echo json_encode($users);

Następuje tutaj zakodowanie tablicy do formatu JSON. Od wersji PHP 5.2.0 jest to funkcja wbudowana i na dzień dzisiejszy dostępna na większości serwerów. Jeżeli nie mamy dostępnej takiej funkcji wbudowanej możemy skorzystać z zewnętrznej biblioteki.

Kod skryptu json.php

$users = array(
    array('name'=>'Jan','age'=>'34'),
    array('name'=>'Zofia','age'=>'23'),
    array('name'=>'Anna','age'=>'31'));

echo json_encode($users);
?>