Pagination + DataGrid + Service = PaginatedDataGrid v0.1 [english]

damian — Fri, 19 Feb 2010 17:57:30 +0000

Lately I was building an backend (admin-side) application in Flex. Most of the data was presented in data grids.

However, when working with services (PHP in my case) it is risky to load all data to the DataGrid. It may lead to an application crash, ie. when we work on 1000′s of items.

Therefore I decided to create the component that handles pagination itself – it is similar to ExtJS’ data grid (however much simpler :) ).

The example is below… (You can view source by right-clicking on application)

This components dispatches 2 events (for now):

when page is changes
when data is sorted

I also added DATA_FILTER event, but I do not have idea how to include the filtration form in the component GUI.

To download source click here.

Any comments would be welcomed.

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

Piotr Wierzgała — Sun, 25 Oct 2009 14:31:02 +0000

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

$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;
}
}
}
?>

Flexmaniak.pl » PHP

Pagination + DataGrid + Service = PaginatedDataGrid v0.1 [english]

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