Adobe FLEX

Christian Schwrer (cs116)

Timo Mller (tm043)

Agenda

Einfhrung

Flex Grundlagen

MXML

ActionScript

Flex fr Fortgeschrittene

Zusammenfassung und Ausblick

Einfhrung

Was ist eine RIA?

Bisher

Seitenbasierte Denkweise

Bei jeder Anfrage wird eine Seite komplett bertragen

Zustand wird auf dem Server verwaltet

Eingeschrnkte User-Experience

Was ist eine RIA?

Rich Internet Applications (RIAs)

Anwendungsbasierte, datenzentrierte Denkweise

Bei der initialen Anfrage wird die gesamte Anwendung geladen,

anschlieend werden nur noch die bentigten Daten bertragen

Zustand wird vom Client verwaltet

Abbildung des Look&Feels von Desktopanwendung ins Web

Was ist Flex?

Framework fr die Entwicklung von RIAs

Flex SDK

Open-Source
Enthlt vorgefertigte
Grafikkomponenten
Dokumentation
Flex Builder

Auf Eclipse basierend

Kostenpflichtig (fr Studenten kostenfrei)
Laufzeitumgebung

Flash Player
Adobe Integrated Runtime (AIR)

Historie

Mrz 2004
Flex 1.0 entwickelt von Macromedia

Oktober 2004
Flex 1.5 verbessert die Funktionalitt

Juni 2006
Adobe verffentlicht Flex 2.0

Bessere Untersttzung bei der Entwicklung

Frei verfgbar
Nutzt Actionscript 3

Februar 2008
Adobe verffentlicht Flex 3.0 und AIR 1.0

Flex wird Open-Source

Weiterentwicklung des Frameworks

Zutaten eine Flex-Anwendung

MXML

XML-basierte Layoutdefinition

Definiert das Aussehen der Anwendung

ActionScript

Objekt-orientierte Skriptsprache

Definiert das Verhalten der Anwendung

Browser /
Flash-Player

Flex SDK
MXML

Actionscript

SWFAnwendung

Flex Klassenbibliothek

AIR
Client Runtime

Externe Klassenbiblitheken

AIR-Anwendung
8

Vom Code zum Programm

MXML ist lediglich Abstraktionsebene ber ActionScript

Aus den ActionScriptklassen wird eine SWF-Datei generiert

Die Laufzeitumgebung

Adobe Flash Player

Virtuelle Maschine zur Ausfhrung von

SWF-Dateien

Als Browser-Plugin und als Standalone

Version verfgbar

Flex 3.0 bentigt mindestens Version 9

Fr viele Plattformen verfgbar

Adobe Integrated Runtime (AIR)

Virtuelle Maschine, die Zugriff auf lokale

Ressourcen hat

Vergleichbar mit der Java Virtual Machine

Anwendungen liegen als AIR-Datei vor (nicht als SWF)

10

Die Entwicklungsumgebung

Flex Builder 3

Kostenpflichtig (fr Studenten kostenfrei)

Basierend auf Eclipse (Standalone / Plugin)

Grafischer Oberflchendesigner

Debugging und Profiling von Flex Anwendungen

Code-Completion, Code-Hinting und Refactoring

11

MXML Grundlagen

12

Was ist MXML?

Deklarative Markup-Sprache

Zur Erstellung des Layouts der Benutzeroberflche

XML-basiert

Sprachelemente: Tags

MXML-Dokument muss wohlgeformt und gltig sein

MXML-Compiler: mxmlc

Aufruf ber Kommandozeile oder Flex Builder

Wandelt MXML in Actionscript um

MXML als Convenience Language

Dateiname:

Endung .mxml

Dateiname darf nicht mit einer bestehenden ActionScript-Klasse

bereinstimmen
13

Das MXML-Grundgerst

XML-Deklaration

Application-Knoten

Festlegung des Kontextes der gesamten Applikation

Haupt-Container

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<!-- Weitere Komponenten -->
</mx:Application>

14

Komponenten

Komponenten stellen die Basis fr die Flex-Anwendung dar

Komponentenbasiertes Entwicklungsmodell

Hinzufgen:

Design-Modus: per Drag&Drop

