Adobe Flex 4 (eBook)

Simon Widjaja (Autor)

eBook Download: PDF

2010 | 1. Auflage
625 Seiten
Carl Hanser Fachbuchverlag
978-3-446-42447-0 (ISBN)

Infos

Mit Flex bietet Adobe Entwicklern ein mächtiges Framework, mit dem sie anspruchsvolle Webanwendungen erstellen können. Wie sich Flex dabei effizient einsetzen lässt, zeigt dieses Buch.

Simon Widjaja führt den Flex-Anwender in seinem Buch in wesentliche Aspekte der Flex-Technologie ein. Zugleich versetzt er ihn in die Lage, die zahlreichen Anwendungsbeispiele in eigenen Projekten einzusetzen bzw. nach seinen Wünschen zu erweitern.

Die Beispiele, die auf Version 4 von Flex basieren, decken dabei die gesamte Bandbreite der Flex-Entwicklung ab: Von Projektverwaltung mit dem Adobe Flex Builder über die Erstellung von User Interfaces bis hin zur Datenbankanbindung via XML behandelt das Buch sämtliche Aspekte des Web Development mit Adobe Flex. Dies schließt auch das Zusammenspiel von Flex und PHP bzw. Java ein sowie Adobe AIR, die Runtime-Umgebung von Adobe, mit deren Hilfe Flex-Anwendungen offline für den Desktop erstellt werden.

Heraus kommt ein Leitfaden, der angehenden Flexern eine wirklich umfassende und vor allem praxisnahe Einführung in die Entwicklung von Webanwendungen mit Adobes Framework bietet.

Autor

Simon Widjaja betreibt seit zehn Jahren professionelles Web Development. Als Mitinhaber und Chefentwickler der Kölner Agentur trendspurt GmbH ist der gelernte Creative Media Designer und "Webentwickler aus Leidenschaft" Flasher bzw. Flexer der ersten Stunde.

Inhalt

