Adobe Flex Grundlagen - Komponenten

Seit einigen Jahren gibt es jetzt Adobe Flex, eine neue Möglichkeit Actionscript basierende RIAs zu programmieren. Flex 4 steht vor der Tür, da ist es an der Zeit hier ein paar Grundlagen zu vermitteln. Wer bereits in Actionscript 3 programmiert hat, sollte keine Probleme mit Flex haben. Wer das noch nicht gemacht hat, sollte es vielleicht zuerst tun, oder sich ein paar gute Tutorials zu Actionscript suchen und beides gleichzeitig lernen. Trotzdem gibt es natürlich Neuigkeiten, die auch ein Erfahrener Flash-Entwickler noch lernen muss. Zuerst möchte ich auf die absoluten Grundlagen eingehen, die Komponenten.

Wie man Flex bekommt, habe ich schon Anfang des Jahres beschrieben. Also schnell hinsurfen und den Flex Builder besorgen. Wer kein Student ist, muss ein wenig Kohle in die Hand nehmen, oder erstmal die Testversion ausprobieren.

Hat man das Eclipse-basierte Tool "Flex Builder" installiert, sieht man zwei mögliche Ansichten: Source und Design. Die Idee, die Adobe seit einigen Jahren verfolgt (vielleicht auch schon immer, aber seit einigen Jahren wird es sehr deutlich), ist die vielfach praktizierte Kompetenzentrennung in ihren Programmen zu unterstützen. In einer Agentur arbeiten i.d.R. Entwickler und Designer Seite an Seite und arbeiten sich gegenseitig zu bzw. sind für verschiedene Abschnitte eines Projektablaufs zuständig. Damit beide sich nicht im Weg stehen, sondern sich optimal ergänzen können, versucht Adobe in vielen seiner Programme diese Trennung zu optimieren, also einerseits Ansichten für Entwickler und Ansichten für Designer zu schaffen, und andererseits beide so zu kombinieren, dass die Benutzer keine "Entweder-Oder" sondern ein "Sowohl-Als-Auch" Situation haben.

Worauf ich hinaus will ist, dass ein Entwickler zwar auch alles im Source-View erledigen kann, aber dumm wäre, wenn er nicht hin und wieder auf den Design-View zurückgreifen würde, um Layout-spezifische Aufgaben schneller erledigen zu können. Genauso wie ein Designer auch hin und wieder unter die Haube gucken sollte um sicherzustellen, dass die automatische Umsetzung seines Designs auch korrekt geschieht.

MXML

Die von Flex benutzte Sprache MXML ist im Grunde nichts anderes als XML bzw. XHTML, nur dass man mit den Tags keine Markups erzeugt, sondern Komponenten. Komponenten die auf Actionscript basieren.

Wenn man also in Flex schreibt

<mx:Panel title="Meine Konsole">
  <mx:TextArea id="meineKonsole" />
</mx:Panel>

dann wird die Panel Komponente mit dem Titel "Meine Konsole" erstellt und innerhalb der Panel Komponente wird eine TextArea erzeugt, die eine id "meineKonsole" bekommt. Über diese id kann diese Komponente ab jetzt angesteuert werden. Also zum Beispiel so:

<mx:Button label="Mein Knopf" click="meineKonsole.text += 'Knopf wurde geklickt \n'" />

Hier wird ein Button erzeugt, der mit dem Text "Mein Knopf" beschrieben wird und beim Klick einen Befehl ausführt, nämlich in die Texteigenschaft der Komponente "meineKonsole" einen String zu schreiben.

Das ganze Programm sieht dann also so aus:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
   
<mx:Panel title="Meine Konsole">
  <mx:TextArea id="meineKonsole" />
</mx:Panel>

<mx:Button label="Mein Knopf" click="meineKonsole.text += 'Knopf wurde geklickt \n'" />

</mx:Application>

Natürlich sieht das ganze noch unspannend aus. Im Design-View hat man jetzt zahlreiche Möglichkeiten diese Komponenten anzuordnen und zu platzieren. Selbstverständlich lassen sich auch Stylesheets anwenden und man kann allen Komponenten komplett eigene Designs zuweisen. Aber dazu mehr später.

Komponenten gibt es massenhaft und im Design-View hat man unten links im Flex-Builder eine schöne Übersicht über alles was verfügbar ist. Hat man ein Problem mit einer Komponente, muss man einfach nur F1 klicken und den Namen der Komponente im geöffneten Hilfe-Fenster suchen.

Und mehr ist eigentlich nicht zu sagen. Alle Flex Tools bestehen aus diesen Komponenten. Würde man die Komponenten nicht nutzen, würde Flex keinen Sinn machen und man könnte direkt alles in Flash programmieren. Das wäre aber unglaublich viel Arbeit, und hier genau ist der Ansatz von Flex. Umfangreiche Tools schnell und leicht umsetzen mit MXML.

Natürlich kann und muss man auf Dauer auch zusätzlichen Actionscript Code einbetten um die vollen Funktionalitäten der Komponenten ausschöpfen zu können, und man kann sogar die Komponenten selber verändern, oder eigene schreiben. Aber wenn man mal vergleicht wie viele Zeilen Code man in Flash schreiben müsste um das 7-Zeiligen-Programm oben in Funktion und Darstellung zu imitieren, dann merkt man schnell wo die Stärke von Flex liegt.