Source-Modus: XML-Konstrukte

Vordefinierte Komponenten

Layout-Container

Controls

Navigators

Charting

Benutzerdefinierte Komponenten

15

Die Flex-Klassenhierarchie

Visuelle Komponenten in der Flex-Klassenhierarchie (Auszug):

Mit nderungen entnommen aus: Tapper, J. et al. (2008), S. 180

16

Layout-Container

Visuelle Komponenten zur Steuerung der Darstellung

der Benutzeroberflche

Besitzen vordefinierte Regeln zur Positionierung der

Kindelemente

Hufig verwendete Layout-Container:

VBox

Vertikale Anordnung der Kindelemente

HBox

Horizontale Anordnung der Kindelemente

Canvas

Kindelemente werden ber x/y-Koordinaten angegeben

Panel

Kindelemente werden abhngig vom layout-Attribut dargestellt

17

Beispiel fr Layout-Container

Darstellung im Design-Modus des Flex Builders:

Hauptcontainer (mx:application)

Container 1 (mx:HBox)

Container 2 (mx:VBox)

18

Beispiel fr Layout-Container

Darstellung im Source-Modus des Flex Builders

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
height="400" width="300">
<mx:HBox id="Container1" backgroundColor="#9C9696">
<mx:Button label="Button 1"/>
<mx:Button label="Button 2"/>
<mx:Button label="Button 3"/>
<mx:VBox id="Container2" backgroundColor="#DCD6D6">
<mx:Button label="Button 4"/>
<mx:Button label="Button 5"/>
<mx:Button label="Button 6"/>
</mx:VBox>
</mx:HBox>
</mx:Application>

19

Layout-Manager

Anordnung der Komponenten erfolgt durch Container

Layout-Regeln:

Box-based Layout

In Box-basierten Containern (z.B. HBox, VBox)

Automatische Positionierung der Kindelemente

Angabe der Komponentengre erforderlich
Style-Eigenschaften: horizontalGap und verticalGap

Canvas-based Layout

In Canvas-basierten Containern

Pixelgenaue Positionierung der Kindelemente ber

x/y-Eigenschaft

berlappungen mglich

20

Layout-Manager

Layout-Regeln:

Constraint-based Layout

In Canvas-basierten Containern

Positionierung ber den relativen Abstand (in Pixeln)

zum Content-Bereich des bergeordneten Containers
nderungen der Container-Gre fhrt zu
Neupositionierung der Kindelemente (Fluid Interfaces)
Style-Eigenschaften: left, top, right, bottom

Im Flex Builder:

21

Controls

Steuerelemente zur Benutzerinteraktion

Werden innerhalb von Layout-Containern platziert

Hufig verwendete Controls:

Alert

Popup-Fenster fr Hinweise und Fehlermeldungen

Button

Rechteckige Schaltflche
DataGrid

Komplexe, mehrspaltige, sortierbare Liste

Label bzw.Text

Einfache (einzeilige bzw. mehrzeilige) Textausgabe

TextInput

Einfaches einzeiliges Texteingabefeld

22

Beispiel fr Controls

Darstellung im Design-Modus des Flex Builders

Label (mx:Label)

Textfeld (mx:Text)

DataGrid (mx:DataGrid)

Texteingabefeld (mx:TextInput)

Schaltflche (mx:Button)

23

Beispiel fr Controls

Darstellung im Source-Modus des Flex Builders

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="400" height="300">
<mx:VBox>
<mx:Label text="Ein einzeiliges Label"/>
<mx:Text text="Und ein &#xa;mehrzeiliges&#xa;Textfeld" />
<mx:DataGrid>
<mx:columns>
<mx:DataGridColumn headerText="Spalte 1"/>
<mx:DataGridColumn headerText="Spalte 2"/>
<mx:DataGridColumn headerText="Spalte 3"/>
</mx:columns>
</mx:DataGrid>
<mx:TextInput text="Ein TextInput"/>
<mx:HBox height="10%">
<mx:Button label="Submit"/>
<mx:Button label="Reset"/>
</mx:HBox>
</mx:VBox>
</mx:Application>
24

Komponenten Explorer

