Adobe Flex 3 Grundlagen

Einstieg in die RIA-Entwicklung

Dieses Video-Training richtet sich an Ein- und Umsteiger in die Flex-Welt. Es bietet eine anschauliche Einführung in die essentiellen Themen rund um die Erstellung von Rich Applications mit Flex. Wer wirklich verstehen möchte, wie Flex funktioniert und Tipps aus der Praxis für die Praxis sucht, wird hier fündig!

Ihr(e) Trainer: Sascha Wolter

ISBN-Nummer: 978-3-8273-6143-1

Erscheinungsdatum: 27.05.2008

EUR 39,95

Video-Training auf DVD mit Bonusmagazin

Was bekomme ich nach dem Kauf?

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!

In den Warenkorb Downloads

Auf die Merkliste Tell-A-Friend Feedback verfassen

Ähnliche Video-Trainings

Trailer: Eindrücke aus Adobe Flex 3 Grundlagen

Bonusmaterial

Über die neuen CSS-Design-Wizards in Flex Builder passen Sie Komponenten grafisch an. In dieser Lektion lernen Sie zwei unterschiedliche Techniken dafür kennen.

Grafische Anpassungen von Buttons

04:15
Eines der wichtigsten Merkmale von Desktopanwendungen sind verschiedene Fenster mit unterschiedlichen Funktionen. Das gilt auch für AIR-Anwendungen. Wie Sie das umsetzen, erfahren Sie in diesem Video.

Fenster in einer Desktopanwendung

04:29
AIR bietet eine neue Möglichkeit, Daten lokal auf den Benutzer-PC zu speichern: SQL-Datenbanken. Dafür ist die SQL Lite Engine in AIR integriert.

Speichern von Daten in SQL-Datenbanken

05:45
Weiche Übergänge in Ihrer Flex-Anwendung erstellen Sie mit Effekten. Sehen Sie in diesem Film anhand eines einfachen Beispiels, wie Sie Effekte einsetzen.

Effekte verwenden

04:10

In diesem einführenden Kapitel lernen Sie Flex-Anwendungen anhand zahlreicher Beispiele kennen und verstehen. Sie erfahren, wie Sie die unterschiedlichsten Entwicklerwerkzeuge installieren und wie sie funktionieren. Schon beim ersten Projekt wenden Sie verschiedene Programmiermethoden an.

Flex verstehen
- In diesem Abschnitt zeigt Ihnen der Autor Anwendungsbeispiele von Rich Internet Applications sowie die Entstehungsgeschichte dieser Anwendungen. Lernen Sie hier die Vorteile von Rich Applications kennen und wie es dabei um die Benutzerfreundlichkeit der Anwendung steht.
  
  Rich Applications
  - In erster Linie geht es um die Ergebnisse, mit denen die Inhalte erzeugt werden – und Flex ist nur ein Werkzeug von vielen, mit dem sich Rich Applications erstellen lassen. Der Vorteil von Rich Internet Applications ist, dass sie bei entsprechender Internetanbindung und vorhandenen Zugangsdaten global verfügbar sind.
    
    Sinn und Unsinn von Rich Applications
    
    05:08
  - Beispiele dienen der Inspiration und oft auch als Diskussionsgrundlage für das Gespräch mit dem Kunden. Doch dabei muss man immer darauf achten, nicht einfach nur Plagiate zu erzeugen. Flex wird von Unternehmen nicht nur zur Darstellung nach außen verwendet, sondern auch in unternehmenskritischen Bereichen bis hin zu Warenwirtschaftssystemen.
    
    Beispiele von Rich Applications
    
    11:06
- Welche Möglichkeiten Sie zur Erstellung von Rich Internet Applications bzw. Rich Applications haben, erfahren Sie in diesem Abschnitt. Sie lernen die Adobe-Entwicklungsumgebung sowie kostenfreie Entwicklungsumgebungen kennen. Ebenso zeigt Ihnen der Autor eine optimale Herangehensweise bei der Programmierung.
  
  Werkzeuge und Workflow
  - Für die Erstellung von Rich Internet Applications oder Rich Applications auf der Basis von Flex benötigen Sie einige Werkzeuge. Diese bilden die Flex-Produktfamilie, die aus vielen teils kostenlosen, teils kostenpflichtigen Bausteinen besteht. Neben dem Flex Builder benötigen Sie auch grafische Programme wie die Creative Suite von Adobe. Zum Abspielen brauchen Sie den Flash Player für Internetanwendungen bzw. Adobe AIR für Desktop-Applikationen.
    
    Flex-Produktfamilie
    
    08:30
  - Meist sind es nur drei Schritte von der Idee zum Produkt, auch wenn sich das in der Praxis ab und zu etwas schwieriger und langwieriger gestaltet. Aber grundsätzlich gilt: Erst wird gestaltet, dann programmiert und anschließend veröffentlicht. Beschränkt sich der Entwickler auf die Elemente des Flex Frameworks, erhalten Sie meist ansprechende Benutzeroberflächen, die flexibel und anpassbar sind.
    
    Workflow
    
    06:29
- Für Flex Builder existieren unterschiedliche Installationsvarianten. Sie können den Flex Builder als Gesamtpaket installieren oder als Eclipse-Plug-in verwenden. Lernen Sie hier die Vor- und Nachteile der einzelnen Installationsmöglichkeiten kennen.
  
  Installation
  - Auch ohne Flex Builder sind Flex-Projekte dank des kostenlosen Flex SDK möglich, das Sie auf der Webseite http://opensource.adobe.com herunterladen. Das Flex SDK ist jedoch auch Bestandteil des Flex Builder – dabei unterscheidet man zwischen dem Adobe Flex SDK und dem Open Source SDK. Das Adobe Flex SDK beinhaltet einige Elemente, die nicht in der Open Source-Variante enthalten sind.
    
    Flex SDKs
    
    07:16
  - Am einfachsten gelingt der Einstieg in Flex mit dem Flex Builder, da dieser die erforderlichen Komponenten beinhaltet, um eine Flex-Anwendung zu erzeugen. Den Flex Builder erhalten Sie in einer 60-Tage-Testversion beispielsweise auf der Adobe-Webseite www.adobe.com/de/products/flex/. Er ist für die Plattformen Mac, Windows und Linux erhältlich.
    
    Flex Builder
    
    06:29
  - Den Flex Builder gibt es in zwei Varianten: einmal als Flex Builder, der bereits alles aus der Eclipse-Welt beinhaltet, was für die Flex-Entwicklung erforderlich ist. Erfahrene Entwickler kennen sich häufig bereits mit Eclipse aus und erweitern ihre Eclipse-Version lieber mit dem Flex Builder. Der Vorteil des Flex Builder-Plug-in ist, dass Sie eine vollständige Eclipse-Variante nutzen, die Sie durch entsprechende Plug-ins erweitern.
    
    Flex Builder-Plug-in
    
    08:03
