1

Adobe FLEX

Christian Schwrer (cs116)

Timo Mller (tm043)

2

Agenda

Einfhrung Flex Grundlagen

MXML ActionScript

Flex fr Fortgeschrittene Zusammenfassung und Ausblick

3

Einfhrung

4

Was ist eine RIA?

Bisher

Seitenbasierte Denkweise Bei jeder Anfrage wird eine Seite komplett bertragen Zustand wird auf dem Server verwaltet Eingeschrnkte User-Experience

5

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

6

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)

7

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

8

Zutaten eine Flex-Anwendung

MXML XML-basierte Layoutdefinition Definiert das Aussehen der Anwendung

ActionScript Objekt-orientierte Skriptsprache Definiert das Verhalten der Anwendung

ActionscriptMXML

Flex Klassenbibliothek

Externe Klassenbiblitheken

SWF-Anwendung

Flex SDK Browser / Flash-Player

AIR-Anwendung

AIRClient Runtime

9

Vom Code zum Programm

MXML ist lediglich Abstraktionsebene ber ActionScript Aus den ActionScriptklassen wird eine SWF-Datei generiert

10

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)

11

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

12

MXML Grundlagen

13

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

14

Das MXML-Grundgerst

XML-Deklaration Application-Knoten

Festlegung des Kontextes der gesamten Applikation Haupt-Container

15

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

16

Die Flex-Klassenhierarchie

Visuelle Komponenten in der Flex-Klassenhierarchie (Auszug):

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

17

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

18

Beispiel fr Layout-Container

Hauptcontainer (mx:application)Container 1 (mx:HBox)

Container 2 (mx:VBox)

Darstellung im Design-Modus des Flex Builders:

19

Beispiel fr Layout-Container

Darstellung im Source-Modus des Flex Builders

20

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

21

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:

22

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

23

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)

24

Beispiel fr Controls

Darstellung im Source-Modus des Flex Builders

25

Komponenten Explorer

bersicht ber die vordefinierten Komponenten im Flex 3 Component Explorer: http://examples.adobe.com/flex3/componentexplorer/explorer.html

26

Benutzerdefinierte Komponenten

Zur Modularisierung einer Flex-Anwendung Zusammenfassen mehrere bestehender Komponenten Erweiterung der Funktionalitt einer bestehenden Komponente

Erstellung:1) Neues XML-Dokument anlegen2) XML-Deklaration einfgen3) Wurzel-Element: Bestehende Komponente, auf

der die benutzerdefinierte Komponente basiert4) Hinzufgen der Funktionalitt (MXML & ActionScript)

Verwendung:1) Definieren eines XML-Namensraums2) Instanziierung ber den Namensraum

(analog zu einer vordefinierten Komponente)

Flex Builder:New MXML Component

Flex Builder:Components Custom Drag&Drop

27

Beispiel: Eigene Komponente

Erstellung MyComponent.mxml

28

Beispiel: Eigene Komponenten

Verwendung der benutzerdefinierten Komponente MyComponent in der Flex-Anwendung

29

States

States sind Zustnde, die eine Flex-Anwendung oder Komponente annehmen kann Jede MXML-Seite hat mindestens einen Zustand (Base State)

Durch den Einsatz der State-Klasse knnen beliebig viele Zustnde definiert werden 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

30

States

Hinzufgen und Steuern von States:

31

States

Wechsel zwischen den Zustnden

Beispiel

32

ActionScript Grundlagen

33

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)

34

ActionScript Syntax

Package

Variablen

Class

Function

package hdm { }

public class TextClass{

public function TextClass() { }}

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

var myString:String = "Hallo Welt!"

35

ActionScript Syntax

Kommentare

Vererbung

Casting

// Ein Kommentar/*

Noch ein Kommentar*/

public class MyTestClass extends TestClass { }

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

36

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

Inline-Definition

Import

// Actionscript Code]]>

37

[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

[Bindable]var myString:String = "Hallo Welt!"

]]>

38

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

39

Event Handler registrieren

Inline

Im Actionscript-Code

public function test():void {myButton.addEventListener(MouseEvent.CLICK, onClick);

}public function onClick(e:MouseEvent):void {

myLabel.text = "Auf Wiedersehen!";}

]]>

40

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 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

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

41

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

42

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 PhaseSuche nur auf der auslsenden Komponente

3) Bubbling PhaseSuche in umgekehrter Reihenfolge der Capturing Phase

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

43

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-KlassenXML, XMLList, Qname und Namespace

44

E4X

Die XML Klasse Reprsentiert ein einziges, beliebig komplexes XML-Element

Die XMLList Klasse Reprsentiert eine Liste von XML-Elementen der selben Ebene Eine XMLList mit nur einem Element wird als XML-Objekt

behandelt

var myXML:XML =

Timo MllerChristian Schwrer

;

var myXMLList:XMLList = myXML.person;/*Entspricht logisch:var myXMLList:XMLList =

Timo MllerChristian Schwrer;

*/

45