Inhalt 6
Vorwort 14
1 Einstieg in Flex 4.0 20
1.1 Next Generation Internet 20
1.1.1 Die Flash Platform 21
1.1.2 Die Protagonisten 21
1.2 Die Bestandteile von Flex 4 22
1.3 Entwicklung und Aufbau einer Flex-Anwendung 24
1.4 Flex für den Desktop: Adobe AIR 25
2 Die Entwicklungsumgebung:Flash Builder 4 26
2.1 Die verschiedenen Projektarten 30
2.2 Ein neues Projekt anlegen und ausführen 30
3 MXML 32
3.1 Struktur und Syntax 32
3.1.1 MXML-Grundgerüst und Zeichenkodierung 33
3.1.2 Kommentare in MXML 34
3.1.3 Platzieren von Komponenten 36
3.1.4 MXML-Dateinamen 36
3.1.5 Aufbau von MXML-Dokumenten 37
4 ActionScript 42
4.1 Einführung 42
4.1.1 Über ActionScript 42
4.1.2 ActionScript im Umfeld von Flex 44
4.1.3 Spuren legen mit trace() 45
4.1.4 Kommentare in ActionScript 46
4.2 Einsatz von ActionScript 47
4.2.1 Inline: Innerhalb von MXML-Tag-Attributen 48
4.2.2 Nested: verschachtelt in MXML-Tags 49
4.2.3 Block: MXML Script Blocks 49
4.2.4 Ausgelagert: ActionScript in separater Datei 51
4.2.5 Klassen: Externe Definitionsdateien 53
4.3 ActionScript 3.0 im Vergleich 54
4.3.1 Was gibt es Neues in ActionScript 3.0 54
4.4 Sprachelemente und Syntax 58
4.4.1 Variablen und Datentypen 58
4.4.2 Klassen, Eigenschaften und Methoden 62
4.5 Interfaces programmieren 64
4.6 Vergleich: ActionScript, PHP und Java 68
5 Das Event-Modell von Flex 70
5.1 Einführung 70
5.1.1 Ereignisfluss: das Event-Modell verstehen 71
5.2 Event-Handler 72
5.2.1 Events in MXML abfangen 72
5.2.2 Events in ActionScript abfangen 75
5.2.3 Welche Events sind verfügbar? 77
5.2.4 Die Event-Klasse 78
5.3 Event Propagation 80
5.3.1 Unterschied zwischen target und currentTarget 81
5.3.2 Die addEventListener()-Methode 83
5.3.3 Priorität von Events 84
5.3.4 Propagation in Event-Kette stoppen 85
5.4 Event-Unterklassen 86
5.4.1 MouseEvent 88
5.4.2 KeyboardEvent 90
5.4.3 Gesten und ihre Events 92
5.5 Events für Fortgeschrittene 93
5.5.1 Eigene Event-Klasse erstellen 93
5.5.2 Events manuell feuern 94
6 Die Flex-Bausteine:Komponenten 98
6.1 Komponenten 98
6.1.1 Controls 99
6.1.2 Layout-Container 113
6.1.3 Navigators 114
6.2 Textkomponenten 118
6.2.1 Flash Text Engine (ab Flash Player 10) 118
6.2.2 Text Layout Framework (TLF) 119
6.2.3 Die Text-Komponenten 119
6.2.4 Das Text-Objektmodell 120
6.2.5 Einfachen Text in MXML 121
6.2.6 Eingabe von Text (TextInput und TextArea) 123
6.2.7 Texteingabe und die relevanten Events 124
6.2.8 Textformatierung in ActionScript (TextFlow) 126
6.2.9 Templates: TextFlow und Datenbindung 127
6.2.10 Mehrspaltiger Text 128
6.2.11 Formatierten Text importieren (importFromXML undimportFromString) 129
6.2.12 TextFlow exportieren 130
6.3 List-basierte Komponenten 131
6.3.1 List 132
6.3.2 Tree (Halo) 137
6.3.3 DataGrid 140
6.3.4 AdvancedDataGrid 142
6.3.5 ItemRenderer 142
6.3.6 ItemEditor 146
6.3.7 DropDownList und ComboBox 150
6.3.8 DataGroup und SkinnableDataContainer 152
6.4 Layout 153
6.4.1 Die möglichen Layouts 155
6.4.2 Absolute Positionierung (BasicLayout) 156
6.4.3 Constraint-based Layout (BasicLayout) 157
6.4.4 TileBasedLayout 158
6.4.5 Verschachteln von Containern 159
6.4.6 Rahmen und Abstand 161
6.4.7 Scrollbalken 162
7 Medienintegration 166
7.1 Einführung 166
7.2 Grafiken und Bilder laden 168
7.2.1 SWF-Animationen und Skripte laden 173
7.2.2 Ladevorgang überwachen 177
7.3 Einbinden von Sound 178
7.4 Einbinden von Video 180
7.5 Restriktionen beim Laden externer Medien 182
8 Anpassen der Benutzeroberfläche 184
8.1 Einleitung 184
8.2 Styles 185
8.2.1 Instance/ Inline Style 186
8.2.2 CSS: Class Styles und Type Styles 187
8.2.3 CSS-Syntax 188
8.2.4 CSS in Flex und die allgemeine CSS-Spezifikation 191
8.2.5 Globale Styles 192
8.2.6 Einsatz von Styles in MXML und externen CSS-Dateien 193
8.2.7 Einsatz von Styles in ActionScript 194
8.2.8 Verfügbare Style-Eigenschaften 197
8.2.9 Formate von Style-Eigenschaften 198
8.2.10 Vererbung und Dominanz 200
8.3 Component Skinning 203
8.3.1 Beispiel 204
8.4 Skinning mit Flash Catalyst 211
8.4.1 Die Designvorgabe und das Artwork (Photoshop) 212
8.4.2 Die Komponente in Flash Catalyst zum Leben erwecken 212
8.4.3 Import in Flash Builder 213
8.5 Fonts 215
8.5.1 Fonts nutzen und einbetten 216
8.5.2 Probleme beim Nutzen und Einbetten von Fonts 219
8.5.3 Problembehandlung bei Halo-Komponenten 221
8.5.4 Die Bereiche der Zeichensätze anpassen 222
8.6 Runtime CSS 224
9 States, Effects und Transitions 228
9.1 States 228
9.1.1 Mit States arbeiten (MXML) 230
9.1.2 Mögliche Modifikationen innerhalb eines States 233
9.1.3 States ableiten 241
9.1.4 States in Komponenten und Modulen 242
9.1.5 States und ihre Events 243
9.1.6 States verfeinern 243
9.2 Effects 243
9.2.1 Effects erstellen und anwenden 244
9.2.2 Die Trickkiste: Übersicht der verfügbaren Effects undTrigger 248
9.2.3 Effects kombinieren 249
9.2.4 Effects und ihre Events 251
9.2.5 Sonderfälle 253
9.3 Transitions 260
9.3.1 Transitions mit States verknüpfen 260
9.3.2 Event-Kette von States und Transitions 266
9.3.3 Eins nach dem anderen: Action Effects 268
9.3.4 Fine-Tuning: Filter 270
10 Weitere Werkzeuge desFlex-Frameworks 274
10.1 PopUp 274
10.2 Drag and Drop 276
10.2.1 Events einer Drag-and-Drop-Operation 277
10.2.2 Custom Drag and Drop (für nicht List-basierte Komponenten) 280
10.3 Drucken in Flex 283
10.3.1 Einfaches Drucken 283
10.3.2 Drucken eines DataGrids mit Druckvorlage 285
11 Umgang mit lokalen Daten 288
11.1 Einführung 288
11.1.1 Daten aktuell halten: Datenbindung (Data Binding) 288
11.1.2 Daten richtig strukturieren und bereitstellen: Data Model 290
11.1.3 Daten aufbereiten und formatieren: Data Formatter 292
11.1.4 Daten auf Gültigkeit überprüfen: Data Validation 293
11.1.5 Datenfluss 295
11.2 Data Binding 296
11.2.1 Uni- und bidirektionale Inline-Datenbindung 297
11.2.2 Die Tag-Variante für die Datenbindung 300
11.2.3 Datenbindungen mit ActionScript realisieren 302
11.2.4 Eigene Objekteigenschaften für Datenbindungenaktivieren 307
11.2.5 ActionScript innerhalb einer Datenbindung 314
11.3 Data Model 315
11.3.1 Model, View und Controller (MVC) 316
11.3.2 Data Model in Flex 318
11.4 Data Formatting 333
11.4.1 Formatter in MXML anlegen 334
11.4.2 Formatter in ActionScript realisieren 336
11.4.3 Fehler in Formatter abfangen 337
11.4.4 Übersicht der Formatter-Klassen von Flex 339
11.4.5 Custom Formatter programmieren 342
11.5 Data Validation 344
11.5.1 Validator in MXML anlegen 346
11.5.2 Validator in ActionScript realisieren 347
11.5.3 Übersicht der Validator-Klassen von Flex 348
11.5.4 Pflichtfelder 361
11.5.5 Manuelles Auslösen eines Validators 362
11.5.6 Fehlermeldungen anpassen 366
11.5.7 Custom Validator programmieren 366
11.6 LocalConnection 369
12 Externe Datenquellen undData Centric Development 378
12.1 Einleitung 378
12.2 HTTP-basierte Kommunikation 380
12.2.1 HTTPService 381
12.2.2 WebService 389
12.2.3 RemoteObject 398
12.3 Data Centric Development 399
12.3.1 Codegenerierung 401
12.3.2 CallResponder 402
12.3.3 Fiber Model 402
12.4 PHP und ZendAMF 405
12.4.1 Voraussetzungen 405
12.4.2 Ausgangspunkt PHP 406
12.4.3 Ausgangspunkt Flex 416
12.5 Ein unschlagbares Team: Flex, Java, BlazeDS undHibernate 436
12.5.1 Die Serverseite 438
12.5.2 Flex-Client: Manager 455
12.5.3 Flex-Client: Frontend 462
12.5.4 Zusammenfassung 467
12.6 Messaging mit BlazeDS 467
12.6.1 Chat-Anwendung mit mehreren Themen 468
13 Komponenten und Moduleentwickeln 476
13.1 Einleitung 476
13.1.1 Vorteile der modularen Entwicklung 476
13.1.2 Komponenten 478
13.1.3 Module 479
13.1.4 Komponenten vs. Module 480
13.1.5 Workflow und Aufbau einer modularen Flex-Anwendung 480
13.2 Eigene Komponenten entwickeln 481
13.2.1 Composite Components (MXML) 482
13.2.2 Extended Components (ActionScript) 492
13.2.3 Template Components (MXML) 505
13.2.4 Komponentenentwicklung für Fortgeschrittene 510
13.2.5 Component Lifecycle – Darstellung und Aktualisierungsprozessvon Komponenten 514
13.2.6 Eine Custom Component entwickeln 548
13.2.7 Komponenten kompilieren und verteilen 562
13.3 Module 570
13.3.1 ModuleLoader 571
13.3.2 ModuleManager 574
13.3.3 Kommunikation mit Modulen 575
13.3.4 Application Domain vs. Module Domain 581
14 Gute Programmierung,schlechte Programmierung 584
14.1 So nicht: eng gekoppelte Programmierung 585
14.2 Lose gekoppelte Programmierung 589
15 Flex für den Desktop(Adobe AIR) 596
15.1 Einführung in Adobe AIR 596
15.2 Entwicklung einer AIR-Anwendung 597
15.2.1 AIR-Projekt im Flash Builder erstellen 597
15.2.2 Die AIR-Komponenten 598
15.2.3 Spezielle AIR-Funktionen und nicht sichtbareKomponenten 603
15.2.4 Veröffentlichung von AIR-Anwendungen 609
15.2.5 Exportieren von AIR-Anwendungen 609
15.3 Beispielanwendungen 610
Register 614