- Wenn Sie Fragen zur Entwicklungsumgebung haben, so verwenden Sie primär die eingebaute Hilfefunktion. Sollten Sie hierbei nicht fündig werden, so gibt es eine Reihe von Internetseiten, die unterschiedliche Themen zur Entwicklungsumgebung behandeln. Mehr dazu sehen Sie in diesem Abschnitt.
  
  Hilfe und Fehlersuche
  - Der Flex Builder hat eine Reihe von Hilfefunktionen gleich eingebaut. Dazu zählt auch die Startseite, die Sie nach einer Neuinstallation zu Gesicht bekommen oder über "Help > Flex Start Page" aufrufen. Über die Startseite gelangen Sie zu einer Reihe von Tutorials und Zusatzinformationen rund um Flex. Eine umfangreiche Hilfefunktion erhalten Sie über das Hilfemenü.
    
    Die Hilfe im Flex Builder
    
    03:42
  - Das Internet ist eine unerschöpfliche Quelle für Hilfestellungen. Ein guter Einstiegspunkt für Informationen, Hilfestellungen, Tutorials und Beispiele rund um Rich-Internet-Applikationen und Flex ist die Adobe Developer Connection Site www.adobe.com/de/devnet/. Aber auch zahlreiche Blogs um Flex und Adobe-Produkte finden Sie im Internet, beispielsweise unter http://weblogs.macromedia.com/mxna/.
    
    Die Adobe-Site und das restliche Web
    
    02:50
- In diesem Bonuskapitel führt Sie Helge Maus behutsam in das Thema Java ein: Der Autor beginnt damit, die Idee hinter Java zu erklären, zeigt Ihnen Fallen bei der Installation und richtet die Entwicklungsumgebung ein. Als erstes Java-Projekt dient einmal mehr die Ausgabe von "Hallo Welt".
  
  Bonus: Einführung in Java
  - In einer Präsentation schildert der Autor Helge Maus die Geschichte von Java. Er stellt die Eigenschaften der Programmiersprache vor und geht dann auf die Schritte der Programmentwicklung ein: Nach diesem Film wissen Sie, wo Sie Java einsetzen können und wie das möglich werden konnte!
    
    Willkommen bei Java 6
    
    10:35
  - Sun bietet mehrere Versionen des JDK an: Diese unterscheiden sich nicht nur durch ihre Eignung für bestimmte Plattformen, sondern auch in ihrem Umfang beziehungsweise in der Zielgruppe.
    
    JDK und Geschwister
    
    07:29
  - Programmieren ohne Dokumentation? – Nein danke! Hier zeigt Ihnen Helge Maus, wie Sie die Originaldokumentation von Sun erhalten, und Sie sehen, wie er mit dem Download weiterarbeitet.
    
    Dokumentation zu Java
    
    03:03
  - Damit Sie die Grundlagen der Programmentwicklung besser nachvollziehen können, sollten Sie sich diesen Film ansehen: Der Autor startet die Kompilierung aus der Konsole und kämpft mit unvollständigen Pfadangaben!
    
    Java per Hand
    
    13:57
  - Viele Wege führen zum Ziel: So ist es auch in diesem Film, in dem Sie zuerst sehen, wie Sie die Umgebungsvariablen in einem Konsolenfenster ausgeben können, und später die Bequemlichkeit der grafischen Oberfläche schätzen lernen, weil die Änderung dieser Werte so viel leichter fällt.
    
    Die Systemvariable Path
    
    05:22
  - Bevor Sie daran gehen können, eine Entwicklungsumgebung zu installieren und daraus ganz bequem Applikationen zu starten, müssen Sie eine weitere Umgebungsvariable korrekt setzen.
    
    Die Systemvariable Classpath
    
    03:30
- Mit Eclipse erhalten Sie eine grafische Programmierumgebung, die weit verbreitet und sehr modular aufgebaut ist: Da ist es kein Wunder, dass es eine Vielzahl an nachinstallierbaren Features gibt, die die Arbeit eines Programmierers zunehmend leichter machen.
  
  Bonus: Grundlagen zu Eclipse
  - Als Open Source-Applikation ist die Quelle der Installation das Internet: Das inzwischen eigenständige Programm mit IBM-Wurzeln ist für mehrere Plattformen verfügbar und mit wenigen Mausklicks installiert.
    
    Eclipse installieren
    
    07:11
  - Sehen Sie Helge Maus über die Schulter, wenn er erst die Oberflächenelemente von Eclipse erklärt und dann in die Programmierung einsteigt: Wie legen Sie ein neues Projekt oder eine neue Klasse an? Welche Erleichterungen gibt es beim Eintippen der Befehle?
    
    Erste Schritte in Eclipse
    
    05:48
  - In Eclipse integriert ist eine Anbindung an Updates und Erweiterungsmodule, die online zur Verfügung gestellt werden. Die gesamte Auswahl und Installation ist von Eclipse überwacht und funktioniert problemlos und unauffällig – obwohl sich darunter eine ganze Menge verändert!
    
    Eclipse erweitern
    
    05:40
