Przesyłanie danych z Flexa do PHP za pomocą XMLa

10-25-2009 przez Piotr Wierzgała Zostaw odpowiedź »

Nie samym Flexem i ActionScriptem programista żyje dlatego czasem musi zwrócić się do innych technologii. W komunikacji na linii Flex – PHP z pomocą przychodzą nam XML, JSON i AMFPHP. W tym wpisie zajmiemy się pierwszym z trójcy czyli XMLem.

FLEX 3.0, PHP 5.3.0

W celu zaprezentowania mechanizmu komunikacji na linii Flex – PHP za pomocą XMLa posłużymy się prostą aplikacją, która będzie posiadała dwa pola tekstowe i jedną listę oraz przycisk wysyłający dane z tych komponentów do skryptu PHP.

Na początek stworzymy graficzny interfejs naszej apliakcji.

Będziemy potrzebować usługi HTTP przesyłającej dane do skryptu PHP. Usługa HTTP będzie mieć dwa zdarzenia “result” i “fault”, z których każde będzie wyświetlać alert boxa odpowiednio z rezultatem działania skryptu i informacją o niepowodzeniu w wykonaniu usługi.

<mx:HTTPService id="httpService" resultFormat="text" url="http://localhost/phpScript.php" result="httpServiceResult(event)" fault="httpServiceFault(event)"/>

Dalej zgodnie z założeniami dodamy dwa pola tekstowe.

<mx:Label text="TextInput 1:"
 x="50" y="12"/>
<mx:TextInput id="textInput1" text="textInput1"
 x="134" y="10" width="98"/>
<mx:Label text="TextInput 2:"
 x="50" y="42"/>
<mx:TextInput id="textInput2" text="textInput2"
 x="134" y="40" width="98"/>

Edytowalna listę wypełnioną przykładowymi danymi. DataProvider będzie znajdował się w zewnętrznym pliku ActionScript.

<mx:List dataProvider="{listDataProvider}" editable="true"
x="50" y="70" width="183" height="156"/>

Oraz przycisk wysyłający dane do pliku PHP.

<mx:Button label="Wyslij" click="send()"
x="50" y="234" width="183"/>

Na koniec jeszcze musimy dodać referencję do pliku z kodem ActionScript i pierwszą część pracy mamy za sobą.

<mx:Script source="FLEX_XML_PHP_Script.as" />

A tak wygląda to w całości.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script source="FLEX_XML_PHP_Script.as" />
    <mx:HTTPService id="httpService" resultFormat="text" url="http://localhost/phpScript.php" result="httpServiceResult(event)" fault="httpServiceFault(event)"/>
    <mx:List dataProvider="{listDataProvider}" editable="true"
        x="50" y="70" width="183" height="156"/>
    <mx:Button label="Wyslij" click="send()"
        x="50" y="234" width="183"/>
    <mx:TextInput id="textInput1" text="textInput1"
        x="134" y="10" width="98"/>
    <mx:TextInput id="textInput2" text="textInput2"
        x="134" y="40" width="98"/>
    <mx:Label text="TextInput 1:"
        x="50" y="12"/>
    <mx:Label text="TextInput 2:"
        x="50" y="42"/>
</mx:Application>

Drugi etap na naszej drodze to zbudowanie kodu ActionScript, który to wszystko obsłuży.

Tworzymy DataProvider z przykładowymi danymi dla naszej listy.

[Bindable] private var listDataProvider:ArrayCollection = new ArrayCollection(["A","B","C","D","E","F"]);

Definiujemy funkcję wysyłającą dane do skryptu PHP. Na początku deklarujemy zmienną, która będzie przechowywać nasz kod XML i ustawiamy jej węzeł główny na .

private function send():void {
var xml:XML = new XML("");

Wartość pierwszego pola tekstowego posłuży nam do ustawienia atrybutu o nazwie textInput1 dla węzła

xml.@textInput1 = textInput1.text;

Wartość drugiego pola tekstowego użyjemy do nadania wartości nowemu węzłowi dodanemu do naszej struktury XML za pomocą operatora kropki.

xml.textInput2 = textInput2.text;

W celu połączenia danych z listy w ciąg XML użyjemy metody encodeValue klasy SimpleXMLEncoder. Metoda encodeValue przyjmuje trzy parametry: obiekt do serializacji, nazwę węzła w którym umieści zserializowany obiekt oraz zmienną typu XMLDocument, w której zostanie zapisany wynikowy kod XML. Nowy węzeł do naszej struktury XML dodamy za pomocą metody appendChild.

var qName:QName = new QName("list");
var xmlDocument:XMLDocument = new XMLDocument();
var simpleXMLEncoder:SimpleXMLEncoder = new SimpleXMLEncoder(xmlDocument);
var xmlNode:XMLNode = simpleXMLEncoder.encodeValue(listDataProvider.source, qName, xmlDocument);
var list:XML = new XML(xmlDocument.toString());
xml.appendChild(list);

Na koniec dodajemy nasz kod XML do zmiennej typu Object, która zostanie przekazana do skryptu PHP.

var object:Object = new Object();
object.xml = xml.toXMLString();
httpService.send(object);

Całość prezentuje się następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import mx.collections.ArrayCollection;
import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.xml.SimpleXMLEncoder;

[Bindable] private var listDataProvider:ArrayCollection = new ArrayCollection(["A","B","C","D","E","F"]);

private function send():void {
var xml:XML = new XML("");

//Dodanie atrybutu za pomocą .@
xml.@textInput1 = textInput1.text;

//Dodanie węzła za pomocą .
xml.textInput2 = textInput2.text;

//Dodanie węzła za pomocą .appendChild
var qName:QName = new QName("list");
var xmlDocument:XMLDocument = new XMLDocument();
var simpleXMLEncoder:SimpleXMLEncoder = new SimpleXMLEncoder(xmlDocument);
simpleXMLEncoder.encodeValue(listDataProvider.source, qName, xmlDocument);
var list:XML = new XML(xmlDocument.toString());
xml.appendChild(list);

//Wyslanie XML'a do skryptu PHP
var object:Object = new Object();
object.xml = xml.toXMLString();

httpService.send(object);
} //send

private function httpServiceResult(event:ResultEvent):void {
Alert.show(event.result.toString(),"HTTP Service Result");
} //httpServiceResult

private function httpServiceFault(event:FaultEvent):void {
Alert.show(event.fault.faultString,"HTTP Service Fault");
} //httpServiceFault

Pozostaje nam jeszcze tylko napisać prosty skrypt PHP, który przetworzy i wyświetli otrzymany kod XML. Ponieważ klasa XMLReader jest opisana w manualu PHP dlatego daruję sobie rozkład poniżeszego skryptu na czynniki pierwsze i zamiast tego odeślę do wspomnianego źródła: XMLReader PHP Manual

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
    $xml = new XMLReader();
    $xml->XML(stripslashes($_REQUEST["xml"]));

    while($xml->read()) {
        if($xml->nodeType == XMLReader::ELEMENT) {
            switch($xml->name) {
                case("root"):
                    echo "TextInput 1: ".$xml->getAttribute("textInput1")."\n";
                break;
                case("item"):
                    $xml->read();
                    echo "item: ".$xml->value."\n";
                break;
                case("textInput2"):
                    $xml->read();
                    echo "TextInput 2: ".$xml->value."\n";
                break;
            }
        }
    }
?>

Napisane wFlex i PHP

Tags:

Możesz śledzić odpowiedzi dla tego wpisu przez Kanał RSS 2.0. Możesz zostaw odpowiedź , lub trackback ze swojej strony.

Reklama

Dodaj komentarz

Flexmaniaks on Facebook