bersicht ber die vordefinierten Komponenten im

Flex 3 Component Explorer:
http://examples.adobe.com/flex3/componentexplorer/explorer.html

25

Benutzerdefinierte Komponenten

Zur Modularisierung einer Flex-Anwendung

Zusammenfassen mehrere bestehender Komponenten

Erweiterung der Funktionalitt einer bestehenden Komponente

Erstellung:
1) Neues XML-Dokument anlegen
2) XML-Deklaration einfgen
3) Wurzel-Element: Bestehende Komponente, auf
der die benutzerdefinierte Komponente basiert

Flex Builder:
New MXML Component

4) Hinzufgen der Funktionalitt (MXML & ActionScript)

Verwendung:
1) Definieren eines XML-Namensraums
2) Instanziierung ber den Namensraum
(analog zu einer vordefinierten Komponente)

Flex Builder:
Components Custom
Drag&Drop

26

Beispiel: Eigene Komponente

Erstellung MyComponent.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox
xmlns:mx=
"http://www.adobe.com/2006/mxml"
width="300" height="160">
<mx:Label text="User-Login"/>
<mx:HRule width="100%" height="1"
strokeColor="#000000"/>
<mx:Form>
<mx:FormItem label="Username:">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput/>
</mx:FormItem>
<mx:Button label="Login"/>
</mx:Form>
</mx:VBox>

27

Beispiel: Eigene Komponenten

Verwendung der benutzerdefinierten Komponente

MyComponent in der Flex-Anwendung
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx=
"http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:myComp="myComponents.*">
<myComp:MyComponent x="65" y="107"/>
</mx:Application>

28

States

States sind Zustnde, die eine Flex-Anwendung oder

Komponente annehmen kann

Durch den Einsatz der State-Klasse knnen beliebig

viele Zustnde definiert werden

Jede MXML-Seite hat mindestens einen Zustand (Base State)

Es wird aber immer nur ein State angezeigt

nderung des Zustands erfolgt z.B. durch

Benutzerinteraktion

Eintreffen von serverseitigen Daten

States werden von einem anderen State abgeleitet,

d.h. der State kann

Komponenten hinzufgen und entfernen

Eigenschaften und Styles verndern

29

States

Hinzufgen und Steuern von States:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:myComp="myComponents.*">
<mx:VBox id="vbox1">
<mx:Label text="ffentlicher Bereich:" id="label1"/>
<mx:Text text="Lorem ipsum ..." id="text1"/>
<mx:Button label="Zum geschtzen Bereich"
id="button1" click="this.currentState='login'"/>
</mx:VBox>
<mx:states>
<mx:State name="login">
<mx:RemoveChild target="{button1}"/>
<mx:RemoveChild target="{text1}"/>
<mx:RemoveChild target="{label1}"/>
<mx:AddChild relativeTo="{vbox1}" position="lastChild">
<myComp:MyComponent id="loginFenster"/>
</mx:AddChild>
</mx:State>
</mx:states>
</mx:Application>

30

States

Wechsel zwischen den Zustnden

Beispiel

31

ActionScript Grundlagen

32

Was ist ActionScript?

Objekt-orientierte Skriptsprache basierend auf ECMA-Script

(ECMAScript 262 Draft 4)

Ursprnglich entwickelt um Interaktivitt zu Flash Filmen

hinzuzufgen

Wird in Bytecode bersetzt und von der Adobe Virtual Machine

2 (AVM2) interpretiert und ausgefhrt

Vorteile von ActionScript 3.0

AVM2 bis zu 10mal schneller

Bessere Codeoptimierung im Compiler

Echte Objektorientierung, grere API

Event Model basierend auf DOM Level 3 Events

ECMAScript for XML (E4X)

33

ActionScript Syntax

Package
package hdm { }

Variablen
var myString:String = "Hallo Welt!"

Class
public class TextClass
{
public function TextClass() { }
}

Function
private function add(a:int, b:int):int { }

34

ActionScript Syntax

Kommentare
// Ein Kommentar
/*
Noch ein Kommentar
*/

Vererbung
public class MyTestClass extends TestClass { }