- Für Rich Internet Applications existieren viele Möglichkeiten und Wege der Programmierung. In diesem Abschnitt lernen Sie Programmiermethoden mit dem Flex Builder bzw. das Flex SDK kennen sowie die Programmierung mit ActionScript.
  
  Das erste Projekt
  - Der Klassiker unter den Beispielen ist mit dem Flex Builder schnell erstellt. In diesem Beispiel verwendet der Autor dazu das Flex Builder-Plug-in – bevor Sie jedoch mit der Programmierung beginnen, müssen Sie noch einige Einstellungen vornehmen, so dass sich die Eclipse-Entwicklungsumgebung genauso verhält wie die Stand-alone-Umgebung von Flex Builder. Erforderlich ist die Einstellung der richtigen Perspektive über "Windows > Perspective".
    
    MXML mit dem Flex Builder
    
    07:15
  - Es geht auch kostenlos: Ein Texteditor und das Flex SDK reichen aus, um eine leistungsfähige Flex-Anwendung zu erstellen. Sie starten mit einem einfachen MXML-basierten XML-Dokument, das die Oberfläche Ihrer Anwendung beschreibt, und beginnen mit der XML-Deklaration. Es folgt ein Container mit dem Application-Tag und die Angabe für das Layout. Achten Sie beim Speichern des MXML-Dokuments auf die richtige Codierung.
    
    MXML mit dem Flex SDK
    
    04:06
  - Der Flex Builder ist durchaus auch für reine ActionScript-Projekte geeignet, die die Vorteile des Flex Framework nicht nutzen. Der Nachteil ist, dass sämtliche Module des Flex Framework in ActionScript programmiert werden müssen. Demgegenüber steht der Vorteil, dass die Anwendungen kleiner und schlanker werden. Außerdem arbeiten Projekte mit ActionScript sehr gut mit Flash zusammen.
    
    ActionScript 3 mit dem Flex Builder
    
    05:55
  - Wer weder den Flex Builder noch das Flex Framework nutzen mag, der beschränkt sich auf ActionScript und den Compiler im Flex SDK – weniger geht aber nicht. Der Code ist derselbe wie in der Entwicklungsumgebung – achten Sie jedoch beim Speichervorgang auf die richtige Codierung. Danach folgt die Kompilierung der Anwendung in eine SWF-Datei – dies erfolgt über die Kommandozeile.
    
    ActionScript 3 mit dem Flex SDK
    
    03:07
In diesem Kapitel lernen Sie, Flex aktiv anzuwenden. Am Beginn stehen Einführung und Konfiguration der Arbeitsumgebung, gefolgt von der Gestaltung der Oberflächenelemente. Wie Sie Daten eingeben, anzeigen und über verschiedene Methoden laden können, erfahren Sie hier ebenso.

Flex verwenden
- Dieser Abschnitt beschäftigt sich mit dem Flex Builder. Sie lernen die Arbeitsumgebung mit den unterschiedlichen Ansichten kennen, legen Projekte an und veröffentlichen diese. Der Autor zeigt Ihnen auch einige Tricks bei der Konfiguration des Flex Builder.
  
  Flex Builder
  - Eclipse und der Flex Builder sortieren Projekte und die Einstellungen Ihres Arbeitsbereichs in sogenannten Workspaces. Einen Workspace wechseln Sie nachträglich über "File > Switch Workspace". Im nächsten Schritt nehmen Sie Einstellungen zur Perspektive vor. Eine Perspektive ist die Anordnung einzelner Ansichten innerhalb Ihrer Oberfläche. In den meisten Fällen der Programmierung verwenden Sie die Perspektive "Flex Development".
    
    Arbeitsumgebung
    
    09:38
  - Die Arbeit wird einfacher, wenn die Werkzeuge passen – so verfügen auch der Flex Builder und Eclipse über vielfältige Einstellungsmöglichkeiten. Hier gibt es einige Stellen, an denen noch nachgeholfen werden kann. Die Einstellungen für den aktuellen Workspace finden Sie unter "Window > Preferences".
    
    Konfigurieren
    
    06:10
  - Der Flex Builder erleichtert nicht nur die Erstellung, sondern erlaubt ebenfalls die Veröffentlichung des fertigen Ergebnisses. Alle spezifischen Dokumenttypen und Projekte finden Sie im Menü "File > New". Mit dem Befehl "Flex Project" erstellen Sie ein Flex-Projekt auf Basis des Flex Framework.
    
    Projekte anlegen und veröffentlichen
    
    04:08
- Dieser Abschnitt befasst sich mit den grundlegenden Sprachen in Flex-Dokumenten. Hierbei werden Sie auch feststellen, wie ähnlich sich MXML-Dokumente und ActionScript 3 sind. Dies verdeutlicht der Autor auch anhand eines Beispiels.
  
  Sprachen
  - Flex-Projekte bestehen im Normalfall aus einer Vielzahl an XML-basierten, sogenannten MXML-Dokumenten. MXML ähnelt dem ebenfalls auf XML aufbauenden (x)HTML. Wichtig bei der Anlage neuer Projekte ist die Übereinstimmung der Kodierung im MXML-Dokument. Die Standardkodierung ist UTF-8. Ein MXML-Dokument beschreibt die Oberflächen und Inhalte einer Anwendung anhand von einzelnen Elementen einzelner XML-Tags.
    
    MXML: Syntax und Struktur
    
    06:53
  - MXML ist nichts anderes als ActionScript 3 – nur einfacher. Der Flex-Compiler erzeugt aus dem MXML-Dokument ActionScript-3-Klassen, aus denen wiederum eine Flashplayer-Datei erzeugt wird. Diesen generierten Code können Sie durch Hinzufügen des Flex Compiler-Arguments "keep" in den Voreinstellungen auch einsehen. In MXML-Dokumenten haben Sie somit die Möglichkeit, direkt ActionScript einzufügen.
    
    MXML vs. ActionScript 3
    
    06:59
