Christian Pfeil - New Media Blog

Wer häufig mit Webservices, SOAP, XML und dergleichen arbeitet, für den ist es oft wünschenswert sich nicht allzu lange damit aufzuhalten wie die Datenquelle mit der Applikation verbunden werden kann, sondern mehr Zeit für die eigentliche Implementierung der Logik zu haben. Was mit Flash noch eine Qual war, geht mit Flex in wenigen Minuten.

Von der Datenquelle zur fertigen Applikation

Den Weg den Daten in eine Applikation “gehen” müssen, kann man mit der Herstellung eines Diamanten vergleichen. Nach der Anlieferung des Rohmaterials erfolgt der Schliff und die Einorndung in Qualitätsstufen. Im Jargon der Anwendungsentwicklung ist der “Schliff” die Validierung der Daten und die “Einordnung” ist die dynamische Bindung (engl. binding) an ein beliebiges Objekt der Applikation.

Ein solches Objekt kann zum Beispiele eine Flex Komponente sein. In diesem Beispiel verwende ich eine einfache BarChart Komponente um zu zeigen wie leicht das Prinzip der Datenbindung in Flex funktioniert.

Das Beispiel – ein Statistik-Tool

In diesem Tutorial möchte ich zeigen wie man eine AIR Anwendung erstellt, die per HTTP Service auf ein kleines PHP Skript zugreift, um so Daten aus einer mySQL Datenbank in einen Chart verwandelt.

Als Beispiel möchte ich ein kleines Statistik-Tool entwerfen, dass mit Hilfe von AIR die ausgewerteten Daten auf dem Desktop bringt. In meinem Beispiel gehe ich von einer fiktiven Webandwendung aus, die in vier Bereiche unterteilt ist. Ein PHP Skript schreibt in eine mySQL Datenbank zu welcher Zeit und in welchen Bereich sich ein Benutzer eingeloggt hat.

1. Aufbau der mySQL Datenbank

Mit Hilfe eines zweiten kleinen PHP Skriptes werden die Daten aus der mySQL Datenbank ausgewertet und per XML ausgegeben.

Die Struktur der mySQL Datenbank sieht so aus:

Die Struktur der mySQL Datenbank sowie Testdaten und das passende PHP können am Ende des Tutorials heruntergeladen werden (Bitte darauf achten das die Parameter zum Verbinden auf die mySQL Datenbank jeweils an euren Host angepasst werden müssen).

2. Das PHP Skript

Das “passende” PHP Skript gibt folgendes XML aus:

In der Ausgabe steht, gruppiert nach Datum, wieviele Leute sich in einem bestimmten Bereich eingewählt haben. Die eigentliche Logik steckt demnach im Backend, auf mySQL Ebene. Über mySQL Queries werden die Daten so vorbereitet das die Flex Anwendung diese einfach nur aufnehmen muss und die Applikation keine Performance zur Optimierung der Daten clientseitig verschwendet.

3. Die Flexanwendung

Da XML geradezu prädestiniert dazu ist in Flex weiterverwendet zu werden, dauert die Erstellung der eigentlichen Anwendung wirklich nur Minuten. In diesem Beispiel verwende ich Flex 3. Darin integriert ist bereits die Möglichkeit eine AIR Desktop Anwendung zu erstellen.

Besonders beeindruckend ist, dass die AIR Applikation in meinem Beispiel identisch auf eine Webapplikation portiert werden kann. D.h. per Copy & Paste gelangt der AIR Code direkt in ein Webapplikations Projekt. In diesem Beispiel verwende ich die Option “Desktop application”. Meine Flex Anwendung läuft demnach, dank des Adobe AIR Frameworks, direkt auf dem Desktop. Die Anwendung wird direkt über Flex Builder 3 erstellt. Zusatzsoftware ist nicht notwendig.

Kernstück der Applikation ist der HTTPService (Zeile 184). Durch die Methode CallHTTPService() (Zeile 127) wird der Service angestossen, sendet über eine URL Parameter an das PHP Skript und wirft ein Event über die Methode HTTPResult() sobald die Antwort des Servers ankommt. Die Zeitspanne die im integrierten Kalendermodul des GUI vom Benutzer eingestellt wird, wird automatisch als Parameter mit an das PHP Skript übertragen.

Besonders interessant wird es aber bei der Chart Komponente selbst, denn hier spiegelt sich auf jeder der Achsen im Diagramm quasi 1:1 die Datenstruktur des XML, dass ich als Antwort vom Server erhalte, wieder.

So sieht die fertige Applikation in Aktion aus:

Die “Bindung” der Daten an die BarChart und PieChart Komponente, hat zur Folge das beide Komponenten automatisch informiert werden sobald Daten im dataProvider Objekt sich ändern und sich automatisch quasi von selbst updaten.

Alle weiteren Details stehen mit ausführlichen Kommentaren direkt im Quellcode meiner Applikation. Die fertig kompilierte Applikation kann ebenfalls hier heruntergeladen werden. Sie verbindet sich mit meinem Server und zieht ein paar Testdaten (Testdaten sind in der Zeit vom 12.11.07 bis 23.11.07 als Dummy Daten vorhanden).

*Die Applikation benötigt das Adobe AIR Runtime Beta 2. Die Runtime EXE kann hier direkt heruntergeladen werden (ca. 9MB. Windows).

Der Beitrag wurde am Mittwoch, den 21. November 2007 um 16:14 Uhr veröffentlicht und wurde unter Flash, Flex & AIR, Journal abgelegt. du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.