CodeBlog.ch

Allgemein

Schon länger liest man öfters die drei Buchstaben RIA. Mit diesem, ich nenne es mal, Modewort entstanden auch verschiedene mehr oder weniger neue Technologien. Einige, wie zum Beispiel AJAX basieren eigentlich komplett auf älteren Technologien, anderen wie zum Beispiel Flex verwenden das ebenfalls nicht mehr neue Flash.

Bei Flex ist allerdings die Art und Weise wie man schlussendlich zu einer SWF-Datei kommt stark abweichend von dem was alteingesessene Flash Freunde sich gewohnt sind.

Bei Adobe gibt es eine schöne Übersicht, über die Adobe RIA Technologien. http://www.adobe.com/resources/business/rich_internet_apps/

Auf dieser Grafik ist auch zu erkennen, dass das eigentlich Thema dieses Artikels nur ein Framework ist, Adobe aber eigentlich vorsieht, Flex Projekte mit dem Flex Builder zu erstellen. Flex Builder ist ein auf Eclipse basierendes Werkzeug um Flex Anwendungen zu entwickeln. Im Gegensatz zum Flex SDK aber nicht gratis! Und da ich persönlich immer gerne zuerst die Technologie verstehe, wollte ich von ganz vorne beginnen, also nur mit dem freiverfügbaren Flex SDK.

Die Vorbereitungen

Natürlich benötigen wir das Flex SDK. Dies finden wir zum Beispiel hier: http://www.adobe.com/go/flex3_sdk. Wer will kann auf dieser Seite auch eine 60-Tage Testversion des Flex Builders herunterladen, wir scrollen aber als erstes mal weiter runter und holen uns das Flex SDK.

Das Flex SDK ZIP entpacken, z.B. nach c:\flex

Da wie erwähnt Flash eine der grundlegenden Technologie ist, brauchen wir einen Flash Player. Ich geh aber davon aus, dass dies bereits installiert ist.

Hello World

Wie könnte ich anders als zu Beginn ein kleines Hello World zu schreiben. Bei Flex gibt es zwei Dinge die zu diesem Weg führen. Einerseits gibt es ActionScript welches wir schon von Flash kennen und es gibt das neue MXML welches wie unschwer zu erkennen, eine XML Erweiterung ist. Da ich wenn es um GUIs geht ein Freund von XML bin werde ich den ActionScript Teil mal weglassen.

Hier mal ein erstes MXML Beispiel ohne Worte:

1
2
3
4

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">
   <mx:Label text="Hello from CodeBlog.ch!"/>
</mx:Application>

Abspeichern unter HelloWorld.mxml.

Anschliessend öffnen wir ein CMD-Fenster und lassen uns eine SWF Datei erstellen, indem wir mit dem Befehl mxmlc die vorher erstellte Datei übergeben:

Und schon haben wir unsere erste SWF Datei. Die passende HTML Datei schreiben, per Doppelklick starten (geht nicht immer) oder einfach wieder löschen.

Datenaustausch per HTTP

Nach der anspruchsvollen HelloWorld Aufgabe wollen wir Daten von einem Webserver auslesen. Dazu hab ich eine PHP Datei geschrieben die den Wert des Parameters “input” ausgibt (echo $_REQUEST[‘input’]).

Flex stellt uns für zahlreiche Dinge wie HTTP oder Webservice Anfragen Klassen zur Verfügung.

Wir beginnen gleich wieder mit dem Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">
 
   <mx:Script>
   <!--[CDATA[
   import mx.controls.Alert;
   import mx.rpc.events.ResultEvent;
 
   private function sendHttpRequest(event:ResultEvent):void
   {
      Alert.show(event.result.toString(), "Content");
   }
   ]]-->
</mx:Script>
 
<mx:HTTPService id="http" url="http://www.codeblog.ch/flex/echo.php" showBusyCursor="true" result="sendHttpRequest(event)"/>
<mx:Button id="httpRequest" label="CodeBlog HTTP Request" click="http.send({input: 'Hello CodeBlog!'});" />
 
</mx:Application>

Wir haben nun eine Script Sektion (mx:Script) mit einem CDATA Block. Auch hier sieht man wieder die Ähnlichkeit zu XML. Wir definieren lediglich eine Funktion “sendHttpRequest”, die die Anfrage ausführt und das Ergebnis in einer Dialog Box ausgibt.

Mit mx:HTTPService definieren wir die Parameter für unsere HTTP Anfrage. Neben der Adresse geben wir hier lediglich an dass wir gerne einen “Busy-Cursor” hätten. Dann noch ein Button der die Funktion startet und fertig! Damit können wir bereits HTML Daten auslesen.

Kleiner Hinweis am Rande, wer Daten von “fremden Servern” auslesen will, sollte sich bezüglich crossdomain.xml schlau machen.