- Es gibt eine Vielzahl an Möglichkeiten, die Oberflächen zu gestalten. In diesem Abschnitt zeigt Ihnen der Autor unter anderem Methoden, Komponenten wiederzuverwenden und über eine Anwendersteuerung das Layout zu verändern.
  
  Oberflächen erstellen
  - Das Flex Framework verfügt über eine große Vielfalt an Controls (Steuerelementen), um Oberflächen benutzerfreundlich und ansprechend zu gestalten. Natürlich können Sie diese Oberflächenelemente anpassen und um sogenannte Komponenten ergänzen. Für den Programmierer ist das Wissen um die Syntax der Oberflächenelemente essenziell. Am besten sehen Sie diesbezüglich in der Hilfe des Flex Builders nach.
    
    Steuerelemente
    
    07:16
  - Container sind notwendig, um eine Oberfläche zu strukturieren und auszurichten. Einen Container gibt es in verschiedenen Ausprägungen. Die genaue Bedeutung eines Containers erfahren Sie in der Dokumentation oder Sie wechseln dazu in den Quellcode des ausgewählten Containers. Für die Anordnung von Elementen verwenden Sie neben dem Layouttyp auch Boxen, die Sie vertikal oder horizontal anordnen können.
    
    Layout mit Containern
    
    04:42
  - Eine besondere Form des Layouts sind Constraints, bei denen die Oberflächenelemente speziellen Zwängen unterworfen werden, die festlegen, wie die Elemente positioniert und in ihrer Größe behandelt werden sollen. Beachten Sie, dass Constraints nur bei Containern mit einem absoluten Layout funktionieren – dabei definieren Sie lediglich den Abstand vom Rand des Objekts. Neu sind "ConstraintColumn" und "ConstraintRow".
    
    Layout mit Constraints
    
    04:24
  - Wenn mehr auf den Bildschirm soll, als sinnvoll ist, dann sind Navigatoren eine große Hilfe. Innerhalb der Designansicht des Flex Builders finden Sie in der View "Components" unterschiedliche Navigatoren und Leisten, mit denen Sie zwischen den Navigatoren wechseln können. Wichtige Navigatoren sind "Acordion", "TabNavigator" und "ViewStack".
    
    Layout mit Navigatoren
    
    04:57
  - Kleinere Änderungen an einer Oberfläche können Sie sehr angenehm mit Zuständen (States) verwalten. ViewStates benutzen Sie, um zur Laufzeit Elemente hinzuzufügen oder zu löschen und um die Eigenschaften oder das Verhalten von Elementen zu ändern. Die einfachste Variante ist, die ViewStates im Designmodus innerhalb des Flex Builders zu modellieren.
    
    Layout mit ViewStates
    
    04:08
  - Um große Anwendungen in den Griff zu bekommen, sind wiederverwendbare Komponenten nützlich. Hierzu gestalten Sie Ihre Anwendung modular. Das bedeutet, dass Sie die einzelnen Inhalte zu Einheiten zusammenfassen und in eigenständigen Dateien als Komponenten ablegen. Neue Komponenten erstellen Sie über "File > New > MXML Component".
    
    Wiederverwendbare Komponenten
    
    09:45
  - Module haben den Vorteil, dass sie dann geladen werden, wenn sie zum ersten Mal gebraucht werden. Damit verringern Sie gerade bei Webapplikationen die Ladezeit. Die Erstellung eines Moduls erfolgt über "File > New > MXML Module". Verwenden Sie das Modul in unterschiedlichen Programmteilen, sollte die SWF-Größe des Moduls nicht optimiert werden. Einstellungen Ihrer Module ändern Sie über die Projektvoreinstellungen.
    
    Wiederverwendbare Module
    
    08:54
- Lernen Sie in diesem Abschnitt die umfangreichen Methoden kennen, um Daten einzugeben oder anzuzeigen. Die Möglichkeiten reichen von einfachen Formularen über die Bindung von Objekten an Modelle und die Ausgabe über Repeater, Tabellen oder Renderer.
  
  Daten eingeben und anzeigen
  - Immer dann, wenn Sie viele Daten darstellen oder einen Anwender dazu bringen möchten, eine Reihe von Daten einzugeben, bietet sich die Verwendung von Formularen an. Formulare sind nichts anderes als Layouthilfen für die Datenein- und -ausgabe. Ein Formular erstellen Sie im Designmodus Ihrer Anwendung. Wählen Sie in der View "Components" die Kategorie "Layout".
    
    Formulare
    
    05:05
  - Wenn die Eingabe des Anwenders überprüft werden soll, kommen Validatoren zum Einsatz. Damit überprüfen Sie, ob in einem Textfeld eine Eingabe vorhanden ist oder sogar ob die Struktur der Eingabe innerhalb eines Felds korrekt ist. Das Flex Framework bietet dazu bereits eine Reihe vorgefertigter Validatoren an. Einen Validator geben Sie in MXML über seinen Namen an <mx:Validator>.
    
    Validatoren
    
    03:08
  - Die interne Darstellung von Werten kann für den Betrachter dank Formattern verschönert werden. Formatter erlauben es, ein Objekt in eine spezielle Form zu pressen, um sie dann auf dem Bildschirm darzustellen. Das Flex Framework besitzt eine Reihe von vorgefertigten Formattern, die sich auf vielfältige Art und Weise anpassen lassen. Natürlich können Sie auch eigene Formatter entwickeln und hinzufügen.
    
    Formatter
    
    03:53
  - Die Daten einer Anwendung sind meist in (Daten-)Modellen organisiert. Ein Datenmodell können Sie sowohl in MXML als auch über ActionScript anlegen. Innerhalb von MXML legen Sie ein Datenmodell über das Tag <mx:Model> an. Dies erfordert die Angabe einer ID. Der Nachteil bei diesen Modellen ist, dass Sie die Daten nicht typisieren können.
    
    Modelle und Bindungen
    
    13:45
  - Um große Mengen an Informationen untereinander oder nebeneinander anzuzeigen, bieten sich Listen und deren Verwandte an. Übliche Datenstrukturen für Listen sind Arrays oder ArrayCollections. Beide können Sie sowohl innerhalb von MXML als auch in ActionScript erstellen. Aufgrund der Bindungsunterstützung zu bevorzugen ist die ArrayCollection.
    
    Listen
    
    05:47
  - Die Daten einer Anwendung bestehen üblicherweise aus vielen Eigenschaften. Ohne spezielle Renderer können Sie innerhalb von Listen lediglich eine Eigenschaft anzeigen. Abhilfe schaffen hierbei Tabellen. Tabellen ähneln Listen, nur dass die Informationen in Spalten unterteilt sind. Das Aussehen und die Anordnung der Spalten sind frei definierbar.
    
    Tabellen
    
    03:30
  - Datengetriebene Oberflächen lassen sich mithilfe von Repeatern dynamisch aufbauen. Ein Repeater erlaubt es, anhand einer Liste entsprechend viele Oberflächenelemente zu erzeugen, die Elemente innerhalb der Liste sind. Dies ist vergleichbar mit einer Schleife. Innerhalb des Repeaters können Sie die Steuerelemente und Container aus dem Flex Framework benutzen, die entsprechend oft im übergeordneten Container platziert werden.
    
    Repeater
    
    05:10
  - Benötigen Sie in einer Anwendung immer wieder das gleiche Oberflächenelement oder eine Kombination von gleichen Oberflächenelementen, so erstellen Sie dies über einen Renderer. Ein Renderer ist eine Komponente, die Sie anstelle der Standardzeilen und -zellen in Listen zur Anzeige nutzen. Diese Komponente erzeugen Sie über "File > New > MXML Component".
    
    Renderer
    
    09:11
