Inhalt | 6 |
Vorwort | 14 |
1 Einstieg in Flex 3.0 | 18 |
1.1 Next Generation Internet | 18 |
1.1.1 AJAX versus Flex | 18 |
1.1.2 Flash und Flex – die Evolution | 19 |
1.2 Die Bestandteile von Flex 3 | 19 |
1.2.1 Der Flash Player 9 (FP9) | 20 |
1.2.2 Die Layoutsprache MXML | 21 |
1.2.3 Programmierung mit ActionScript 3.0 | 21 |
1.3 Entwicklung und Aufbau einer Flex-Anwendung | 22 |
1.4 Flex für den Desktop: Adobe AIR | 23 |
1.5 Dokumentationen und nützliche Links | 24 |
2 Die Entwicklungsumgebung | 26 |
2.1 Flex SDK | 26 |
2.2 Flex Builder 3 | 28 |
2.2.1 Die verschiedenen Projektarten | 31 |
2.2.2 Ein neues Projekt anlegen und ausführen | 31 |
3 MXML | 34 |
3.1 Struktur und Syntax | 34 |
3.1.1 MXML-Grundgerüst und Zeichenkodierung | 35 |
3.1.2 Kommentare innerhalb eines MXML-Dokuments | 36 |
3.1.3 MXML-Dateinamen | 37 |
3.1.4 Aufbau von MXML-Dokumenten | 37 |
3.2 MXML und ActionScript | 39 |
3.3 Namespaces | 40 |
3.4 Eigenschaften von Komponenten setzen | 41 |
3.5 Darstellung von XML innerhalb von MXML | 42 |
4 ActionScript | 44 |
4.1 Einführung | 44 |
4.1.1 Über ActionScript | 44 |
4.1.1.1 Arbeitsweise von ActionScript | 45 |
4.1.1.2 AVM1 und AVM2: Unterschiede und Kompatibilität | 45 |
4.1.2 ActionScript im Umfeld von Flex | 46 |
4.1.3 Spuren legen mit trace() | 47 |
4.1.4 Kommentare in ActionScript | 48 |
4.2 Einsatz von ActionScript | 49 |
4.2.1 Inline: Innerhalb von MXML-Tag-Attributen | 50 |
4.2.2 Nested: Verschachtelt in MXML-Tags | 51 |
4.2.3 Block: MXML Script Blocks | 51 |
4.2.4 Ausgelagert: ActionScript in separater Datei | 53 |
4.2.5 Klassen: Externe Definitionsdateien | 55 |
4.3 ActionScript 3.0 im Vergleich | 55 |
4.3.1 Was gibt es Neues in ActionScript 3.0 | 55 |
4.3.1.1 Primitive Datentypen | 56 |
4.3.1.2 Laufzeittypisierung | 56 |
4.3.1.3 Finale Klassen | 57 |
4.3.1.4 Funktionsabschluss (Method Closure) | 57 |
4.3.1.5 Fehlerbehandlung | 58 |
4.3.1.6 Neue XML-Funktionen | 58 |
4.3.1.7 Reguläre Ausdrücke | 58 |
4.3.1.8 LowLevel und Binärdaten | 58 |
4.3.1.9 Funktionen für den Umgang mit Text | 58 |
4.4 Sprachelemente und Syntax | 59 |
4.4.1 Variablen und Datentypen | 59 |
4.4.1.1 Strikte Typisierung | 60 |
4.4.1.2 Datentypen | 61 |
4.4.1.3 Geltungsbereich von Variablen | 62 |
4.4.1.4 Abfragen des Datentyps | 63 |
4.4.2 Klassen, Eigenschaften und Methoden | 63 |
4.4.2.1 Aufbau einer Klassendefinition | 64 |
4.5 Vergleich: ActionScript, PHP und Java | 65 |
5 Praxis-Workshop | 68 |
5.1 Einleitung | 68 |
5.1.1 Anforderungsliste | 68 |
5.1.2 So soll die fertige Anwendung aussehen | 69 |
5.1.3 Vorbereitung | 70 |
5.2 Das User Interface | 70 |
5.2.1 Das MXML-Grundgerüst | 70 |
5.2.2 Der Kopfteil unserer Anwendung | 72 |
5.2.3 Aller guten Dinge sind drei: Unsere drei Fenster | 72 |
5.2.4 Zeit für Veränderung: Die zwei States unserer Anwendung | 73 |
5.2.5 Es passiert was: Ein Event tritt ein | 74 |
5.2.6 Zeit für ein wenig Action: Das erste richtige ActionScript | 75 |
5.2.7 Zu guter Letzt noch etwas für die Augen ... | 75 |
6 Das Event-Modell von Flex | 78 |
6.1 Einführung | 78 |
6.1.1 Ereignisfluss: das Event-Modell verstehen | 79 |
6.2 Event-Handler | 80 |
6.2.1 Events in MXML abfangen | 80 |
6.2.2 Events in ActionScript abfangen | 82 |
6.2.3 Welche Events sind verfügbar? | 84 |
6.2.4 Die Event-Klasse | 85 |
6.3 Event Propagation | 87 |
6.3.1 Unterschied zwischen target und currentTarget | 88 |
6.3.2 Die addEventListener()-Methode | 89 |
6.3.3 Priorität von Events | 90 |
6.3.4 Propagation in Event-Kette stoppen | 91 |
6.4 Event-Unterklassen | 92 |
6.4.1 MouseEvent | 94 |
6.4.2 KeyboardEvent | 96 |
6.5 Events für Fortgeschrittene | 98 |
6.5.1 Eigene Event-Klasse erstellen | 98 |
6.5.2 Events manuell feuern | 99 |
7 Die Flex-Bausteine: Komponenten | 102 |
7.1 Komponenten | 102 |
7.1.1 Controls | 103 |
7.1.1.1 Textausgabe (Label und Text) | 105 |
7.1.1.2 Schaltflächen (Button, LinkButton und PopUpButton) | 107 |
7.1.1.3 Alert | 109 |
7.1.1.4 Texteingabe (TextInput und TextArea) | 111 |
7.1.1.5 Auswahl (CheckBox, RadioButton, ComboBox, NumericStepper) | 112 |
7.1.1.6 List, Tree, DataGrid | 114 |
7.1.1.7 Interactive Data Visualization | 114 |
7.1.2 Layout-Container | 114 |
7.1.3 Navigators | 116 |
7.2 List-basierte Komponenten | 119 |
7.2.1 List | 119 |
7.2.1.1 Füllen von List-basierten Komponenten | 120 |
7.2.1.2 Formatieren von Zellen | 121 |
7.2.1.3 Den ausgewählten Eintrag auslesen | 122 |
7.2.2 Tree | 123 |
7.2.3 DataGrid | 126 |
7.2.4 AdvancedDataGrid | 128 |
7.2.5 ItemRenderer | 128 |
7.2.6 ItemEditor | 131 |
7.3 Layout | 134 |
7.3.1 Layout-Regeln | 134 |
7.3.2 Scrollbalken | 137 |
7.3.3 Verschachteln von Containern | 137 |
7.3.4 Rahmen und Abstand | 138 |
8 Medienintegration | 140 |
8.1 Einführung | 140 |
8.2 Grafiken und Bilder laden | 142 |
8.2.1 SWF-Animationen und Skripte laden | 146 |
8.2.2 Ladevorgang überwachen | 149 |
8.3 Einbinden von Sound | 151 |
8.4 Einbinden von Video | 153 |
8.5 Assets mit statischer Klasse verwalten | 155 |
8.6 Restriktionen beim Laden externer Medien | 156 |
9 Anpassen der Benutzeroberfläche | 158 |
9.1 Einleitung | 158 |
9.2 Styles | 159 |
9.2.1 Instance/Inline Style | 160 |
9.2.2 CSS: Class Styles und Type Styles | 160 |
9.2.3 Globale Styles | 164 |
9.2.4 Einsatz von Styles in MXML und externen CSS-Dateien | 165 |
9.2.5 Einsatz von Styles in ActionScript | 166 |
9.2.6 Verfügbare Style-Eigenschaften | 168 |
9.2.7 Formate für Style-Eigenschaften | 170 |
9.2.8 Vererbung und Dominanz | 173 |
9.2.9 CSS-Designer im Flex Builder 3 | 175 |
9.3 Component Skinning | 178 |
9.3.1 Namenskonventionen für Skins | 179 |
9.3.2 Graphical Skinning | 179 |
9.3.3 Skins mit Photoshop CS3 erstellen | 182 |
9.3.4 Skins mit Adobe Flash CS3 erstellen | 191 |
9.3.5 Skins mit anderen Programmen erstellen | 195 |
9.3.6 Programmatic Skinning | 196 |
9.4 Fonts in Flex | 201 |
9.4.1 Fonts nutzen und einbetten | 203 |
9.4.2 Probleme beim Nutzen und Einbetten von Fonts | 206 |
9.4.3 Fonts mit FlashType | 207 |
9.5 Runtime CSS | 211 |
10 States, Effects und Transitions | 216 |
10.1 States | 216 |
10.1.1 Mit States arbeiten (MXML) | 218 |
10.1.2 Mögliche Modifikationen innerhalb eines States | 222 |
10.1.2.1 Eigenschaften verändern | 223 |
10.1.2.2 Styles verändern | 223 |
10.1.2.3 Komponenten hinzufügen | 224 |
10.1.2.4 Komponenten entfernen | 227 |
10.1.2.5 Event-Handler setzen | 228 |
10.1.3 States ableiten | 229 |
10.1.4 States in Komponenten und Modulen | 230 |
10.1.5 States und ihre Events | 231 |
10.1.6 States verfeinern | 231 |
10.2 Effects | 231 |
10.2.1 Effects erstellen und anwenden | 232 |
10.2.1.1 Zuweisung über Trigger | 233 |
10.2.1.2 Manuelles Starten eines Effects über die play()-Methode | 233 |
10.2.1.3 Zuweisung des Effects erfolgt über eine Style-Definition | 234 |
10.2.1.4 Effects an States binden | 235 |
10.2.2 Die Trickkiste: Übersicht der verfügbaren Effects und Trigger | 235 |
10.2.3 Effects kombinieren | 238 |
10.2.4 Effects und ihre Events | 239 |
10.2.5 Sonderfälle | 241 |
10.2.5.1 Beliebige numerische Eigenschaften animieren | 241 |
10.2.5.2 Start eines Effects verzögern | 242 |
10.2.5.3 Effect frühzeitig beenden | 242 |
10.2.5.4 Effect mehrfach wiederholen | 242 |
10.2.5.5 Effect mal rückwärts | 243 |
10.2.5.6 Effects und eingebettete Fonts | 243 |
10.2.5.7 Non-lineare Effects (Easing) | 243 |
10.2.5.8 SoundEffect | 246 |
10.2.6 Eigene Effects erstellen | 246 |
10.2.6.1 Interne Arbeitsweise von Effects | 246 |
10.2.6.2 Eigene Effect-Klasse erstellen | 247 |
10.2.6.3 Eigene TweenEffect-Klasse erstellen | 250 |
10.2.6.4 Eigene Effect-Trigger erstellen | 253 |
10.3 Transitions | 253 |
10.3.1 Transitions mit States verknüpfen | 254 |
10.3.1.1 Transitions mit MXML erstellen | 254 |
10.3.1.2 Transitions in ActionScript | 257 |
10.3.2 Event-Kette von States und Transitions | 258 |
10.3.3 Eins nach dem anderen: Action Effects | 260 |
10.3.4 Fine-Tuning: Filter | 263 |
10.3.4.1 Eigene Filter erstellen | 264 |
11 Weitere Werkzeuge des Flex-Frameworks | 266 |
11.1 CursorManager | 266 |
11.2 PopUp | 268 |
11.3 Drag-and-Drop | 270 |
11.3.1 Events einer Drag-and-Drop-Operation | 271 |
11.3.2 Custom Drag-and-Drop (für nicht List-basierte Komponenten) | 273 |
11.4 Drucken in Flex | 275 |
11.4.1 Einfaches Drucken | 275 |
11.4.2 Drucken eines DataGrids mit Druckvorlage | 277 |
12 Umgang mit lokalen Daten | 280 |
12.1 Einführung | 280 |
12.1.1 Daten aktuell halten: Datenbindung (Data Binding) | 280 |
12.1.2 Daten richtig strukturieren und bereitstellen: Data Model | 282 |
12.1.3 Daten aufbereiten und formatieren: Data Formatter | 283 |
12.1.4 Daten auf Gültigkeit überprüfen: Data Validation | 284 |
12.1.5 Datenfluss | 286 |
12.2 Data Binding | 287 |
12.2.1 Inline Data Binding | 288 |
12.2.2 Die Tag-Variante für Data Binding | 289 |
12.2.3 Data Binding mit ActionScript realisieren | 290 |
12.2.3.1 Data Binding per Event überwachen bzw. abfangen | 293 |
12.2.4 Eigene Objekteigenschaften für Data Binding aktivieren | 295 |
12.2.4.1 Sonderfall: Arrays und Data Binding | 297 |
12.2.4.2 Data Binding nur bei speziellem Event ausführen | 299 |
12.2.5 ActionScript innerhalb eines Data Bindings | 300 |
12.3 Data Model | 301 |
12.3.1 Model, View und Controller (MVC) | 302 |
12.3.2 Data Models in Flex | 304 |
12.3.2.1 Data Model mit Model-Tag | 304 |
12.3.2.2 Data Model mit XML-Tag | 309 |
12.3.2.3 Data Model mit ActionScript (skriptbasiert) | 310 |
12.3.2.4 Data Model mit ActionScript-Klassen | 311 |
12.4 Data Formatting | 317 |
12.4.1 Formatter in MXML anlegen | 318 |
12.4.2 Formatter in ActionScript realisieren | 319 |
12.4.3 Fehler in Formatter abfangen | 320 |
12.4.4 Übersicht der Formatter-Klassen von Flex | 321 |
12.4.4.1 CurrencyFormatter | 322 |
12.4.4.2 DateFormatter | 322 |
12.4.4.3 NumberFormatter | 323 |
12.4.4.4 PhoneFormatter | 324 |
12.4.4.5 ZipCodeFormatter | 324 |
12.4.5 Custom Formatter programmieren | 324 |
12.5 Data Validation | 327 |
12.5.1 Validator in MXML anlegen | 328 |
12.5.2 Validator in ActionScript realisieren | 329 |
12.5.3 Übersicht der Validator-Klassen von Flex | 329 |
12.5.3.1 CreditCardValidator | 329 |
12.5.3.2 CurrencyValidator | 331 |
12.5.3.3 DateValidator | 332 |
12.5.3.4 EmailValidator | 334 |
12.5.3.5 NumberValidator | 334 |
12.5.3.6 PhoneNumberValidator | 336 |
12.5.3.7 RegExpValidator | 336 |
12.5.3.8 SocialSecurityValidator | 337 |
12.5.3.9 StringValidator | 337 |
12.5.3.10 ZipCodeValidator | 338 |
12.5.4 Validierung nur bei bestimmten Events | 338 |
12.5.5 Feedback auf anderer Komponente ausgeben | 339 |
12.5.6 Pflichtfelder | 340 |
12.5.7 Manuelles Auslösen eines Validators | 340 |
12.5.8 Fehlermeldungen anpassen | 344 |
12.5.9 Custom Validator programmieren | 344 |
12.6 LocalConnection | 346 |
12.7 SharedObject (Flash Cookie) | 352 |
12.7.1 SharedObject anlegen | 353 |
12.7.1.1 Speichern und Auslesen von Daten | 355 |
12.7.1.2 Speichern typisierter Daten | 357 |
12.7.2 Besonderheiten bei SharedObjects | 357 |
12.7.2.1 Secure SharedObject | 357 |
12.7.3 Beispiel: SharedObject-Editor | 358 |
13 Externe Datenquellen | 362 |
13.1 Einleitung | 362 |
13.2 HTTP-basierte Kommunikation | 363 |
13.2.1 HTTPService | 363 |
13.2.2 Webservice | 365 |
13.2.3 RemoteObject | 365 |
13.3 AMFPHP | 366 |
13.4 BlazeDS | 370 |
13.4.1 Download und Installation | 370 |
13.4.2 Java-Klassen | 371 |
13.4.3 Die Flex-Anwendung | 373 |
13.5 Austausch von Dateien | 375 |
13.5.1 Herunterladen von Dateien | 375 |
13.5.2 Hochladen von Dateien | 376 |
14 Komponenten und Moduleentwickeln | 378 |
14.1 Einleitung | 378 |
14.1.1 Vorteile der modularen Entwicklung | 378 |
14.1.2 Komponenten | 380 |
14.1.3 Module | 381 |
14.1.4 Komponenten vs. Module | 381 |
14.1.5 Workflow und Aufbau einer modularen Flex-Anwendung | 382 |
14.2 Eigene Komponenten entwickeln | 383 |
14.2.1 Composite Components (MXML) | 383 |
14.2.1.1 Eine einfache Composite Component erstellen | 384 |
14.2.1.2 Komplexere Composite Components erstellen | 387 |
14.2.2 Extended Components (ActionScript) | 392 |
14.2.2.1 Eine einfache Standardkomponente erweitern | 392 |
14.2.2.2 Eine komplexere Extended Component erstellen | 394 |
14.2.2.3 Versteckte Potenziale: der interne Namespace (mx_internal) | 400 |
14.2.3 Template Components (MXML) | 402 |
14.2.4 Komponentenentwicklung für Fortgeschrittene | 407 |
14.2.4.1 Komponenten mit Eigenschaften versehen | 407 |
14.2.4.2 Komponenten mit Methoden versehen | 408 |
14.2.4.3 Darstellung und Aktualisierungsprozess von Komponenten | 410 |
14.2.4.4 Eigene Events in Komponenten | 415 |
14.2.4.5 Eigene Styles in Komponenten | 417 |
14.2.4.6 Metadaten in Komponenten | 420 |
14.2.5 Eine Custom Component entwickeln | 427 |
14.2.6 Komponenten kompilieren und verteilen | 439 |
14.3 Module | 447 |
14.3.1 Application Domain vs. Module Domain | 449 |
14.3.2 Kommunikation mit Modulen | 449 |
15 Gute Programmierung,schlechte Programmierung | 452 |
15.1 So nicht: Eng gekoppelte Programmierung | 452 |
15.2 Lose gekoppelte Programmierung | 456 |
15.3 Cairngorm | 460 |
15.3.1 Download | 462 |
15.3.2 Anforderungen „Minishop“ | 462 |
15.3.3 Value Object und Model Locator | 463 |
15.3.4 User Interface | 465 |
15.3.5 Events | 468 |
15.3.6 Front Controller | 469 |
15.3.7 Commands | 470 |
15.3.8 Service und Datenquelle | 473 |
16 Flex für den Desktop (Adobe AIR) | 474 |
16.1 Einführung in Adobe AIR | 474 |
16.2 Entwicklung einer AIR-Anwendung | 475 |
16.2.1 AIR-Projekt im Flex Builder 3 erstellen | 475 |
16.2.2 Die AIR-Komponenten | 476 |
16.2.2.1 Window | 476 |
16.2.2.2 FileSystemComboBox | 476 |
16.2.2.3 FileSystemTree | 477 |
16.2.2.4 FileSystemList | 478 |
16.2.2.5 FileSystemDataGrid | 478 |
16.2.2.6 FileSystemHistoryButton | 478 |
16.2.2.7 HTML | 479 |
16.2.3 Veröffentlichung von AIR-Anwendungen | 480 |
16.2.4 Exportieren von AIR-Anwendungen | 480 |
16.3 AIR-Beispielanwendung | 480 |
Register | 484 |