Rich Internet Applications, Flex & Mate. (Ja, das ist Grafische Benutzeroberflächen!) Jakob Külzer jakob.kuelzer@gmail.

Transkript

1 Rich Internet Applications, Flex & Mate (Ja, das ist Grafische Benutzeroberflächen!) Jakob Külzer

2 Überblick Mein Thema im Überblick 1. Definitionen 2. Rich Internet Applications 3. Adobe Flex & Mate 4. Architektur

3 Mein Thema im Überblick

4 Thema

5 Thema Creating a library to ease building Rich Internet Applications with Flex and Mate

6 Thema Creating a library to ease building Rich Internet Applications with Flex and Mate Was sind Rich Internet Applications?

7 Thema Creating a library to ease building Rich Internet Applications with Flex and Mate Was sind Rich Internet Applications? Flex?

8 Thema Creating a library to ease building Rich Internet Applications with Flex and Mate Was sind Rich Internet Applications? Flex? Mate?!

9 Definitionen

10 Begriffe Widget, oft auch Control elementare Elemente in einer GUI Beispiel Button, Drop Down, Label, Date Picker

11 Teil 1: Rich Internet Applications /05/30/what-is-a-rich-web-application-and-whats-the-buzzsurrounding-web-20-all-about

12 Ursprung RIAs als Verschmelzung von Desktop- und Webanwendungen Vorteile aus beiden Welten

13 Desktopanwendungen Traditionelle Anwendungen, z.b. Eclipse, Mail Clients, etc. View mittels nativer UI Frameworks Hohe Interaktivität Flexibel Distribution schwierig, große Downloads, Laufzeitumgebung, etc Verwendbar erst nach Installation Aktualisierung problematisch

14 Webanwendungen Anwendung läuft auf dem Server (hier nur Anwendungen ohne AJAX) View mittels HTML im Browser Keine Installation, keine Downloads Distribution via Internet, keine Vorbedingungen* Sehr einfache Interaktionen wegen Seitenmetapher Eingeschränkte Controls in HTML

15 Rich Internet Applications Verschmelzen Desktop und Webanwendungen Komplexe, reiche Interaktionen Unmittelbares Feedback, z.b. Vorschläge, Validierung, etc Animationen Drag & Drop Keine Installation, keine Page Reloads, einfache Updates

16 Arten Klassifizierung nach View Technology: Flash basierend Microsoft Silverlight HTML, JavaScript und AJAX Java, JavaFX XUL...

17 Teil 2: Adobe Flex & Mate

18 Adobe Flex Entwickelt von Macromedia Version 1.0 Released in 2004 Komponentenbasierte Bibliothek Basierend auf Adobe s Flash Player Flex SDK Open Source Flex Builder / Flash Builder kommerziell

19 Flex basiert auf Flash Grundlage Flash Player Daher gute Multimedia Unterstützung Flex wird in Flash Bytecode kompiliert Verwendbar auf Adobe s Flash Platform:

20 ActionScript 3 Basiert auf ECMA Script, kompatibel zu ECMA-262 Objektorientiert Klassen Interfaces Namespaces Klassenbibliothek

21 MXML Flex wird in AS3 programmiert Benutzeroberflächen prozedural zu entwickeln aufwendig XML basierte Sprache zu Erstellung von Oberflächen: MXML Oberflächen deklarativ erstellen einfacher Wird vom mxmlc in AS3 übersetzt

22 Flex und Events Flex ist eventbasiert Unterstützt Binding auf Sprachebene Alle Komponenten erben von UIComponent; diese Klasse wiederum erbt indirekt von EventDispatcher Event zu verwalten und zu routen wird mit steigender Anwendungsgröße schwieriger Bubbling Events schaffen Linderung

23 Flex Event Handling Event und IEventDispatcher bringen alle Methoden mit dispatchevent: dispatchevent(new FooEvent( FooHappened )); addeventlistener: foo.addeventlistener( FooHappened, eventhandler);... function eventhandler(event:fooevent):void {... }

24 Flex Binding Attribute können als Bindable definiert werden: [Bindable] public var name:string; Bindable Attribute feuern Events wenn ihr Wert geändert wird Eventhandler können auf diese Events reagieren in MXML besonders einfach: <mx:label text= {name} />