- Ein großer Vorteil von Frameworks ist, dass diese Klassenbibliotheken eine Vielzahl von Grundfunktionalitäten bereits mitbringen. Auch beim Flex Framework besitzen die meisten Oberflächenelemente schon Grundfunktionen, die für viele Anwendungen nützlich sind. Sehen Sie mehr dazu in diesem Abschnitt.
  
  Interaktivität und Verhalten
  - Das Verschieben von Daten mit gedrückter Maustaste ist bereits im Flex Framework eingebaut. Achten Sie darauf, dass sowohl der Ausgangs- als auch der Zielpunkt für Drag and Drop ähnliche Datenmodelle aufweisen. Aktivieren Sie dazu in der Ausgangsliste "dragEnabled" und in der Zielliste "dropEnabled". Damit kopieren Sie Elemente einer Liste in die andere Liste.
    
    Drag and Drop
    
    04:16
  - Benutzerfreundlich oder ärgerlich: Mit Effekten ist fast alles möglich – zeigen Sie dem Benutzer durch Effekte, wenn sich ein Oberflächenelement verändert. Entscheidend hierbei ist, dass sich mithilfe von Effekten eine Verbesserung der Benutzerführung ergibt. Im Beispiel soll ein Produkt, das in die Einkaufsliste gezogen wird, sogleich mit einer Schaltfläche für den Kauf versehen werden.
    
    Effekte
    
    06:19
  - In welcher Reihenfolge und mit welchen Effekten sich die Zustände einer Anwendung verändern, legen Sie mit Übergängen (Transitions) fest. In der Beispielanwendung verändern Sie mithilfe eines definierten States über eine Schaltfläche die Oberfläche Ihrer Anwendung. Möchten Sie den Übergang zwischen den Oberflächenelementen animieren, verwenden Sie Transitions.
    
    Transitions
    
    06:23
- Eine datengetriebene Anwendung beschreibt eine dynamische Anwendung, die Daten lädt oder sendet. Das heißt, dass durch die Kommunikation mit einem Server die Anwendung dynamisch gestaltet wird. Genauso verhält es sich auch bei Flex-Anwendungen, wenn der Benutzer durch Mausklicks Interaktionen auslöst.
  
  Daten laden
  - Es gibt so viele Möglichkeiten des Datenaustauschs in Flash und Flex, dass man schnell mal den Überblick verliert. Damit die Kommunikation zwischen datengetriebenen Anwendungen funktioniert, müssen Sie für die vorhandenen Technologien den passenden Flashplayer verwenden. Eine Erkennung des Flashplayers ist bereits im Flex Framework enthalten. In diesem Video sehen Sie viele Techniken zum Erzielen von Dynamik.
    
    Datenaustausch Teil 1
    
    10:27
  - Das eigentliche Thema bei datengetriebenen Anwendungen ist in den meisten Fällen der Austausch von textbasierten Informationen. Auch dafür gibt es viele Methoden und Hilfsmittel innerhalb von Flash und Flex. Beispielsweise können Sie mit Flash und Flex XML-Daten laden und bearbeiten. Für einen erfolgreichen Datenaustausch müssen Sie über Sicherheit und Zugriffsschutz Bescheid wissen.
    
    Datenaustausch Teil 2
    
    08:25
  - Medien wie Bilder und Videos versteht Flex (fast) ohne Probleme. Die eigentlichen Medien müssen Sie im Ausgabeordner verfügbar machen, damit Ihre Anwendung zur Laufzeit auf diese Medien zugreifen kann. Externe Dateien erleichtern dabei den Umgang mit sehr großen Dateien bzw. auch deren Austausch und Aktualisierung. Für die korrekte und automatische Platzierung dieser Mediendaten speichern Sie diese bereits in Ihrem Quellcode-Ordner.
    
    Medien
    
    08:56
  - XML ist ein beliebtes Datenformat für datengetriebene Anwendungen. Dank der speziellen Sprache E4X ist der Zugriff auf die Elemente innerhalb eines XML-Dokuments deutlich einfacher geworden. Er gestaltet sich fast genauso wie der Zugriff auf normale Objektstrukturen. Für die Anzeige kommt ein Renderer zum Einsatz.
    
    XML eingebettet
    
    04:51
  - Eine lauffähige Anwendung mit einem funktionierenden Datenmodell kann sehr einfach gegen eine echte Datenquelle getauscht werden. Nach den Vorbereitungsarbeiten erfolgt das Laden eines XML-Dokuments in Flex über den HTTP Service. Im Beispiel wird das Laden der Liste über eine Schaltfläche angestoßen.
    
    XML laden
    
    06:53