Casting
var o:Object;
var t:MyTestClass = MyTestClass(o);
var t2:MyTestClass = o as MyTestClass;

35

ActionScript und MXML

MXML-Tags reprsentieren Actionscript Klassen

Jede MXML-Datei entspricht einer eigenen AS-Klassen

MXML-Code kann durch ActionScript mit Verhalten versehen

werden

Direkt in den Attributen eines MXML-Elements

<mx:Label id="lName" text="{Person.name}"/>

Inline-Definition
<mx:Script>
<![CDATA[
// Actionscript Code
]]>
</mx:Script>

Import
<mx:Script source="myCode.as"/>
36

[Bindable]

Werte von Variablen werden nur beim Laden der Anwendung

an die MXML-Komponenten bergeben

Variablen, die mit dem Metadaten-Tag [Bindable]

gekennzeichnet sind, senden ihre nderungen an die
Komponenten, die sie benutzen
<mx:Script>
<![CDATA[
[Bindable]
var myString:String = "Hallo Welt!"
]]>
</mx:Script>
<mx:Label id="myLabel" text="{myString}"/>
<mx:Button click="myString = 'Auf Wiedersehen!'"/>

37

Events

Das Verhalten einer Flex Anwendung

wird ber Events gesteuert

User Events entstehen durch die Interaktion

des Benutzers mit dem Programm

System Events entstehen, wenn das System

mit dem Programm in Berhrung kommt

Basieren auf dem Document Object Model (DOM) Level 3

Event Model

Events knnen von jeder Komponente geworfen werden

(Dispatch)

Event Listener / Handler verarbeiten die Events und fhren die

gewnschte Reaktion aus

38

Event Handler registrieren

Inline
<mx:Label id="myLabel" text="Hallo Welt!"/>
<mx:Button id="myButton"
click="myLabel.text = 'Auf Wiedersehen!'"/>

Im Actionscript-Code
<mx:Script>
<![CDATA[
public function test():void {
myButton.addEventListener(MouseEvent.CLICK, onClick);
}
public function onClick(e:MouseEvent):void {
myLabel.text = "Auf Wiedersehen!";
}

]]>
</mx:Script>

<mx:Label id="myLabel" text="Hallo Welt!"/>

<mx:Button id="myButton"/>
39

Die Klasse Event

Basisklasse fr die Weitergabe von

Parameter an den Event Handler

Wird implizit erstellt, sobald ein

Event geworfen wird

Enthlt die Basisinformationen des Events

Event
+ target
+ type
+ currentTarget
+ eventPhase
+ cancelable
+ bubbles

target das Objekt, das den Event

ausgelst hat

type Name des Eventtyps (zB.: click)

currentTarget das Objekt, das den Event verarbeitet

eventPhase aktuelle Phase der Propagation

cancelable darf die Verarbeitung abgebrochen werden

bubbles zeigt an in welcher Phase der Event verarbeitet

werden darf
40

Beispiel fr Events

Ein kleiner Ausschnitt aller Events

(vollstndige Liste in der Flex 3.0 Language Reference)

Komponentenevents

Initialized, CreationComplete
Hide, Show, Add, Added, Remove, Removed
Interaktionsevents

Click, FocusIn, FocusOut, MouseWheel

Events von Eingabekomponenten

TextInput, Change, DataChange, Enter

Die meisten Events verwenden eine eigene Subklasse der

Event-Basisklasse

Zusatzinformationen, die fr den vorliegenden Eventtyp von

Relevanz sind

Bessere Steuerung der Event Handler

41

Event Propagation

Bei der Verarbeitung eines Events werden drei Phasen

durchlaufen, in denen nach mglichen Event Handlern gesucht
wird:
1) Die Capturing Phase
Suche ausgehend vom
Wurzelknoten bis zum
Vater-Komponente der
auslsenden Komponente
2) Die Targeting Phase
Suche nur auf der
auslsenden Komponente
3) Bubbling Phase
Suche in umgekehrter
Reihenfolge der Capturing Phase

Mit nderungen entnommen aus: Widjaja, 2008, S. 71

42

ActionScript und XML

Verarbeitung von XML basiert

in ActionScript auf
ECMAScript for XML (E4X)

