Rich Internet Applications mit Adobe Flex 3

Transkript

1 Simon Widjaja Rich Internet Applications mit Adobe Flex 3 HANSER

2 V Inhalt 1 Einstieg in Flex Next Generation Internet j AJAX versus Flex I Flash und Flex - die Evolution Die Bestandteile von Flex Der Flash Player 9 (FP9) Die Layoutsprache MXML Programmierung mit ActionScript Entwicklung und Aufbau einer Flex-Anwendung Flex fur den Desktop: Adobe AIR Dokumentationen und nutzliche Links 7 2 Die Entwlcklungsumgebung Flex SDK Flex Builder Die verschiedenen Projektarten J Einneucs Projekt anlegen und ausfiihren 14 3 MXML Struktur und Syntax MXML-Grundgeriist und Zeichenkodierung Is Kommentare innerhalb eines MXML-Dokuments MXML-Dateinamen Aufbau von MXML-Dokumenten 2(1 3.2 MXML und ActionScript Namespaces 2? 3.4 Eigenschaften von Komponenten setzen Darstellung von XML tnnerhalb von MXML,. 25

3 VI inhalt 4 ActionScript Einfuhrung Uber ActionScript ActionScript imumfeld von Flex Spuren legen mit traceo Kommentare in ActionScript Einsatz von ActionScript Inline: innerhalb von MXML-Tag-Attributen Nested: Verschachtelt in MXML-Tags Block: MXML Script Blocks Ausgelagert: ActionScript in separater Datei Klassen: Externe Definitionsdateien ActionScript 3.0 imvergleich Was gfotesneues in ActionScript Sprachelemente und Syntax Variablenund Datentypen Klassen, Eigenschaften u nd Methoden Vergleich: ActiodScript, PHP und Java Praxis-WorKtfiop Einleitung Anfordefurigsliste, So soil die fertige Anwendung aussehen VorbereittHig Das User Interface Das MXML-GrundgerOst Der Kopfteil unserer Anwendung Alter guten Dingesind drei: Unsere drei Fenster Zeit fiir Veranderutig : pie zwei States unserer Anwendung Es passiert was: Bin Event tritt ein Zeit fijr ein wenig Action: Das erste richtige ActionScript Zu guter I-etzt noch etv/as fijr die Augen 58 6 Das Event'Modell von Flex Einfuhrung Ereignisfluss: das Event-Modell verstehen Event-Handler Events in MXML abfangen Events in ActionScript abfangen Welche v ents sind v e rfiigbar? Die Event-Klasse, Event Propagation Unterschied zwischen target und currenttarget Die addf>entlistener()-methode Prioritat von Events..., Propagation j 0 Event-Rette stoppen 74

4 VII Inhalt 6.4 Event-Unterklassen MouseEvent KeyboardEvent Events fur Fortgeschrittene Eigene Event-Klasse erstellen Events manuell feuern 82 7 Die Flex-Bausteine: Komponenten Komponenten, Controls Layout-Container Navigators List-basierte Komponenten List Tree DataGrid AdvancedDataGrid Ill ItemRenderer Ill ItemEditor Layout Layout-Regeln Scrollbalken Verschachteln von Containem Rahmen und Abstand Medien integration Einfuhrung Grafiken und Bilder laden SWF-Animationen und Skripte laden Ladevorgang uberwachen Einbinden von Sound Einbinden von Video Assets mit statischer Klasse verwalten Restriktionen beim Laden externer Medien Anpassen der Benutzeroberflache Einleitung Styles Instance/Inline Style CSS: Class Styles und Type Styles Globale Styles Einsatz von Styles in MXML und externen CSS-Dateien Einsatz von Styles in ActionScript Verfugbare Style-Eigenschaften Formate fur Style-Eigenschaften 153

5 Inhalt Vererbung und Dominanz CSS-Designerim Flex Builder Component Skinning Namenskonvendonen fur Skins Graphical Skinning Skins mit Photoshop CS3 erstellen Skins mit Adobe Flash CS3 erstellen Skins mit anderen Programmen erstellen Programmatic Skinning Fonts in Flex ] Fonts nutzen und einbetten Probleme beim Nutzen und Einbetten von Fonts Fonts mit FlashType Runtime CSS States, Effects und Transitions States 1" Mit States arbeiten (MXML) Mogliche Modifikationen innerhalb eines States States ableiten States in Komponenten und Modulen States und ihre Events States verfeinem Effects Effects erstellen und anwenden Die Trickkiste: Cbersicht der verfugbaren Effects und Trigger Effects kombinieren Effects und ihre Events Sonderfalle Eigene Effects erstellen Transitions Transitions mit States verkniipfen Event-Kette von States und Transitions Eins nach dem anderen: Action Effects Fine-Tuning: Filter Weitere Werkzeuge des Flex-Frameworks CursorManager PopUp Drag-and-Drop Events einer Drag-and-Drop-Operation Custom Drag-and-Drop (fur nicht List-basierte Komponenten) Drucken in Flex Einfaches Drucken Drucken eines DataGrids mit Druckvorlage 260 Vtll