Im Mittelpunkt dieses Kapitels stehen Konzepte und deren Anwendungen. Wie Sie mit Problemen und Fehlerbeseitigung umgehen und welche Möglichkeiten Flex und Flash in diesem Zusammenhang bieten, erfahren Sie ebenfalls in diesem Kapitel.

Mit Flex programmieren
- Dieser Abschnitt beginnt mit einem Überblick über die Entwicklung von ActionScript. Je nach Anwendung müssen Sie sich mit unterschiedlichen ActionScript-Strukturen befassen. Ebenso beschreibt der Autor hier verschiedene Varianten für ActionScript.
  
  Aktionen und Varianten
  - ActionScript ist nicht gleich ActionScript! Es gibt viele Versionen, doch letztendlich interessiert in der Flex-Welt nur ActionScript 3. Innerhalb von Flex werden die Teile von MXML bei der Kompilierung zu ActionScript, woraus anschließend die SWF-Datei entsteht. In diesem Video sehen Sie einen historischen Abriss der Entwicklung von ActionScript.
    
    Aktionen und Versionen
    
    06:58
  - Im Wesentlichen unterscheidet man zwei Orte für ActionScript: MXML- und ActionScript-Dokumente. Bei der Arbeitsweise mit MXML-Dokumenten gibt es auch wieder verschiedene Varianten, wie Sie Programmiercode einsetzen dürfen. Eine Variante sind Ereignisse, in denen Sie ActionScript Code platzieren können.
    
    Varianten
    
    08:55
- Lernen Sie in diesem Abschnitt unterschiedliche Ansätze für die Problemlösung kennen. Zu Beginn jedoch erfahren Sie, wie Sie mit entsprechenden Konventionen an die Programmierung neuer Projekte herangehen.
  
  Probleme und Lösungen
  - Guter Code unterscheidet sich von schlechtem nicht nur durch die "Fehlerfreiheit", sondern auch durch die "Lesbarkeit". Nur gut lesbarer Code kann auch entsprechend gepflegt bzw. weiterentwickelt werden. Dazu haben sich je nach Unternehmen unterschiedliche Konventionen etabliert. Für Bezeichner hat sich in Flex die Schreibweise in CamelCase durchgesetzt.
    
    Konventionen und Kommentare
    
    04:36
  - Fehler vermeiden und Fehler finden zählt zu den größten Herausforderungen – auch wenn man eine Programmiersprache noch so gut beherrscht. Eine Variante bei der Fehlersuche bzw. Fehlervermeidung ist die Trace-Anweisung. Diese hilft, den Code nachzuverfolgen, hat jedoch den Nachteil, dass diese Anweisung überall platziert werden muss, wo Sie Informationen über den Code erhalten möchten.
    
    Ausgabe, Debugger und Profiler
    
    09:30
  - Manche Fehler sind gewollt und müssen zur Laufzeit behandelt werden. Dabei unterscheidet man synchrone und asynchrone Fehler! Für synchrone Fehler gibt es die Try-Catch-Blöcke mit einem initialisierenden Methodenaufruf. Mit dem Debugger überprüfen Sie anschließend die korrekte Abarbeitung des fehlerhaften Codes.
    
    Fehlerbehandlung
    
    08:12
- Dieser Abschnitt befasst sich mit den Konzepten und deren Anwendung. Zu Beginn erfahren Sie, wie Sie eine getrennte Entwicklung zwischen Benutzeroberfläche und dem eigentlichen Programm durchführen. Im weiteren Verlauf zeigt Ihnen der Autor verschiedene Methoden der Programmierung.
  
  Konzepte und deren Anwendung
  - Der Entwurf und der Test der Anwendungsoberfläche, noch bevor es an die Programmierung geht, machen durchaus Sinn. Denn so lassen sich konzeptuelle Fehler in der Benutzerführung noch finden, bevor diese Auswirkung auf die Programmierung haben. Dazu entwerfen Sie in Flex einen Prototypen, also die Oberfläche der Anwendung, und verfeinern diese sukzessive mit Programmcode. Die Benutzeroberfläche erstellen Sie weitgehend im Designmodus.
    
    Rapid Prototyping
    
    13:27
  - Der Ort für die Werte einer Anwendung sind die Variablen und die Eigenschaften. Dort finden Zustände und Datenmodelle ihren Platz. Bei den Variablen unterscheiden Sie verschiedene Typen. Lokale Variablen existieren nur innerhalb einer Funktion bzw. Methode. Parameter innerhalb eines Funktionsaufrufs stehen ebenfalls als lokale Variablen zur Verfügung.
    
    Variablen und Eigenschaften
    
    08:11
  - Den Programmcode unterteilt man in Funktionen und Methoden. Diese Strukturierung verbessert die Lesbarkeit und erlaubt die Wiederverwendung. Eine Funktion leiten Sie ähnlich wie eine Variable mit ihrem Namensraum ein. Sobald eine Funktion zu einem Objekt gehört, ist es eine Methode. Rückgabewerte erhalten Sie über eine Return-Anweisung.
    
    Funktionen und Methoden
    
    04:39
  - Den Programmfluss – also die Reihenfolge der Codeabarbeitung – steuern Schleifen und bedingte Anweisungen. Mit einer "For"-Schleife erreichen Sie eine bestimmte Anzahl an Durchläufen ein und derselben Anweisung. Mit "For-In" können Sie eine bestimmte Anzahl von Elementen in einer Liste iterieren und erhalten den Bezeichner – mit "For-Each-In" erhalten Sie die eigentlichen Objekte zurück. Bedingte Schleifen sind "While" bzw. "Do-While".
    
    Kontrollstrukturen
    
    07:26
  - Im Innersten wird die Flash- und Flex-Welt von Ereignissen zusammengehalten. Denn ActionScript ist eine ereignisgesteuerte Sprache, bei der es Benutzerereignisse wie Mausklicks und Systemereignisse wie das Ende eines Ladevorgangs gibt. Zu Systemereignissen zählt unter anderem "creationComplete".
    
    Ereignisse
    
    06:39
  - ActionScript ist eine objektorientierte Sprache, die in ihrer dritten Version klassenbasiert, ähnlich wie Java und Co, arbeitet. Im Beispiel führt der Autor für die Produkte des Warenkorbs eine eigene Klasse ein, um festzulegen, wie sich das Objekt verhalten soll. Eine neue Klasse erstellen Sie über "File > New > new ActionScript Class".
    
    Klassen und Packages
    
    07:50
  - Es geht nicht nur darum, die Befehle und Konzepte einer Sprache zu beherrschen, wenn man leistungsfähigen Programmcode verfassen will. Auch die Kenntnis typischer Programmierprobleme und deren strukturierter Lösung (z.B. MVC) ist wichtig, um auch größere Projekte zu beherrschen. Um im Beispiel eine bessere Trennung zwischen der Oberfläche und der Funktionalität zu erreichen, können Sie eigenständige Befehle in eine Klasse packen.
    
    Entwurfsmuster Teil 1
    
    07:29
  - Im zweiten Teil des Videos deklariert der Autor ein "command" als lokale Variable und erzeugt daraus eine Instanz, der er die Eigenschaft ".item" mitgibt. Als statische Methode rufen Sie die Instanz auf. Da das Modell öfter in Gebrauch ist, bietet sich dafür als Konvention an, eine Eigenschaft innerhalb der mx:Script-Struktur anzuwenden, die unbedingt bindbar sein muss.
    
    Entwurfsmuster Teil 2
    
    11:22
