Macromedia Flex - Universität Osnabrück

Transcrição

Macromedia Flex
Markus Moormann
Universität Osnabrück
Macromedia Flex, oder Adobe Flex, ist ein OpenSource Framework zum erstellen und pflegen
von so genannten Rich Internet Applications (RIA), welche auf allen Rechnern und
Betriebssystemen auf denen das Flash-Plugin installiert ist, mittels eines Browsers benutzt werden
können und sowohl den Programmieren als auch den Benutzern viele neue Möglichkeiten bietet.
Inhaltsverzeichnis
1 Einleitung................................................................................................................................................... 2
1.1 MXML................................................................................................................................................. 2
1.2 ActionScript ....................................................................................................................................... 2
2 Programmieren mit Flex...........................................................................................................................
2.1 Flex Builder........................................................................................................................................
2.2 Hello, World!.......................................................................................................................................
2.3 States and Effects..............................................................................................................................
2.4 AMFPHP............................................................................................................................................
2.4.1 Gästebuch................................................................................................................................
2.5 Flex Beispiele.....................................................................................................................................
2.6 AIR.....................................................................................................................................................
3
3
5
7
9
9
14
17
3 Zusammenfassung.................................................................................................................................... 19
3.1 Literatur.............................................................................................................................................. 19
1 Einleitung
2
1 Einleitung
Flex
Macromedia Flex wurde im März 2004 von Macromedia zum ersten Mal auf den Markt gebracht. Im Dezember
2005 übernahm Adobe Macromedia und Macromedia Flex wurde zu Adobe Flex. Adobe entwickelte Flex
konsequent weiter, sodass es seit dem 28.02.2008 bereits die Version 3.0 gibt, in der es große Neuerung gab,
auf die ich später noch eingehen werde. Im wesentlichen ist Adobe Flex ein Framework bestehend aus dem
Software Development Kit(SDK), dem "Flex Builder", dem "LiveCycle Data Service" und den "Flex Charting
Komponenten". Das SDK ist seit der Version 2.0 offiziell als OpenSource unter der MPL eingestuft und kann
von jedem genutzt und verändert werden. Der "Flex Builder" in der Version 3 ist als Trial verfügbar und 60
Tage voll nutzbar. Der "LiveCycle Data Service" und die "Flex Charting Komponenten" sind nicht frei verfügbar.
Anwendungsmöglichkeiten
Adobe Flex wird im wesentlich dazu eingesetzt um so genannte Rich Internet Applications (RIA) zu erstellen,
welche im Quellcode aus MXML- und ActionScript-Code zu einem Flash Video kompiliert werden. Eine weitere
Möglichkeit Flex einzusetzen gibt es seit der Version 3.0. Hier kann man mittels der 'Adobe Integrated Runtime
(AIR)', welche man auf seinem PC installieren muss, Anwendungen, die für das Web geschrieben sind auch
für den Desktop benutzen, indem nur zwei Zeilen Code verändert werden müssen. Adobe AIR stellt sich selbst
die Aufgabe "to combine best of web with best of desktop".
1.1 MXML
MXML ist die Sprache, die benutzt wird, um eine Flex Anwendung zu programmieren. Sie wurde zusammen
mit Flex im Jahre 2004 von Macromedia entwickelt und ist eine auf XML basierende, deklarative Sprache, wie
zum Beispiel auch HTML. Für viele der Entwickler ist MXML ein Akkronym für Magic eXtensible Markup
Language. An vielen Stellen wird dies aber eher als ein Backronym bezeichnet. Wahrscheinlich kommt das
MX eher von den von Macromedia veröffentlichen Produkten, wie zum Beispiel Macromedia Studio MX.
1.2 ActionScript
ActionScript ist ein weiterer wichtiger Bestandteil um eine Flex Anwendung zu entwickeln. Seit Flex 2.0 wird
ActionScript 3 verwendet, welches eine völlig Objektorientierte Sprache darstellt. Um ActionScript Code
auszuführen wird die so genannte 'ActionScript Virtual Machine 2' (AVM2) benötigt, die jedoch mit dem
Flash-Plugin automatisch mitgeliefert wird. Desweiteren basieren alle in MXML verfügbaren Komponenten auf
ActionScript Klassen, die man aufgrund der OpenSource Lizenz jederzeit auch in ihrem Verhalten und Aussehen
verändern kann.
2 Programmieren mit Flex
3
In den Folgenden Kapiteln soll der Umgang mit Flex ein wenig detailierter beleuchtet werden. Begonnen wird
mit einer Einführung in den Flex Builder, welcher gleich darauf benutzt werden kann um das erste Beispiel
"Hello, World!" zu programmieren. Im Weiteren werde ich noch auf Effekte eingehen, die in Flex genutzt werden
können. Damit die Flex-Anwendungen aber nicht nur für sich steht, soll im darauf folgenden Kapitel mittels
AMFPHP ein Gästebuch entstehen. Danach werden kurz einige Beispiele für Flex Anwendungen im Internet
aufgegriffen. Im letzten Teil dieses Kapitels soll zudem noch eine kleine AIR-Anwendung enstehen.
2.1 Flex Builder
1
Die einfachste Möglichkeit eine Anwendung mit Flex zu entwickeln ist der Flex Builder . Jeder, der schonmal
mit Eclipse gearbeitet hat, wird sich schnell damit zurecht finden, da auch der Flex Builder auf Eclipse aufgesetzt
ist. Daher reicht es auch aus das Flex Builder Plugin herunterzuladen, wenn man bereits Eclipse installiert hat.
Nachdem man ein neues Projekt angelegt hat kommt man in folgende Ansicht und kann direkt lostippen.
Ein weitere Möglichkeit wäre der Designmodus:
1 http://www.adobe.com/de/products/flex/flexbuilder/
4
Hier sieht man auf der linken Seite unten alle Komponenten, die man in die Anwendung einfügen kann.
Beispielhaft habe ich bereits einen RichTextEditor im Designmodus eingfügt und ihm einen kleinen Text und
eine id zugewiesen. Wechselt man wieder in den Sourcemodus sieht man folgenden Quellcode
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml " layout="absolute">
<mx:RichTextEditor x="43.5" y="10" id="RTE" text="Lorem ipsum dolor sit amet, ...">
</mx:RichTextEditor>
</mx:Application>
Durch diese Möglichkeit die Oberfläche durch zusammenklicken zu bauen nimmt der FlexBuilder einem sehr
viel Arbeit ab, die man in anderen Programmiersprachen hätte selbst machen müssen. Ein weiterer Vorteil des
Flex Builders ist das kompilieren der Sources, auch dies übernimmt der Flex Builder für den Entwickler.
Bei größeren Anwendungen mit vielen verschachtelten Komponenten kann es passieren, dass man ein wenig
den Überblick verliert. Auch hierfür bietet der Flex Builder einer Lösung an:
5
Klickt man auf den rot umrandeten Button erscheint zunächst alle Container, die direkt in Applicationliegen.
Ein Klick auf einen Container wie zum Beispiel auf diesem Bild das Panel erscheinen die zwei HBoxes. Klickte
man nun auf eine der beiden HBox würde die jeweils andere in den Hintergrund wandern und alle Komponenten
in der gewählten HBox würden genauer beschriftet.
2.2 Hello, World!
Den einfachsten Einstieg in eine neue Programmiersprache schafft man mit dem allseits bekannten "Hello,
World!" Beispiel. Dabei lässt sich gut die wesentliche Struktur einer Programmiersprache erkennen:
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
3
<mx:Label id="hello_label">
4
<mx:text>Hello World!</mx:text>
5
</mx:Label>
6
<mx:Button id="btn" label="Click me!" />
7 </mx:Application>
In Zeile 1 finden wir die XML-Deklaration, was einen schon darauf hinweist, dass es sich um ein XML Dokument
handeln muss. In der nächsten Zeile findet man
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml " layout="vertical">
das Grundgerüst einer jeden Flex Andwendung. Hier wird zum einen der Namespace mx definiert und das
Layout in dem alle Komponenten in der Anwendung ausrichtet werden. Es gibt weitere Eigenschaften, die sich
hier angeben lassen, wie z.B. height oder width.
In den nächsten drei Zeilen findet man die erste Komponenten, ein Label:
</mx:Label>
6
Das Label bekommt hier eine eindeutige id, über welche man dieses Label später ansprechen kann. Desweiteren
weisen wir der Komponente hier eine Eigenschaft text zu. An dieser Stelle sei darauf hingewiesen, dass text
klein und Label groß geschrieben ist. Dies kommt daher, dass, wie bereits erwähnt, alle Komponenten
ActionScript Klassen sind und es auch hier, wie in Java die Konvention gibt Klassennamen groß zu schreiben.
text ist demnach eine Eigenschaft der Klasse Label. Wie auch schon Application besitzt auch Label viele weitere
Eigenschaften, wie zum Beispiel visible oder toolTip. Am einfachsten lassen sich diese Eigenschaften über
den FlexBuilder herausfinden, indem man "<mx:Label " eintippt. Wichtig ist das Leerzeichen, danach bekommt
man eine Liste aller Eigenschaften und Events, die für diese Komponente zur Verfügung stehen.
Als letztes gibt es in unserer Anwendung noch
<mx:Button id="btn" label="Click me!" />
den Button welchem auch wieder eine in dieser Anwendung eindeutige id zugewiesen wird und zudem noch
die Eigenschaft label welche den Text auf dem Button darstellt.
Fertig kompiliert erhält man folgende Anwendung:
"Hello, World!" mit ActionScript
Als nächstes soll das Beispiel mit ein wenig ActionScript erweitert werden. Dazu wird ein TextInput Feld zu der
Anwendung hinzugefügt. Bei einem Klick auf den Button soll der Text aus dem Label in das TextInput Feld
kopiert werden:
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
3
<mx:Script>
4
<![CDATA[
5
public function copy():void {
6
txtIn.text = hello_label.text;
7
}
8
]]>
9
</mx:Script>
10
11
12
</mx:Label>
13
<mx:Button id="btn" label="Click me!" click="copy()" />
14
<mx:TextInput id="txtIn" text="not clicked" />
15 </mx:Application>
7
In Zeile 14 sieht man nun das TextInput Feld welches die id txtIn trägt. In diesem Fall wird der Text, im Gegensatz
zu dem Label, direkt als Eigenschaft des TextInput Feldes angegeben. Eigenschaften können also sowohl
direkt im Komponenten-Tag stehen, aber auch davon losgelöst als eigenes Tag von der Komponente
umschloßen. Um die gewünscht Funkionalität zu bieten, also das kopieren des Textes aus dem Label in das
TextInput Feld, muss dem Button noch irgendwie gesagt werden, dass er etwas ausführen soll, wenn man ihn
anklickt. Dazu verwendet man das click-Event. Dabei soll unser Button eine Funktion copy() ausführen, die wir
nun noch als ActionScript Funktion implementieren müssen. Dazu fügen wir nun eine neue Komponente ein:
<mx:Script>
<![CDATA[
]]>
</mx:Script>
In dieser Script Komponenten kann man beliebieg viele Funktionen oder auch Klassen einfügen. In der Funktion
copy(), welche unsere Funktionalität enthält, soll dem TextInput Feld nun der Text aus dem Label zugewiesen
werden. Dazu greifen wir mittels
txtIn.text = hello_label.text;
auf die Eigenschaft text des Labels hello_label zu und weisen dies der Eigenschaft text des TextInput Feldes
txtIn zu. Dabei ist zu beachten, dass der Text wirklich kopiert wird und nicht nur eine Referenz auf den Text
von hello_label.
Fertig kompiliert erhält man folgende Anwendung:
2.3 States and Effects
States spielen in Flex auch einen wichtige Rolle. Sie geben einem die Möglichkeit seiner Anwendung eine Art
BaseState zu geben, auf dem man seine Anwendung aufbauen und verändern kann. So lassen sich dem
BaseState neue Komponenten hinzufügen oder auch entfernen. Desweiteren haben die States eine Art
"Gedächtnis". Wie man später im Beispiel sehen kann, gibt es in dem einen State einen TextEditor, in den man
einen Text schreiben kann. Wenn man nun zu einem anderen State wechselt und zum ursprünglichen zurück
kehrt ist der Text immer noch da. Diese Technik lässt sich auch gut verwenden um viele Einstellungen auf
verschiedene Seiten zu verteilen, um die Übersicht zu behalten.
8
Effekte
Bislang hatten die beiden Anwendungen nichts magisches an sich. Nun können Effekte diese Magie jedoch
ansatzweise mitbringen. So kann praktisch jeder Komponente ein Effekt für einen bestimmten Vorgang
zugewiesen werden. In dem gleich folgenden Beispiel wird zum Beispiel dem Panel bei dem Event resizeEffect
der Effekt Resize zugewiesen, wobei sich das Panel dann dynamisch vergrößert. An dieser Stelle lässt sich
wieder gut erkennen, dass es sich bei Resize um eine ActionScript Klasse handelt.
Beispiel
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3
<mx:states>
4
<mx:State name="RTE">
5
<mx:SetProperty target="{showPanel}" name="title" value="RTE"/>
6
<mx:AddChild relativeTo="{showPanel}" position="lastChild">
7
<mx:RichTextEditor x="0" y="0" title="Testfeld" width="100%" height="100%">
8
</mx:RichTextEditor>
9
</mx:AddChild>
10
</mx:State>
11
<mx:State name="Calendar">
12
13
<mx:DateChooser x="0" y="0" width="100%" height="100%"/>
14
</mx:AddChild>
15
<mx:SetProperty target="{showPanel}" name="title" value="Calendar"/>
16
</mx:State>
17
<mx:State name="Picture">
18
<mx:SetProperty target="{showPanel}" name="title" value="Picture"/>
19
<mx:SetProperty target="{showPanel}" name="width" value="537"/>
20
<mx:SetProperty target="{showPanel}" name="height" value="453"/>
21
22
<mx:Image scaleContent="true" autoLoad="true" width="100%" height="100%">
23
<mx:source>CIMG0065.JPG</mx:source>
24
</mx:Image>
25
</mx:AddChild>
26
</mx:State>
27
</mx:states>
28
<mx:Panel x="10" y="65"
29
width="83" height="140"
30
layout="absolute" id="Menu"
31
title="Menu" showEffect="WipeRight" hideEffect="Zoom">
32
<mx:Button x="10" y="10" label="1" click="this.currentState='RTE'"/>
33
<mx:Button x="10" y="40" label="2" click="this.currentState='Calendar'"/>
34
<mx:Button x="10" y="70" label="3" click="this.currentState='Picture'"/>
35
</mx:Panel>
36
<mx:Button x="10" y="10" label="hide Menu" click="Menu.setVisible(false)" />
37
<mx:Button x="10" y="35" label="show Menu" click="Menu.setVisible(true)" id="button1"/>
38
<mx:Panel x="106" y="10" width="270" height="250" layout="vertical" id="showPanel"
39
resizeEffect="Resize">
40
</mx:Panel>
41 </mx:Application>
Neu in dieser Anwendung ist das Attribut states welches, wie man schnell ein der Kleinschreibung erkennt,
eine Eigenschaft der Application ist. In diesem Tag kann man sich nun beliebig viele States definieren. In
diesem Fall gibt es drei States. Für den State "RTE" wird bei Aktivierung die Eigenschaft title des showPanel
geändert werden. Ähnliches gilt für den State "Calendar". Für den letzten State wird noch die Größe des
showPanel verändert, damit das Bild auch angezeigt werden kann.
Ab Zeile 28 findet der Aufbau des BaseState statt. Es gibt im groben Zwei Panel und zwei Button. Das erste
Panel enthält die Buttons zum umschalten der States, was wieder mit Hilfe des EventListeners click funktioniert.
Der State wird gewechselt indem man der Anwendung über
this.currentState=...
mitteilt, welcher der definierten States der gerade aktuelle ist. In dem zweiten Panel werden dann, wie oben
beschrieben, die jeweiligen Komponenten in dieses Panel eingefügt. Zusätzlich wird diesem Panel noch ein
EventListener für den resizeEffect angehängt, damit das vergößern nicht plötzliche geschieht, sondern
dynamisch.
9
Neben dem hinzufügen von Komponenten lassen sich Komponenten natürlich in einem State auch löschen.
So lässt sich beispielsweise aus dem oberen Beispiel mittels
<mx:RemoveChild target="{showPanel}"/>
das Panel zum anzeigen der einzelnen Komponenten löschen. Auch diese Arbeit kann einem der Flex Builder
im Designmodus abnehmen. Weiterhin müssen States auch nicht zwingend den BaseState als Grundlage
nutzen, sondern können jeden beliebigen vorhandenen State nutzen. Ein derartiger State sähe beispielsweise
so aus:
<mx:State name="anotherBaseState" basedOn="Calendar"/>
Dieser neue State basiert also auf dem State "Calendar" und nimmt dabei alle Änderungen und Eigenschaften,
die "Calendar" beinhaltet, mit.
Fertig kompiliert erhält man aus dem obigen Quelltext folgende Anwendung:
2.4 AMFPHP
Bislang wurden alle Daten, die benötigt wurden direkt mitgeliefert. In der Zeit der dynamischen Internetseiten
hat es aber mehr Sinn, wenn noch eine Verbindung nach "außen" besteht. Zum Beispiel in Form einer Datenbank,
aus der die Daten für die Seite kommen. Dies können sowohl einfach Listen sein, aber auch Login Informationen
oder sonstige Informationen sein, die wir dem Benutzer zu Verfügung stellen wollen. Im Folgenden soll hier
näher auf AMFPHP eingegangen werden. Dies ist ein "Flash Remoting Gateway" welchen man direkt im
Quellcode der Anwendung ansprechen kann.
Wie der Name schon sagt ist AMFPHP in PHP geschrieben und bringt daher auch die Funktionalität von Klassen
mit. Eine solche Klasse verfügt dann über mehrere Funktionen, die auch direkt angesprochen werden können
und dann je nach Funktionalität auch Informationen zurückliefern können. Da man diese Klassen von außen
ansprechbar sind, werden sie auch als RemoteObjects bezeichnet. Im Folgenden soll ein Gästebuch enstehen,
in welches Einträge gemacht werden können, welche uns sowohl auf PHP als auch auf ActionScript Seite als
Entry Objekt zu Verfügung stehen. Dies ist ein weiterer Vorteil von AMFPHP. Daten brauchen nicht umgewandelt
zu werden, sondern man benötigt einfach auf beiden Seiten die gleichen Klassen und kann dann auf deren
Eigenschaften zugreifen.
2.4.1 Gästebuch
Um ein Gästebuch zu benutzen braucht man zunächst eine Oberfläche, um die benötigten Daten einzugeben:
1 <mx:Panel width="300" height="280" layout="vertical" horizontalAlign="center" title="Eintrag
ins Gästebuch">
2
<mx:Form width="100%" height="100%">
3
<mx:FormItem label="Name" required="true">
4
<mx:TextInput id="name_Input"/>
5
</mx:FormItem>
6
<mx:FormItem label="E-Mail">
7
<mx:TextInput id="email_Input"/>
10
8
</mx:FormItem>
9
<mx:FormItem label="Eintrag" height="100%" required="true">
10
<mx:TextArea height="120" id="text_Input"/>
11
</mx:FormItem>
12
</mx:Form>
13
<mx:Button label="eintragen"
14
click="controllInput()"/>
15 </mx:Panel>
16 <mx:Repeater dataProvider="{entries}" id="rep">
17
<mx:Panel title="{rep.currentItem.ID}: {rep.currentItem.Name}" width="400">
18
<mx:Label text="E-Mail: {rep.currentItem.Email}"/>
19
<mx:TextArea editable="false" width="100%" height="100"
20
text="{rep.currentItem.Message}"
21
/>
22
</mx:Panel>
23 </mx:Repeater>
Da es zu langwierig wäre auf die gesamte Oberfäche einzugehen werde ich an dieser Stelle nur kurz unbekannte
Komponenten erklären. Die Form und die FormItem Komponente sind sehr gut für Formulare aller Art zu
gebrauchen. Sie richten die Textfelder und die zugehörigen Textfelder selbstständig aus, sodass man selbst
keine Arbeit mehr damit hat. Eine weitere neue Komponente ist der Repeater. Er wiederholt einfach alle
Komponenten in ihm, solange der angegebene dataProvider noch Daten vorrätig hat. Wo diese Daten
herkommen wird im weiteren Verlauf dieses Kapitels noch erklärt. Die geschwungenen Klammern ( {} ) weisen
den Compiler an, das darin stehende Objekt erst auszuwerten bevor es benutzt wird. Die Eigenschaft required
erzeugt ein *, wenn sie auf true gesetzt wurde. Sie garantiert aber nicht, dass auch wirklich etwas in das Feld
eingegeben wurde. Für diese Aufgabe gibt es so genannte StringValidator, die auch in MXML geschrieben
werden. Ein Beispiel dafür sei folgender StringValidator''
<mx:StringValidator id="name_Input_Validator"
source="{name_Input}"
property="text"
minLength="5"
tooShortError="Bitte geben sie mehr als 3 Zeichen ein!"
requiredFieldError="Bitte füllen Sie dieses Feld aus" />
Dieser StringValidator prüft das Feld name_Input auf die Eigenschaft text. Diese soll mindestens 5 Stellen
haben, sonst wird der tooShortError angezeigt, wenn gar nichts in das Feld eingegeben wurde wird der
requiredFieldError angezeigt. Auch hier gibt es wieder viele weitere Eigenschaften, die sich leicht mit dem
FlexBuilder herausfinden lassen.
PHP
Als nächstes soll zunächst die PHP Seite des Gästebuchs beschrieben werden.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
class Entry{
var
var
var
var
$ID;
$Name;
$Email;
$Message;
var $_explicitType = "Entry";
}
?>
Die Klass Entry hat die wesentlichen Eigenschaften eines Gästebucheintrages. Eine ID, einen Namen, eine
Email Adresse und natürlich die Message. Als weiteres Feld muss auf PHP seite der $_explicitType angegeben
werden, der der ActionScript Klasse entspricht. Als nächstes schauen wir uns das RemoteObject an, welches
wir von Flash aus ansprechen wollen:
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
11
<?php
include 'connect.php';
require_once 'Entry.class.php';
class guestbook {
/*
* @access remote
*/
function getEntries() {
$sql = "SELECT * FROM entries ORDER BY ID DESC;";
$result = mysql_query($sql) OR die(mysql_error());
$entries = array();
while($row = mysql_fetch_array($result)){
$entry = new Entry();
$entry -> ID
= $row['ID'];
$entry -> Name
= $row['Name'];
$entry -> Email
= $row['Email'];
$entry -> Message = $row['Message'];
$entries[] = $entry;
}
return $entries;
}
/*
* @access remote
*/
function insertMsg($name, $email, $msg) {
$sql = sprintf("INSERT INTO entries (Name,Email,Message) VALUES ('%s','%s','%s')",
$name,$email,$msg);
mysql_query($sql) OR die(mysql_error().$sql);
}
}
?>
Es gibt zwei Funktionen. getEntries holt sich zunächst alle Einträge des Gästebuches in umgekehrter Reihenfolge
aus der Datenbank und liefert alle Entries in einem Array zurück. insertMsg fügt einen neuen Eintrag in die
Datenbank ein.
ActionScript
Um die in PHP beschriebene Klasse Entry zu benutzen wird das Pendant in ActionScript benötigt.
1 package
2 {
3
[RemoteClass(alias="Entry")]
4
[Bindable]
5
public class Entry{
6
public var ID:String;
7
public var Name:String;
8
public var Email:String;
9
public var Message:String;
10
}
11
12 }
Wie auch schon auf PHP Seite, so muss auch auf ActionScript Seite angebeben werden welches die
RemoteClass darstellt. Das Stichwort [Bindable] wird im weiteren Verlauf dieses Kapitels noch einmal aufgegriffen
und an gegebener Stelle erklärt. Wie man sieht besitzt die Klasse die gleichen Eigenschaften wie jene in PHP.
Zur Vereinfachung sind die Eigenschaften dieser Klasse alle vom Typ String.
MXML
12
Die Anwendung besitzt bislang nur die Oberfläche, es muss ihr also noch beigebracht werden das RemoteObject
anzusprechen. Dazu wird als erstes eine services-config.xml mit folgendem Inhalt benötigt:
1 <?xml version="1.0" encoding="UTF-8"?>
2 <services-config>
3
<services>
4
<service id="amfphp-flashremoting-service"
5
class="flex.messaging.services.RemotingService"
6
messageTypes="flex.messaging.messages.RemotingMessage">
7
<destination id="amfphp">
8
<channels>
9
<channel ref="my-amfphp"/>
10
</channels>
11
<properties>
12
<source>*</source>
13
</properties>
14
</destination>
15
</service>
16
</services>
17
<channels>
18
<channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">
19
<endpoint uri="http://localhost:80/amfphp/gateway.php"
20
class="flex.messaging.endpoints.AMFEndpoint"/>
21
</channel-definition>
22
</channels>
23 </services-config>
Zunächst wird der Service mit einer eindeutigen ID versehen, welche in den channels wieder augegriffen wird.
Dort wird dem Service mitgeteilt, wo er die RemoteObjects finden kann. Dies ist bei AMFPHP eine gateway.php,
welche die Anfragen weiterleitet. In der eigentlichen Anwendung wird nun eine RemoteObject Komponente
eingeführt:
<mx:RemoteObject id="guestbook" fault="faultHandler(event)"
showBusyCursor="true"
source="guestbook"
destination="amfphp">
<mx:method name="getEntries" result="resultHandler(event)"
fault="faultHandler(event)" />
<mx:method name="insertMsg" result="guestbook.getEntries.send()"
fault="faultHandler(event)" />
</mx:RemoteObject>
Auch hier wird wieder eine eindeutige id vergeben. fault ist in diesem Fall ein Eventlistener, der falls beim Aufruf
des RemoteObjects etwas schiefgeht, die Funktion resultHandler(event) aufruft, dem ein event vom Typ
FaultEvent übergeben bekommt. Desweiteren soll eine Sanduhr angezeigt werden (showBusyCursor) und die
source ist die guestbook.php, welche im Ordner services von AMFPHP liegt. destination stammt aus der
services.xml. Nun müssen noch alle Funktionen definiert werden, die vom RemoteObject benutzt werden
sollen. Jeder method wird ein Event Listener für den Fall eines Fehlers und für die erfolgreiche Anfrage an das
guestbook RemoteObject mitgegeben. Als nächstes müssen noch die ActionScript Funktionen her, wie zum
Beispiel die EventHandler:
1 <mx:Script>
2
<![CDATA[
3
import mx.events.ValidationResultEvent;
4
import mx.collections.ArrayCollection;
5
import mx.utils.ArrayUtil;
6
import mx.managers.CursorManager;
7
import mx.rpc.events.ResultEvent;
8
import mx.rpc.events.FaultEvent;
9
import mx.controls.Alert;
10
import Entry;
11
12
[Bindable]
13
public var entries:ArrayCollection;
14
15
private function faultHandler(fault:FaultEvent):void {
16
CursorManager.removeBusyCursor();
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
13
Alert.show(fault.fault.message + "-" + fault.fault.faultDetail);
}
private function msgHandler(evt:ResultEvent):void {
guestbook.getEntries.send();
}
private function resultHandler(evt:ResultEvent):void {
entries = new ArrayCollection( ArrayUtil.toArray(evt.result) );
}
private function controllInput():void {
var ctrlEvent:ValidationResultEvent = name_Input_Validator.validate();
if(ctrlEvent.type == ValidationResultEvent.INVALID){
Alert.show("Bitte geben Sie ihren Namen endlich ein!","Name fehlt");
}else{
trace(name_Input.text);
guestbook.insertMsg.send(name_Input.text, email_Input.text,
text_Input.text);
name_Input_Validator.enabled = false;
name_Input.text = "";
email_Input.text = "";
text_Input.text = "";
name_Input_Validator.enabled = true;
36
37
38
39
40
41
42
}
43
}
44
45
]]>
46 </mx:Script>
In den ersten Zeilen sieht man einige import Anweisungen von Klassen, die in den Funktionen benötigt werden.
Darauf folgend findet man in eckigen Klammern das Wort [Bindable]. Dies bedeutet hauptsächlich, dass wir
die ArrayCollection, die dort definiert wird an jedes Objekt als so genannten dataProvider hängen können.
Diese entries waren im ersten Teil dieses Kapitels schon wichtig für den Repeater. In die ArrayCollection
kommen die Daten, die das Remote Object auf PHP Seite zurückschickt, also ein Array über Entry, welche
man, wie man im Quellcode der Oberfläche (s.o.) sieht, durchlaufen kann und mittels
{rep.currentItem.Name}
direkt auf die Eigenschaft Name des aktuellen Objekts zugreifen kann. Die ArrayCollection entries wird in der
Funktion resultHandler(evt:ResultEvent):void über den Paramter evt vom Typ ResultEvent gefüllt, welcher die
Daten aus dem Remote Object enthält. Da die Funktion resultHandler jedoch nur aufgerufen wird wenn die
method getEntries erfolgreich ausgeführt wurde und man alle Einträge des Gästebuches gerne schon sehen
möchte, wenn die Anwendung geladen ist fügt man der Application die EventListener creationComplete hinzu.
Dieser führt dann die Funktion
guestbook.getEntries.send()
aus. guestbook ist dabei die Komponente RemoteObject auf MXML Seite und getEntries die Funktion die das
RemoteObject ausführen soll. send() sendet dann den Request an die gateway.php.Die Funktion faultHandler
entfernt die Sanduhr und zeigt des augetretenden Fehlers an. Um die neue Nachrichten in die Datenbank
einzutragen wird die Funktion controllInput benutzt, die nach dem Klick auf den Button "eintragen" ausgeführt
wird. Beispielhaft wird hier ein ctrlEvent vom Typ ValidationResultEvent definiert, welches mit dem Ergebniss
des oben definierten StringValidator gefüllt wird. Falls das ctrlEvent nun jedoch INVALID, also nichts bzw zu
wenig in das Namen Feld eingeben wurde, wird eine Fehlermeldung ausgegeben und kein Eintrag in die
Datenbank gemacht. Falls die Eingaben nun jedoch korrekt sind wird mittels
guestbook.insertMsg.send(name_Input.text, email_Input.text, text_Input.text);
die Funktion insertMsg des RemoteObjects aufgerufen und die eingebenen Daten als Parameter übergeben.
Um den neuen Beitrag auch sehen zu können wurde der method insertMsg ein result EventHandler mitgegeben,
der direkt das RemoteObject auffordert die Funktion getEntries auszuführen.
Ergebnis
14
2.5 Flex Beispiele
Im Internet lassen sich viele Beispiele für Flex Anwendungen finden. Einige davon hat man vielleicht sogar
schon benutzt und wusste nicht einmal, dass es mit Flex programmiert wurde. Ich möchte nun kurz einige
Beispiele vorstellen, die recht eindrucksvoll die Möglichkeiten von Flex aufzeigen. Natürlich gibt es viele mehr
als die hier genannten, aber diese schaffen einen ersten Eindruck davon, was mit Flex möglich ist. Weiter
Beispiele lassen sich unter http://flex.org/showcase/ finden.
Buzzword
5
Buzzword ist ein kompletter Online Text-Editor, mit dem es möglich ist formatierte Texte zu erstellen, wie es
auch zum Beispiel mit Word möglich ist.
5 http://www.buzzword.com
15
Wie man sieht lassen sich auch Bilder problemlos im Text ausrichten. Der Text fließt immer um das Bild herum.
Desweiteren bietet Buzzword auch das direkte drucken oder speichern des Dokumentes online an. Das online
erstellte Dokument lässt sich jedoch auch beispielsweise als Word-Dokument runterladen.
Picnik
6
Picnik ist ein online Tool zum bearbeiten von Photos jeglicher Art. Es lassen sich alle Standardeffekte wie
zum Beispiel Sepia oder SchwarzWeiß auf hochgeladene Photos anwenden.
6 http://www.picnik.com/app
16
Auch Texte oder Formen lassen sich auf einem Bild einfügen.
Yahoo Maps
7
Yahoo Maps stellt eine Art Komkurenz zu den Google Maps dar. Es bietet im Prinzip die gleichen
Funktionalitäten, die Google Maps auch bietet. Leider ist die Qualität der Karten nicht so gut, wie jene in Google
Maps.
VirtPresenter
8
Der VirtPresenter ist ein Framework für Vorlesungsaufzeichnungen. Es gibt dabei einen MPEG Stream, welcher
ins FlashVideo Format umgewandelt wird. Zusätzlich werden die Folien des Dozenten auch ins Flash Format
konvertiert. Daraus lässt sich dann mittels der Oberfläche in der Vorlesung hin und herspulen.
7 http://maps.yahoo.com/broadband
8 http://lernfunk.de/
17
2.6 AIR
AIR, die Adobe Integrated Runtime, ist eine Laufzeitumgebung, um Anwendungen, die mit Flex programmiert
wurden, auf dem Desktop zu benutzen. Dazu wird zum einen Flex 3 benötigt und zum anderen eine
9
Laufzeitumgebung , die man sich auf seinem Rechner installieren muss. Um eine bereits fertige Anwendung
direkt auf dem Desktop zu benutzen ist es nicht nötig diese völlig neu zu schreiben. Vielmehr gibt es die
Möglichkeit den Quellecode komplett wieder zu benutzen. Die wesentlichen Unterschiede liegen im Root
Komponente einer Anwendung. In einer AIR-Anwendung wird
<mx:Application ..
zu
<mx:WindowedApplication ..
Desweiteren gibt es zu jeder AIR-Anwendung eine XML-Datei, in der genauere Eigenschaften der Anwendung
definiert werden, die ich hier aber nicht näher erläutern möchte, da dies zu aufwendig wäre. Vielmehr sei darauf
verwiesen, dass der Flex Builder jene Datei selbstständig erzeugt, falls man eine AIR-Anwendung erstellt. Alle
Attribute, die sich darin finden, werden entweder durch Kommentare beschrieben oder sind selbsterklärend.
Ein Beispiel
Im wesentlichen soll dieses Beispiel eine Art Datei Explorer darstellen, der, falls man eine Datei anklickt, anzeigt
wie groß die Datei ist, wann sie das letzte Mal editiert wurde und wie sie heißt.
2 <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
3
4
<mx:Script>
5
<![CDATA[
6
7
public function update():void {
8
var file:File = File(tree.selectedItem);
9
if(!file.isDirectory) {
10
filename.text = file.name;
11
date.text = file.modificationDate.toDateString();
12
size.text = (file.size / 1000) + "KB";
9 http://get.adobe.com/air/
18
13
details.setVisible(true);
14
}else{
15
details.setVisible(false);
16
}
17
}
18
19
public function changeAlpha(dif:Number):void{
20
var newAlpha:Number;
21
newAlpha = this.alpha + dif;
22
if(newAlpha < 1 && newAlpha > 0){
23
this.alpha = newAlpha;
24
}
25
}
26
27
]]>
28
</mx:Script>
29
<mx:HBox width="100%" height="10%">
30
<mx:Button label="Alpha +" click="changeAlpha(0.1)"/>
31
<mx:Button label="Alpha -" click="changeAlpha(-0.1)"/>
32
</mx:HBox>
33
<mx:HBox width="100%" height="90%">
34
<mx:FileSystemTree width="50%" height="100%" id="tree" change="update()"/>
35
<mx:Panel width="50%" height="150" layout="absolute" id="details"
36
showEffect="WipeLeft" hideEffect="WipeRight" visible="false">
37
<mx:Form x="0" y="0" width="100%" height="100%">
38
<mx:FormItem label="Dateiname:">
39
<mx:Label id="filename"/>
40
</mx:FormItem>
41
<mx:FormItem label="GrÃ¶Ã e:">
42
<mx:Label id="size"/>
43
</mx:FormItem>
44
<mx:FormItem label="geÃ€ndert am:">
45
<mx:Label id="date"/>
46
</mx:FormItem>
47
</mx:Form>
48
</mx:Panel>
49
</mx:HBox>
50 </mx:WindowedApplication>
Das wesentliche der Oberfläche liegt in der zweiten HBox. In ihr liegt der FileSystemTree, der schon die ganze
Funktionalität eines Verzeichnisbaumes mitbringt und in der Form, wie er jetzt verwendet wird, alle Laufwerke,
in denen Dateien vorhanden sind, auflistet. Diesem FileSystemTree wird ein EventListener change angehängt,
bei dem die Funktion update() aufgerufen werden soll. Als weitere Komponenten liegt ein Panel in der HBox
welches die Dateiinformationen enthält. Das Panel erscheint, wenn man eine Datei anklickt und verschwindet
wieder wenn man beispielsweise einen Ordner anklickt. Die Funktion update() definiert zunächst ein file aus
dem aktuell selektiertem Objekt aus dem FileSystemTree. Falls das gewählte file kein Ordner ist werden den
Labels in dem Panel die gewünschten Werte zuordnet und das Panel sichtbar gemacht. Falls das selektierte
file doch ein Ordner ist soll das Panel wieder verschwinden. Als weiteren Effekt ist hier noch die Alpha Blendung
mit zwei Buttons eingeführt. Mit diesen lässt sich die Durchsichtigkeit des Fensters verändern. Air_Example.air
3 Zusammenfassung
19
3 Zusammenfassung
Zu guter letzt soll nun noch ein kleiner Ausblick gegeben werden um weitere Möglichkeiten aufzuzeigen, die
mit Flex möglich sind.
Cairngorm
10
Cairngorm stellt ein Framework um Flex Anwendungen nach dem MVC-Konzept zu erstellen. Gerade für
größere Anwendungen erscheint es sinnvoll diese drei Ebenen voneinander zu trennen um den Überblick zu
behalten.
Flash Lite und Flash 10
Flash Lite und Flash 10 bieten völlig neue Möglichkeiten in der Programmierung. Flash Lite wird dazu verwendet
um Flash Anwendungen auf einem Mobiltelefon auszuführen. Dies bietet auch dem kleinen Programmierer
neue Möglichkeit, indem er nun in der Möglichkeit sein wird Anwendungen für sein Mobiltelefon komfortabel
und schnell selbst zu entwickeln. Leider basieren derzeit recht wenige Handys auf der Flash Technology.
Flash 10 bietet die Möglichkeit C/C++ Code in ActionScript Code umzuwandeln und dann in der Flash Anwendung
zu verwenden. So findet unter http://www.peterelst.com/blog/2007/10/03/adobe-max-chicago-sneak-peeks/
unter der Überschrift Flash on C/C++ ein Video welches eindrucksvoll die neuen Möglichkeiten aufzeigt.
Vorteile von Flex
Flex bietet dem Programmierer viele Vorteile. So braucht er sich aufgrund des Flash Plugins und der AVM2
keinerlei Gedanken darum machen muss, ob seine Anwendung auch auf einem Mac oder unter Linux läuft.
Desweiteren braucht man aufgrund des Flash Plugins auch keine Browserweichen einbauen, wie zum Beispiel
12
für Ajax . Ein weiterer Vorteil, der sich dem Programmierers bietet ist die Verbreitung des FlashPlayers. Es
gibt Statisken in denen die Rede davon ist, dass der FlahPlayer auf 96% alle Computer installiert und aktiviert
ist.
Nachteile von Flex
Natürlich bietet eine Programmiersprache nicht nur Vorteile sondern auch einige Nachteile. So erschwert
13
beispielsweise die Barrierefreiheit sehbehinderten oder gar blinden Menschen das lesen einer solchen Flex
Anwendung.
Ein weiterer Nachteil ist die Ladezeit, die benötigt wird, bis die Anwendung auf dem Bildschirm des Benutzers
erscheint. Gerade heute in der Zeit von Highspeed InternetAnschlüssen ist dieser Nachteil aber eher
vernachlässigbar. Zudem bietet auch Flex die Möglichkeit Module nachzuladen, sodass nicht alles auf einmal
geladen werden muss.
3.1 Literatur
http://livedocs.adobe.com/flex/
http://amfphp.org
http://www.die-flexperten.de/flex-vortraege/
http://www.peterelst.com/blog/2007/10/03/adobe-maxchicago-sneak-peeks/
10 http://labs.adobe.com/wiki/index.php/Cairngorm
12 http://media2mult.uni-osnabrueck.de/pmwiki/fields/wp07/index.php?n=AJAX.Main
13 http://de.wikipedia.org/wiki/Barrierefreies_Internet

Macromedia Flex - Universität Osnabrück

Transcrição

Documentos relacionados

Weiterlesen... - flex official

Bad Salzuflen, 13. Juni 2016 Jahrgang 1 Liebe Eltern, Sie sind auch

199,95 - Sport Saar

brand newwinter - sport

UltraFlex Spezialkabel

venus sv ip67

Kapelle zupft und zieht, das Publikum jubelt

MOVIS FR MOVIS 2GKW FR Flex MOVIS 2GKW C

Reise Auf Schienen über die Insel der Schönheit

Die Bayern 2-Favoriten: Eine Stunde mit Empfehlungen der Bayern