Textauszug

8 Anpassen der Benutzeroberfläche (S. 165-166)

8.1 Einleitung

Der Flash Builder bietet zahlreiche Möglichkeiten, mit relativ wenig Zeitaufwand selbst komplexe Anwendungen umzusetzen. Besonders die Vielzahl an vorhandenen Komponenten, die das Flex-Framework zu einem großen Teil ausmachen, trägt dazu bei, dass viele wiederkehrende Problemstellungen einfach gelöst werden können. So tragen die User Interface Komponenten und die Layout-Container dazu bei, dass der Entwickler mit wenig Aufwand den Funktionsumfang der Bedienelemente nutzen und das Layout gestalten kann, ohne die eigentliche Funktionalität der einzelnen Komponenten selbst entwickeln zu müssen. Der Einsatz eben dieser Komponenten stellt den Entwickler jedoch recht schnell vor ein neues Problem: Das visuelle Erscheinungsbild (Look and Feel) der entstehenden Anwendungen ist sehr ähnlich. Das einheitliche und aufeinander abgestimmte Erscheinungsbild der vorhandenen Komponenten ist zwar durchaus ansprechend und reicht für manche Anwendungen bereits aus, wenn es jedoch darum geht, individuelle Kundenwünsche umzusetzen, steht man als Entwickler früher oder später vor der Frage:

