(Tutorial) Flex Builder 3 hab ich - und was mache ich jetzt damit?

Heute ist eine kleine Einführung in den Flex Builder 3 an der Tagesordnung. Alle, die sich diese Entwicklungsumgebung angeschafft haben (ob als Studentenversion oder gekaufte normale Version ist unerheblich) und nicht mit dem SDK arbeiten, dürfen sich jetzt über eine Einführung in die Entwicklungsumgebung freuen. Diejenigen, die mit dem SDK arbeiten muss ich etwas enttäuschen, da dort nur mit MXML und ActionScript entwickelt werden kann und keine nette, grafische Benutzeroberfläche angeboten wird.

Startet nun doch bitte erstmalig euren Flex Builder (falls ihr damit arbeitet, sonst könnt ihr diesen Post mehr oder minder überspringen, da er nur als Einstieg in den Flex Builder gedacht ist).
Oben links in der Ecke drückt ihr bitte auf den kleinen „New“-Button (oder File -> New) und dann auf „MXML-Application“, die Software wird euch sagen, dass ein Wizard euch beim Anlegen eines Projekts helfen wird. Nun folgt ihr einfach den Anweisungen des Wizards. Im ersten Schritt gebt ihr eurem Projekt einen Namen, z.B. „Erste Schritte mit Flex“ und drückt auf „Finish“. Ihr könnt auch den Schritten folgen, aber die dort verwendeten Infos sind für die folgenden Beiträge erst einmal irrelevant. Fertig ist eure Datei.

Ein erster Blick auf die Oberfläche im Flex Builder 3 zeigt die auf dem Bild gezeigte Oberfläche (ohne die farbigen Kästen, die brauche ich nur gleich zur Erklärung). Der Flexbuilder hat zwei "Views", soll heißen zwei verschiedene Ansichten. Auf der einen Seite den auch auf dem Bild abgebildeten "Design-View" und einen Button zum Wechseln auf den "Source View", in dem im Code gearbeitet werden kann. Doch dazu später mehr. Der Design-View dient zum Designen via Drag&Drop und für Einstellungen kleinerer Art, die nicht im Source-View gemacht werden müssen.
In der Mitte habt ihr also eure Ansicht, wie das ganze später groß aussehen soll. Innerhalb des linken, gelben Kastens befindet sich eine Dateiverwaltung, in der ihr eure "MXML-Projekte", d.h. eure Flexprojekte sehen könnt. Im darunterliegenden grünen Kasten werden die vorgefertigten Komponenten angeboten, die ihr verwenden könnt. Diese können einfach per Drag&Drop auf eure Designoberfläche gezogen und somit eingebunden werden. Dann gibt es noch den rechten, blauen Kasten, in dem ihr zu den eingefügen Komponenten Attribute definieren und belegen könnt. Außerdem wird hier eine leichtere Möglichkeit geboten, die Komponenten auf dem Fenster zu arrangieren ohne das ganze mühsam im Code eingeben zu müssen. Zum oberen, roten Kasten komme ich später - hierzu sei jetzt nur soviel gesagt, als dass die "Stages" eine Möglichkeit bieten, Ereignisse auszuführen und z.B. bei Klicks andere Fenster anzuzeigen.
Hiermit kann man also schonmal ein bisschen herumspielen und etwas auseinander nehmen und zusammensetzen.

Als Beispiel nehmen wir uns doch einfach mal eine BarChart-Komponente und platzieren die auf unserem Designview. Diesem Diagramm können wir dann bei seinen Attributen z.B. einen Namen geben (die ID) und ihn z.B. so groß machen wie das gesamte Fenster, indem wir unter "Layout" Breite und Höhe mit 100% vorbesetzen. Was hierbei interessant ist: Man kann sowohl Pixelbeträge (z.B. 100px) eingeben als auch Prozentangaben, sodass das Diagramm immer prozentual an die Fenstergröße angepasst werden kann.
Mmmh… vermutlich wundert ihr euch jetzt, dass schon ein BarChart auf euren Designview vorgezeichnet wurde und dieser schon Angaben enthält, richtig? Das ist einfach nur eine einfache Vorschaufunktion ohne Inhalt. Die richtigen Daten, die ihr selbst später hinzufügen werdet, werden nicht auf dem Vorschaubildschirm angezeigt, sondern erst, wenn eure Datei gespeichert wurde und ihr eine SWF-Datei erzeugt habt.

Am besten spielt ihr jetzt einfach ein wenig mit dem Designview herum und schaut euch mal die verschiedensten Diagrammtypen an, die der Flexbuilder so anzubieten hat. Auch die Attribute sind sicherlich interessant. Spielt einfach mal herum. Im nächsten Beitrag werden dann unserem BarChart Datensätze hinzugefügt und die Datei wird benutzbar gemacht.