Spracherweiterung zur nativen

Arbeit mit XML Daten

Standardisiert im ECMA-357 Standard

Ziele:

Einfachheit
Konsistenz
Vertrautheit

ActionScript verwendet die E4X-Klassen

XML, XMLList, Qname und Namespace

43

E4X

Die XML Klasse

Reprsentiert ein einziges, beliebig komplexes XML-Element

var myXML:XML =
<people>
<person>Timo Mller</person>
<person>Christian Schwrer</person>
</people>;

Die XMLList Klasse

Reprsentiert eine Liste von XML-Elementen der selben Ebene

Eine XMLList mit nur einem Element wird als XML-Objekt

behandelt
var myXMLList:XMLList = myXML.person;
/*
Entspricht logisch:
var myXMLList:XMLList =
<person>Timo Mller</person>
<person>Christian Schwrer</person>;
*/

44

Zugriff auf die XML Daten

Zugriff mittels der Operatoren Punkt (.), Punkt-Punkt (..) und At (@)
myXML.person // Ausgabe: alle Personen
myXML.person.name // Ausgabe: Namen aller Personen
myXML.person.@kdnr // Ausgabe: Kundennummer aller Personen
myXML..name // Ausgabe: Alle Name-Elemente

Zugriff auf einzelnen Elemente ber Array-Schreibweise ([i])

myXML.person[2] // Ausgabe: Die dritte Person

Filtern mit Hilfe der Klammer-Schreibweise (())

// Ausgabe: Nur die Person mit dem Name Timo Mller
myXML.person.(name == "Timo Mller")
// Ausgabe: Alle Personen mit einer Kundenummer
//
grer 45
myXML.person.(@kdnr >= 45)
// Ausgabe: Der Name aller Personen mit einer
//
Kundenummer grer 45
myXML.person.(@kdnr >= 45).name

45

Flex fr Fortgeschrittene

46

Behaviours

Kombination aus Auslser und Effekt

Auslser ist gleichzusetzen mit einem Event

Effekt ist eine audiovisuelle Vernderung

Effect
MaskEffect
Iris

WipeLeft

TweenEffect
Rotate

Blur

CompositeEffect
Parallel

Sequence

Ein Effekt wird in MXML mit der Komponente verknpft

<mx:Zoom id="myZoom" duration="1000"

zoomHeightTo="2" zoomWidthTo="2"/>
<mx:Button label="Zoom" id="button1"
mouseDownEffect="{myZoom}"/>

Beispiele

47

Transitionen

Gruppe von Effekten, die den bergang von einem Zustand

zum nchsten beschreibt
Beispiel
<mx:transitions>
<mx:Transition id="myTransition"
fromState="*" toState="*">
<mx:Parallel targets="{[p1,p2,p3]}">
<mx:Move duration="500"/>
<mx:Resize duration="500"/>
</mx:Parallel>
</mx:Transition>
</mx:transitions>

FromState und ToState definieren bei welchem bergang

eine Transition abgespielt werden soll

Innerhalb der Transition wird ein Effect bzw. ein

CompositeEffect festgelegt

Die Attribute der Effekte werden aus den Daten der targets
gefllt
48

Drag&Drop

Auf Listen basierende Komponenten knnen sehr einfach um

Drag&Drop Funktionalitt erweitert werden
<mx:List
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"/>

Beispiel

Ein Drag&Drop-Vorgang durchluft in Flex drei Phasen:

1) Initialization
Beim Anfassen eines Objekts
2) Dragging
Whrend die Maustaste gehalten wird
3) Dropping
Sobald sich der Mauszeiger ber einem mglichem Ziel befindet
49

Navigation

Navigation, um den Benutzer durch die Anwendung zu fhren

Navigators geben an, welcher Container angezeigt werden soll

Hufig verwendete Navigators:

ViewStack

Stapel aus Untercontainern, von denen nur einer sichtbar ist

Bentigt zur Steuerung weitere Komponenten (z.B. LinkBar)

<mx:ViewStack id="viewstack1">
<mx:VBox id="child1" label="Seite
<mx:Label text="Inhalt Seite
</mx:VBox>
<mx:VBox id="child2" label="Seite
<mx:Label text="Inhalt Seite
</mx:VBox>
</mx:ViewStack>