Wie passe ich das Erscheinungsbild der verwendeten Bausteine an, sodass die Anwendung den Kundenansprüchen gerecht wird, jedoch ohne einzelne Bausteine grundlegend neu zu entwickeln?

Wie Sie wahrscheinlich bereits vermutet haben, gibt das Flex-Framework auch in dieser Hinsicht dem Entwickler verschiedene Möglichkeiten und Werkzeuge an die Hand, die es ermöglichen, das gesamte Erscheinungsbild einer Anwendung an seine individuellen Ansprüche anzupassen. In diesem und dem nächsten Kapitel zeige ich Ihnen, wie Sie mit relativ wenig Aufwand durch den gezielten Einsatz von Styles und Skins Ihrer Anwendung ein individuelles Aussehen verpassen können. Dabei werden Sie neben dem Einsatz von CSS kennenlernen, wie Sie eigene Fonts einbetten, wie Sie durch das Scale9-Verfahren Grafiken für das Skinning aufbereiten und dass das Aussehen von Komponenten auch ohne den Einsatz von Grafiken programmiert werden kann. Im Rahmen von CSS hat sich im Vergleich zu Flex 3 einiges verändert. So ist aufgrund der neuen Spark-Komponenten und der Möglichkeit, die bisherigen Halo-Komponenten gleichermaßen verwenden zu können, die Notwendigkeit entstanden, diese Unterscheidung auch in CSS sichtbar zu machen. Hierzu wurden Namespaces und neue Selektoren eingeführt.


8.2 Styles

Die Eigenschaften bzw. Attribute zum Verändern des visuellen Erscheinungsbildes von Komponenten in Flex nennt man Styles. Mithilfe dieser Styles lassen sich einzelne Komponenten oder ganze Komponentengruppen innerhalb der Anwendung anpassen. So lassen sich bspw. die Hintergrundfarbe der Anwendung, die Schriftart sämtlicher Schaltflächen oder die Highlight-Colors einer ganz bestimmten Liste über Styles verändern. Einige Style-Eigenschaften werden dabei automatisch an untergeordnete Kindelemente vererbt. Außerdem können Style-Definitionen in CSS-Klassen zusammengefasst werden, die ebenfalls voneinander erben können. Wie Sie das realisieren und welche Regeln bei der Vererbung von Style-Definitionen gelten, erfahren Sie auf den folgenden Seiten.

Produkt-Details

• Erscheint lt. Verlag: 1.1.2010
• Verlagsort: München
• Sprache: deutsch
• Themenwelt: Informatik ► Web / Internet ► Flash / ActionScript
• Schlagworte: ActionScript • Adobe AIR • BlazeDS • Flash Catalyst • FlexBuilder • MXML • Webprogrammierung
• ISBN-10: 3-446-42447-4 / 3446424474
• ISBN-13: 978-3-446-42447-0 / 9783446424470