6 Idhnlt 12 Umgang mit lokalen Daten Einfuhrung Daten aktuell halten: Datenbindung (Data Binding) Daten richtig stmkturieren und bereitstellen: Data Model Daten aufbereiten und formatieren: Data Formatter Daten aufgultigkeituberpriifen: Data Validation Datenfluss Data Binding Inline Data Binding Die Tag-Variante fur Data Binding Data Binding mit ActionScript realisieren Eigene Objekteigenschaften fiir Data Binding aktivieren ActionScript innerhalb eines Data Bindings Data Model Model, View und Controller (MVC) Data Models in Flex Data Formatting Formatter in MXML aniegen Formatter in ActionScript realisieren Fehler in Formatter abfangen Ubersicht der Formatter-Klassen von Flex Custom Formatter programmieren Data Validation Validator in MXML aniegen Validator in ActionScript realisieren Ubersicht der Validator-Klassen von Flex Validiemng nur bei bestimmten Events Feedback aufandererkomponente ausgeben Pflichtfelder Manuelles Auslosen eines Validators Fehlermeldungen anpassen Custom Validator programmieren LocalConnection SharedObject (Flash Cookie) SharedObject aniegen Besonderheiten bei SharedObjects Beispiel: SharedObject-Editor Externe Datenquellen Einleitung HTTP-basierte Kommunikation HTTPService Webservice RemoteObject AMFPHP BlazeDS 353

7 Inhalt Download und Installation Java-Klassen Die Flex-Anwendung Austausch von Dateien Herunterladen von Dateien..., Hochladen von Dateien Komponenten und Module entwickeln Einleitung Vorteile der modularen Entwicklung Komponenten Module Komponenten vs. Module Workflow und Aufbau einer modularen Flex-Anwendung Eigene Komponenten entwickeln Composite Components (MXML) Extended Components (ActionScript), Template Components (MXML) Komponentenentwicklung fur Fortgeschrittene Eine Custom Component entwickeln Komponenten kompilieren und verteilen Module Application Domain vs. Module Domain Kommunikation mit Modulen Gute Programmlerung, schlechte Programmierung Sonicht: Eng gekoppelte Programmierung Lose gekoppelte Programmierung Cairngorm Download Anforderungen..Minishop 1 *., Value Object und Model Locator User Interface Events Front Controller Commands Service und Datenquelle i 16 Ftex fiir den Desktop (Adobe AIR) Einfuhrung in Adobe AIR Entwicklung einer AIR-Anwendung AIR-Projekt im Flex Builder 3 erstellen Die AIR-Komponenten Veroffentlichung von AIR-Anwendungen Exportieren von AIR-Anwendungen AIR-Beispielanwendung 4^3