1">
1"/>

Beispiel

2">
2"/>

TabNavigator

Beispiel

Erweiterung von ViewStack

Fr jeden Untercontainer wird eine Registerkarte erzeugt

Accordion

Verschiedene Untercontainer, nur einer ist sichtbar

Beispiel
50

Flex Charting Komponenten

Kostenpflichtige Erweiterung zum Flex SDK zur Visualisierung

von Daten

Beispiel

51

Flex-Styles

Das Erscheinungsbild einer Flex-Anwendung

kann mittels Cascading Style Sheets (CSS)
angepasst werden

Einbinden von CSS-Styles:

Inline
<mx:Label text="Hallo Welt" fontWeight="bold"/>

ber <mx:Style>-Element
<mx:Style>
.customLabel{font-weight:bold;}
</mx:Style>
<mx:Label text="Hallo Welt" styleName="customLabel"/>

Externe CSS-Datei
<mx:Style source="css/stylesheet.css"/>
52

Flex-Skins

Skinning erlaubt das Erscheinungsbild einer Komponente zu

verndern, indem ihre grafischen Elemente gendert oder
ersetzt werden

Graphical Skins

Programmatic Skins

Stateful Skins

Komponenten bestehen aus verschiedenen States, denen

Skins zugewiesen werden

z.B.: Button: upSkin, overSkin, downSkin, ...

Beispiel

53

Flex als HTTP-Client

Der Zugriff auf serverseitige Technologien ist mittels HTTP

ber die Komponente HTTPService mglich

Zugriff auf PHP-Skript mittels GET und POST

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="phpData.send()">
<mx:HTTPService id="phpData" url="http://localhost/index.php"
method="GET" resultFormat="text">
<mx:request>
<param1>Hallo</param1>
</mx:request>
</mx:HTTPService>
<mx:TextArea htmlText="{phpData.lastResult}"/>
</mx:Application>

Zugriff auf eine lokale XML-Datei

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="spielerData.send()">
<mx:HTTPService id="spielerData" url="data/data.xml"/>
<mx:DataGrid
dataProvider="{spielerData.lastResult.transfermarkt.spieler}"/>
</mx:Application>

54

Flex on Rails

Rails als Back-End-Lsung

Auslieferung von XML

(REST) anstelle von
HTML und JavaScript

Weitere Informationen:
Armstrong, Peter:
Flexible Rails
Flex 3 auf Rails 2
(www.flexiblerails.com)

Mit nderungen entnommen aus: Armstrong, P. (2008), S. 7

55

Flex als Web Service-Client

Der Zugriff auf Web Services ist ber die Komponente

WebService mglich

Flex untersttzt momentan SOAP 1.1 und WSDL 1.1

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="myWS.validate()">
<mx:WebService id="myWS"
wsdl="http://localhost:8080/OrderValidatorService?wsdl"
fault="handleWSFault(event)">
<mx:operation name="validate"
result="handleWSResult(event)" fault="handleWSFault(event)">
<mx:request>
<customerID>1234567890</customerID>
<email>cs116@hdm-stuttgart.de</email>
<articleID>1234567890</articleID>
<amount>10</amount>
</mx:request>
</mx:operation>
</mx:WebService>
</mx:Application>

Der Zugriff kann auch in ActionScript ber generierte

Stub-Klassen realisiert werden
56

Flex und Java

BlazeDS die Open Source-Verbindung

zwischen Flex-Frontend und Java

Remoting

Messaging Services

Verknpfung von Flex-Objekten mit

Java-Persistence-Frameworks

Flex und BlazeDS verwenden zur Kommunikation

ein proprietres binres Datenformat, das
Action Message Format (AMF)

57

Flex Security

Flex-Anwendung kann smtliche Security-Features nutzen, die

der Application Server bereitstellt

Der Flash-Player fhrt SWFs grundstzlich in einer Sandbox

aus

58

Zusammenfassung
und Ausblick

59

Microsoft Silverlight 2.0

Architektur

Windows Presentation Foundation (WPF)