Flex bietet eine Vielzahl an Gestaltungsmöglichkeiten. Eingeleitet wird dieses Kapitel von einer Entscheidungshilfe, wie Sie das Aussehen Ihrer Anwendungen verändern können. In einem eigenen Abschnitt stellt Ihnen der Autor die Zusammenarbeit zwischen Flex und Flash vor, wobei Flash als Designinstrument verwendet wird.

Mit Flex gestalten
- Es gibt so viele Möglichkeiten, eine Flex-Anwendung zu verschönern, dass man dabei schnell den Überblick verliert. Doch wenn man alle technischen Möglichkeiten kennt und sich konsequent für einen einheitlichen Weg entscheidet, dann sind die Erstellung und die Pflege einer ansprechenden Oberfläche fast ein Kinderspiel.
  
  Gestaltung mit Flex
  - Flex bietet eine Vielzahl an Möglichkeiten, eine Flex-Anwendung in ihrem Aussehen zu verändern – und das, obwohl der Flex Builder so gut wie keine Gestaltungswerkzeuge anbietet. Glücklicherweise basieren die Gestaltungselemente in Flex auf CSS-Dateien und entsprechenden Angaben. Unter "Themes" versteht man die Sammlung von Stilen und Skins. Ein Stil ist vergleichbar mit der Beschreibung eines Oberflächenelements.
    
    Entscheidungshilfe
    
    06:14
  - Stile beschreiben die Eigenschaften wie Farben, Schriftschnitt oder Rundungen von Oberflächenelementen. So gut wie alle Oberflächenelemente besitzen Stile, mit denen sich ihr Erscheinungsbild verändern lässt. Möchten Sie herausfinden, welche Stile ein Objekt unterstützt, so gibt es dazu mehrere Wege. Die einfachste Art der Stile-Anpassung erfolgt im Designmodus von Flex über die Palette "Flex Properties".
    
    Stile
    
    12:13
  - Die Oberfläche einer Anwendung bestimmen Sie über Stile und Skins. Skins sind die Grafiken, aus denen Oberflächenelemente zusammengebaut werden. Es gibt zwei Varianten: Grafische Skins nutzen Grafikdateien, programmatische Skins malen die Oberfläche auf Basis von ActionScript. Für Skins dürfen Sie auch Flash-Inhalte einsetzen.
    
    Skins
    
    12:18
  - Skins können sowohl als Bilddaten (z.B. PNG) als auch als programmierte Klasse bereitgestellt werden. Letzteres ist zwar etwas abstrakter, hat aber den Vorteil, dass sich programmierte Skins leichter parametrisieren, also beispielsweise durch Stile variieren lassen. Das Flex Framework bietet bereits eine Reihe von Klassen, von denen Sie Ihre eigenen Klassen zur Erstellung von Skins ableiten können.
    
    Skins programmieren
    
    08:30
- Geht es um die Gestaltung einer Flex-Anwendungsoberfläche und deren Inhalte, dann ist Flash der optimale Partner von Flex. Obwohl sich Flash und Flex die gleichen Grundfunktionen teilen, ist die Kombination beider Welten erst einmal nicht so einfach, wenn man deren Unterschiede nicht kennt. Mehr dazu in diesem Abschnitt.
  
  Dreamteam Flash und Flex
  - Die Flash-Entwicklungsumgebung bietet anders als der Flex Builder eine Vielzahl an Werkzeugen für Designer. Ein weiterer Vorteil von Flash ist, dass das Ausgabeformat von Flex und Flash gleich ist. Zudem unterstützt Flash die Programmiersprache von Flex. Problematisch in diesem Zusammenhang sind die unterschiedlichen Versionen von ActionScript, mit denen Flash-Inhalte erstellt werden können.
    
    Versionsvielfalt
    
    07:54
  - Bei größeren Medien oder sich ändernden Inhalten bietet sich das Laden zur Laufzeit an. Überprüfen Sie für eine Flash-Datei, ob die Voreinstellungen für die Veröffentlichung die Version 9 des Flash Players sowie ActionScript 3 unterstützen. Kopieren Sie die fertige SWF-Datei in den Quellordner, so wird diese bei geeigneten Einstellungen automatisch richtig publiziert.
    
    Zur Laufzeit laden
    
    07:02
  - Will man das Laden von Inhalten vermeiden, um Wartezeiten oder Netzwerkproblemen vorzubeugen, dann können diese Inhalte in die Anwendungsdatei (SWF) eingebettet werden. Das geht auch bei reinen ActionScript-basierten Anwendungen ohne Zuhilfenahme des Flex Frameworks. Das Einbetten geschieht über "[Embed]". Bereiten Sie die Flash-Datei entsprechend vor: Schalten Sie für das Objekt in der Bibliothek die Verknüpfung ein.
    
    Inhalte in SWF einbetten
    
    10:49
  - Am einfachsten und gleichzeitig leistungsfähigsten gelingt die Gestaltung meist mit Flash. Denn für Flash gibt es eine spezielle Erweiterung, wodurch die Inhalte "fast" von allein zu Flex-Komponenten werden. Flash hat den Vorteil, dass es eine Vielzahl von Medien bereits so verarbeitet, wie sie der Flashplayer und damit auch Flex erwarten.
    
    Flash-Komponenten für Flex
    
    09:04
