MXML mit dem Flex Builder

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.

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.

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.

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.

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.

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ü.

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/.

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 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.

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.

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.

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".

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".

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.

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".

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.

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".

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>.

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.

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.

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.

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.

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.

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".

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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".

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".

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".

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.

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.

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.

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".

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 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.

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.

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.

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.

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.