Common Language Runtime (CLR) und

.NET Framework 3.5

Entwicklung

Verwendet Extensible Application Markup

Language (XAML) zur Beschreibung der Oberflche

Erstellung der Applikationslogik mit jeder .NET-Sprache

Entwicklungswerkzeuge

Microsoft Expression Blend

Microsoft Visual Studio 2008

60

JavaFX 1.0

Entwicklung

JavaFX Script

Java

Entwicklungswerkzeuge

JavaFX Production Suite

NetBeans IDE 6.5

fr JavaFX 1.0

Quelle: Sun Microsystems Inc., http://www.sun.com/software/javafx/

61

AJAX

Asynchronous JavaScript and XML

Architektur

(X)HTML

Document Object Model (DOM) zum Zugriff auf

HTML- und XML-Dokumente

JavaScript zur Manipulation des DOMs

XMLHttpRequest-Objekt des Browsers

Evtl. weitere Webtechnologien wie CSS, XSLT, ...

Frameworks/Toolkits

Dojo Toolkit, Google Web Toolkit (GWT), Rich Ajax

Platform (RAP), ...

62

Vorteile und Nachteile

Vorteile

Bessere User-Experience

Schnelle Entwicklung grafisch ansprechender

Oberflchen

Einfache Backendanbindung

Gute Tooluntersttzung

Flex SDK ist frei verfgbar

Nachteile

Initiale Ladezeit relativ lang

Keine echte Trennung von Design und Entwicklung

MVC kaum realisierbar

Proprietre Formate bei der Backendanbindung

Indizierung der SWF-Dateien durch Suchmaschinen schwierig

63

Ausblick

Flex 4.0 Codename GUMBO

Design in Mind

Neue MXML-Klassen
Bessere Trennung von Design
und Entwicklung
Developer Productivity

Performanterer Compiler
Verbessertes CSS
Bidirektionale Data-Bindings
Framework Evolution

Verbesserter Videosupport
Untersttzung von Flash Player 10 Features

64

Quellen & Literatur

W id ja ja , S .:
Rich Internet A pplications mit A dobe Flex 3
Hanser Fachbuch Verlag, Mnchen, 1. Auflage (2008)

T a p p e r , J . e t a l..:
Adobe Flex 3: Das offizielle Trainingsbuch
Addison-Wesley Verlag, Mnchen, 1. Auflage (2008)

Brown, C. E.:
The Essential Guide to Flex 3
APress, Berkley (2008)

Lott, J. et al.:
ActionScript 3.0 Cookbook

O'Reilly Media, Sebastopol, 1. Edition (2007)

Armstrong, P.:
Flexible Rails Flex 3 auf Rails 2

Hanser Fachbuch Verlag, Mnchen, 1. Auflage (2008)

65

Quellen & Literatur

Knig, K.:
Flexen fr Einsteiger Grundlagen der
Programmierung mit Flex 3

in: iX - Magazin fr professionelle Informationstechnik, S. 56ff. (Ausgabe 8/2008)

Schieer, M. et al.:
Flexibler bauen Rich Clients entwickeln mit Flex 3.0

in: iX - Magazin fr professionelle Informationstechnik, S. 72ff. (Ausgabe 3/2008)

Knig K. / Trask, J.-D.:

Im Wettstreit Flex vs. Silverlight:
Unterschiede und Gemeinsamkeiten

in: iX - Magazin fr professionelle Informationstechnik, S. 42ff. (Ausgabe 8/2008)

Mller, F.:
Java und Adobe Flex Professionelle Rich-ClientApplikationen mit Java und Adobe Flex erstellen

in: Javamagazin Java, Architekturen, SOA, Agile, S. 72ff. (Ausgabe 11/2008)

66

Quellen & Literatur

Adobe Systems (Hrsg.):

Adobe Flex 3 Documentation

http://www.adobe.com/support/documentation/en/flex/ (Zugriff: November 2008)

Wikipedia Deutschland (Hrsg.):

Ajax (Programmierung)

http://de.wikipedia.org/wiki/Ajax_(Programmierung) (Zugriff: Dezember 2008)

67

Vielen Dank fr die Aufmerksamkeit

68