Zugriff auf die XML Daten

Zugriff mittels der Operatoren Punkt (.), Punkt-Punkt (..) und At (@)

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

Filtern mit Hilfe der Klammer-Schreibweise (())

myXML.person // Ausgabe: alle PersonenmyXML.person.name // Ausgabe: Namen aller PersonenmyXML.person.@kdnr // Ausgabe: Kundennummer aller PersonenmyXML..name // Ausgabe: Alle Name-Elemente

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

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

46

Flex fr Fortgeschrittene

47

Behaviours

Kombination aus Auslser und Effekt Auslser ist gleichzusetzen mit einem Event Effekt ist eine audiovisuelle Vernderung

Ein Effekt wird in MXML mit der Komponente verknpft

Effect

MaskEffect TweenEffect CompositeEffect

Iris WipeLeft Rotate Blur Parallel Sequence

Beispiele

48

Transitionen

Gruppe von Effekten, die den bergang von einem Zustand zum nchsten beschreibt

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

Beispiel

49

Drag&Drop

Auf Listen basierende Komponenten knnen sehr einfach um Drag&Drop Funktionalitt erweitert werden

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

Beim Anfassen eines Objekts

2) DraggingWhrend die Maustaste gehalten wird

3) DroppingSobald sich der Mauszeiger ber einem mglichem Ziel befindet

Beispiel

50

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)

TabNavigator Erweiterung von ViewStack Fr jeden Untercontainer wird eine Registerkarte erzeugt

Accordion Verschiedene Untercontainer, nur einer ist sichtbar

Beispiel

Beispiel

Beispiel

51

Flex Charting Komponenten

Kostenpflichtige Erweiterung zum Flex SDK zur Visualisierung von Daten

Beispiel

52

Flex-Styles

Das Erscheinungsbild einer Flex-Anwendung kann mittels Cascading Style Sheets (CSS) angepasst werden

Einbinden von CSS-Styles: Inline

ber -Element

Externe CSS-Datei

.customLabel{font-weight:bold;}

53

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

54

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

Zugriff auf eine lokale XML-Datei

Hallo

55

Flex on Rails

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

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)

56

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

Der Zugriff kann auch in ActionScript ber generierte Stub-Klassen realisiert werden

1234567890 cs116@hdm-stuttgart.de 1234567890 10

57

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)

58

Flex Security

Flex-Anwendung kann smtliche Security-Features nutzen, die der Application Server bereitstellt

Der Flash-Player fhrt SWFs grundstzlich in einer Sandbox aus

59

Zusammenfassung und Ausblick

60

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

61

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/

62

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), ...

63

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

64

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

65

Quellen & Literatur

W id ja ja , S .:Rich Internet Applications mit Adobe 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 3APress, Berkley (2008)

Lott, J. et al.:ActionScript 3.0 CookbookO'Reilly Media, Sebastopol, 1. Edition (2007)

Armstrong, P.:Flexible Rails Flex 3 auf Rails 2Hanser Fachbuch Verlag, Mnchen, 1. Auflage (2008)

66

Quellen & Literatur

Knig, K.:Flexen fr Einsteiger Grundlagen der Programmierung mit Flex 3in: iX - Magazin fr professionelle Informationstechnik, S. 56ff. (Ausgabe 8/2008)

Schieer, M. et al.:Flexibler bauen Rich Clients entwickeln mit Flex 3.0in: iX - Magazin fr professionelle Informationstechnik, S. 72ff. (Ausgabe 3/2008)

Knig K. / Trask, J.-D.:Im Wettstreit Flex vs. Silverlight: Unterschiede und Gemeinsamkeitenin: iX - Magazin fr professionelle Informationstechnik, S. 42ff. (Ausgabe 8/2008)

Mller, F.:Java und Adobe Flex Professionelle Rich-Client-Applikationen mit Java und Adobe Flex erstellenin: Javamagazin Java, Architekturen, SOA, Agile, S. 72ff. (Ausgabe 11/2008)

67

Quellen & Literatur

Adobe Systems (Hrsg.):Adobe Flex 3 Documentationhttp://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)

68

Vielen Dank fr die Aufmerksamkeit

Folie 1Folie 2Folie 3Folie 4Folie 5Folie 6Folie 7Folie 8Folie 9Folie 10Folie 11Folie 12Folie 13Folie 14Folie 15Folie 16Folie 17Folie 18Folie 19Folie 20Folie 21Folie 22Folie 23Folie 24Folie 25Folie 26Folie 27Folie 28Folie 29Folie 30Folie 31Folie 32Folie 33Folie 34Folie 35Folie 36Folie 37Folie 38Folie 39Folie 40Folie 41Folie 42Folie 43Folie 44Folie 45Folie 46Folie 47Folie 48Folie 49Folie 50Folie 51Folie 52Folie 53Folie 54Folie 55Folie 56Folie 57Folie 58Folie 59Folie 60Folie 61Folie 62Folie 63Folie 64Folie 65Folie 66Folie 67Folie 68