flex ejemplos
Post on 10-Nov-2015
8 Views
Preview:
DESCRIPTION
TRANSCRIPT
-
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
top related