25 Bubbling Events Events werden nur direkt an interessierte Handler propagiert Problematisch in großen Anwendungen in Flex können Events in der View Hierarchie bubblen Alle Event Handler auf dem Weg werden aufgerufen

26 Bubbling Events Events werden nur direkt an interessierte Handler propagiert Problematisch in großen Anwendungen in Flex können Events in der View Hierarchie bubblen Alle Event Handler auf dem Weg werden aufgerufen

27 Bubbling Events Events werden nur direkt an interessierte Handler propagiert Problematisch in großen Anwendungen in Flex können Events in der View Hierarchie bubblen Alle Event Handler auf dem Weg werden aufgerufen

28 Bubbling Events Events werden nur direkt an interessierte Handler propagiert Problematisch in großen Anwendungen in Flex können Events in der View Hierarchie bubblen Alle Event Handler auf dem Weg werden aufgerufen

29 Bubbling Events Events werden nur direkt an interessierte Handler propagiert Problematisch in großen Anwendungen in Flex können Events in der View Hierarchie bubblen Alle Event Handler auf dem Weg werden aufgerufen

30 Mate Open Source Framework für Flex Führt neue MXML Tags ein Ziel: einfacheres Verwalten von Events Außerdem: Dependency Injection

31 Mate s Eventmaps Mate bietet sog. EventMaps die es erlauben Events einfach zu verwalten Anwendungen können beliebig viele EventMaps enthalten EventMaps können auf unterschiedlichen Ebenen eingebunden werden EventMaps können auf Events reagieren Objekte erzeugen Dependency Injection durchführen

32 Mate Tags Werden in der Hierarchie eingehängt, die wichtigsten Tags: Event Handlers, behandeln Events: <EventHandlers type= FooHappened >... </EventHandlers> Method Invokers: <MethodInvoker generator= {Object} method= dosomething /> Viele mehr, z.b. ObjectBuilder, Injectors, PropertyInjector,...

33 Teil 3: Architektur Wie passt am Ende alles zusammen? Quelle:

34 Event Driven Architecture Grafische Benutzeroberflächen sind Event Driven Kein linearer Programmablauf Die Anwendung wartet auf Benutzereingaben und reagiert Daher durchgehend asynchrones Programmiermodel Direkte Kopplung schlecht, da alles asynchron abläuft

35 Architektur mit Mate Frameworks wie Cairngorm geben Struktur vor. Sehr genau. Mate gibt keine Architektur vor Vorteil: hohe Flexibilität, keine Grenzen durch das Mate* Nachteil: Architektur aufzubauen schwierig

36 Architektur aus der Vogelperspektive Panel List Presentation Model Data for List Manager Data for List Click Event Handler Click Event Handler Button Service Storage

37 Architektur aus der Vogelperspektive Eng gekoppelt Panel List Presentation Model Data for List Manager Data for List Click Event Handler Click Event Handler Button Service Storage

38 Architektur aus der Vogelperspektive Eng gekoppelt Panel Presentation Model kommunizieren über Events, lose Kopplung Manager List Data for List Data for List Click Event Handler Click Event Handler Button Service Storage

39 Architektur aus der Vogelperspektive Eng gekoppelt Panel Presentation Model kommunizieren über Events, lose Kopplung Manager List Data for List Data for List Event Map Click Event Handler Click Event Handler Button Service Storage

40 Presentation Model Teilt Views, z.b. Formulare in eigentlichen View, das sichtbare, kommuniziert nur mit dem Presentation Model und presentation model, das Verhalten; kommuniziert mit dem Rest der Anwendung über Events Idee: Trennung von Logik und Darstellung Vorteile: leichter zu Warten, testbare Views, flexibler

41 Materialien Bei Interesse stelle ich diese Folien und Beispielcode online unter:

42 Quellen & Referenzen Chris Giametta, Pro Flex on Spring, Apress Flex Event Propagation: livedocs.adobe.com/flex/3/html/events_08.html

43 Vielen Dank für die Aufmerksamkeit.