Komunikacja Flex-PHP (wysyłanie danych na serwer)

Czasem zdarza się, że zachdzi potrzeba zapisania danych z aplikacji we Fleksie do bazy danych lub pliku. Jeżeli potrafimy pobrać dane za pomocą obiektu HTTPService, nie powinno nam to sprawić problemu. W celu wysłania danych tworzymy wspomniany już obiekt HTTPService

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

W odróżnieniu do pobierania danych ustwiamy metodę (atrybut method) na POST (domyślnie GET). Podobnie jak przy pobieraniu danych definiujemy adres skryptu (http://localhost/flex/post.php), format w jakim będzie zwrot z serwera (text) oraz metodę jaka zostanie wywołana po poprawnym przesłaniu danych. Możemy dodatkow określić atrybut fault, który wskaże jaka metoda będzie wywołana w przypadku błędu komunikacji.

Tworzymy sekcję Script w aplikacji, gdzie znajdą się niezbędne funkcje.

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

Teraz definiujemy funkcję, która wyśle dane na serwer. Nazwijmy ją sendForm, stworzymy również obiekt data, który będziemy wysyłać na serwer. Zawiera on 2 właściwości name i age.

public function sendForm():void
{
    // wysyła żądanie                
    var data:Object = {name:'Michał',age:'29'};
    service.send(data);
}

Teraz musimy wywołać w jakiś sposób funkcję sendForm najłatwiej zrobić to po kliknięciu w przycisk (atrybut click).

<mx:Button label="Wyślij" id="send" click="sendForm()"/>

Musimy jeszcze obsłużyć zwrot z serwera, czyli zdefiniować ciało funkcji onSuccess, bo tak nazwaliśmy ją w obiekcie service. Funkcja onSuccess przyjmuje jeden parametr obiekt ResultEvent dlatego też musimy zaimportować odpowiednie pliki. Zwrot z serwera wyświetlimy na ekranie za pomocą komponentu Alert dlatego też go importujemy.

import mx.controls.Alert;
import mx.rpc.events.ResultEvent;

public function onSuccess(event:ResultEvent):void
{
    Alert.show(event.result.toString());
}

Całość kodu powinna wyglądać następująco:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.events.ResultEvent;
            
            public function onSuccess(event:ResultEvent):void
            {
                Alert.show(event.result.toString());
            }
            
            public function sendForm():void
            {
                // wysyła żądanie
                var data:Object = {name:'Michał',age:'29'};
                service.send(data);
            }
            
        ]]>
    </mx:Script>
    <mx:Button label="Wyślij" id="send" click="sendForm()"/>
    <mx:HTTPService id="service" 
        url="http://localhost/flex/post.php"
        result="onSuccess(event)"
        method="POST"
        resultFormat="text" />
</mx:Application>

Na zakończenie tworzymy plik post.php

<?php
  echo print_r($_POST);
?>

Testując aplikację powinniśmy otrzymać zawartość zmiennej $_POST wyświetloną przez Alert.

Dla poprawności powinniśmy jeszcze dodać wspomnianą już obsługę błędów, dodajemy atrybut fault do obiektu service.

result="onSuccess(event)"
fault="onFault(event)"
method="POST"

Oraz definujemy funkcję onFault, która przyjmuje parametr typu FaultEvent, więc musimy zaimportować odpowiednie biblioteki.

import mx.rpc.events.FaultEvent;

public function onFault(event:FaultEvent):void
{
    Alert.show("Nie udało się nawiązać połączenia");
}