Adobe Integrated Runtime (AIR) ist eine neue Technologie, mit der Anwendungen verteilt werden können. Dabei handelt es sich im Wesentlichen um Rich (Internet) Applications mit dem besonderen Umstand, dass diese Anwendungen auf dem Desktop laufen. Sehen Sie mehr dazu in diesem Kapitel.

AIR verstehen
- AIR bringt das Web auf den Desktop: So stehen die Möglichkeiten des Desktops auch für Webtechnologien zur Verfügung – die Desktop-Anwendungen kommunizieren bei bestehender Internetverbindung mit dem entfernten Webserver. Dabei profitieren die Desktop-Anwendungen von den Rich-Internet-Anwendungen (bzw. Lightweight Desktop Application).
  
  Lightweight Desktop Application
  
  08:49
- Die Erstellung einer AIR-Anwendung unterscheidet sich im Flex Builder kaum von einem Flex-Projekt. Ohnehin stehen in AIR die Elemente aus dem Flex Framework zur Verfügung, wobei Flex-Anwendungen auf die Vorteile von AIR aus Sicherheitsgründen im Browser verzichten müssen.
  
  AIR-Projekt mit dem Flex Builder anlegen
  
  04:22
- Das Verhalten des Chrome (das ist das Fenster, in dem eine AIR-Anwendung angezeigt wird) und Sicherheitseinstellungen werden in einer XML-Datei festgehalten. Stellen Sie den Parameter <systemChrome> auf "none" und <transparent> auf "true", sind Sie in der Lage, völlig frei definierte Anwendungsfenster zu erzeugen.
  
  Konfiguration und Fenstermodus
  
  02:07
- Der letzte Schritt in einer AIR-Anwendung ist die Veröffentlichung. Im Unterschied zu einer "normalen" Flex-Anwendung müssen AIR-Anwendungen für den Vertrieb noch zusätzlich in einem Archiv (*.air) verpackt werden. Dies erreichen Sie über "Project > Export Release Build...". Die Installation einer gepackten AIR-Anwendung erfolgt durch einen Doppelklick auf die ausführbare Datei.
  
  Packen und Vertrieb
  
  04:22

Trailer: Eindrücke aus Adobe Flex 3 Grundlagen

Das Video-Training des erfahrenen Flex/Flash-Experten und Flashforum-Gründers Sascha Wolter richtet sich an Ein- und Umsteiger in die Flex-Welt. Dabei gibt dieses Training eine anschauliche Einführung in die essentiellen Themen rund um die Erstellung von Rich Applications mit Flex. Wer wirklich verstehen möchte, wie Flex funktioniert und Tipps aus der Praxis für die Praxis sucht, wird hier fündig!

Vom ambitionierten Designer bis zum gestandenen Softwareentwickler - jeder findet hier wertvolle Kapitel, die mit vielen Vorurteilen aufräumen, vor Sackgassen warnen und typische Fehler vermeiden helfen. Natürlich darf auch das Thema Model View Controller und der Sinn bzw. Unsinn entsprechender Frameworks nicht fehlen. Und wem das zu technisch erscheint: Der Designer- und Developer-Workflow wird ebenso behandelt wie die Integration von Flash in Flex.

Flex verstehen

In diesem Kapitel wird das grundlegende Wissen vermittelt, um eine so genannte „Rich Internet Application“ mit Flex zu erstellen.

Flash verwenden

Dieses Kapitel beschäftigt sich mit den Details der Flex-Frameworks und dessen Bestandteilen von MXML und den Oberflächenelementen bis hin zu den ersten Schritten bei der Integration dynamischer Daten mit XML. Außerdem lernen Sie, dass das alles weitestgehend auch ohne ActionScript funktioniert!

Flex programmieren

Um auch den gesamten Umfang der Flex-Möglichkeiten auszureizen, ist die Programmierung mit ActionScript 3 erforderlich. Diese wird hier anhand von Beispielen Schritt für Schritt beschrieben. Ein Abschnitt beschäftigt sich dabei mit der Bedeutung von „Entwurfsmustern“ und stellt einige grundlegende Varianten vor.

Flex gestalten

Flex bietet selber keine grafischen Werkzeuge aber eine Vielzahl an Möglichkeiten, um das Erscheinungsbild einer Flex-Anwendung zu ändern. Die in diesem Teil beschriebenen Möglichkeiten reichen von einfachen Stilen basierend auf CSS bis hin zu komplexen Flash-Bausteinen.

AIR verstehen

Die Botschaft dieses Kapitels lässt sich in einem Satz zusammenfassen: AIR und Flex sind gar nicht so verschieden! Immerhin befinden sich in der Flex SDK und im Flex Builder bereits alle notwendigen Werkzeuge. Im Wesentlichen müssen Sie eine Flex-Anwendung am Ende nur noch in ein AIR-Archiv verpacken – schon sind Sie fertig!

Der Fokus dieses Trainings liegt ganz eindeutig auf dem Verstehen der Technologie und dem Heranführen an eigene Lösungen. Für technisch weniger versierte Entwickler wird zudem der Designer- und Developer-Workflow behandelt.