Einführung in Flex: Erste Schritte
Inhalt
- Programmieren mit MXML und ActionScript
- Ihre erste Anwendung
- Verarbeitung von Ereignissen
- Position und Layout von Flex-Komponenten
- Einbetten von Anwendungsobjekten
Ihre erste Anwendung
Da es sich bei MXML-Dateien um normale XML-Dateien handelt, haben Sie bei der Wahl der Entwicklungsumgebung freie Hand. Sie können entscheiden, ob Sie den MXMXL-Code in einem einfachen Texteditor, in einem speziell für XML vorgesehenen Editor oder in einer integrierten Entwicklungsumgebung (IDE) mit Unterstützung für Textbearbeitung schreiben möchten. Flex verfügt über eine spezielle IDE namens Adobe® Flex™ Builder™ 2, mit der Sie Ihre Anwendungen entwickeln können.
Die erste Zeile der MXML-Datei enthält die XML-Deklaration. Diese Zeile muss in jeder MXML-Datei zuerst stehen.
Die nächste Zeile enthält einen <mx:Application> -Tag, der den Application-Container definiert. Dieser ist stets der Haupt-Tag einer Flex-Anwendung.
Die Funktion <mx:Panel> -Tag definiert einen Panel-Container, der eine Titelleiste, einen Titel, eine Statusmeldung, einen Rahmen und einen Inhaltsbereich für seine untergeordneten Elemente enthält. Seine title -Eigenschaft lautet "My Application".
Die Funktion <mx:Label> -Tag steht für ein Label-Steuerelement; eine äußerst einfache Komponente der Benutzeroberfläche zur Anzeige von Text. Seine text -Eigenschaft lautet "Hello, World!".
Die Klammern fontWeight und fontSize -Eigenschaften des <mx:Label> -Tags ändern den Stil der verwendeten Schriftart. Den Stil Ihrer Komponenten können Sie auch mithilfe von CSS festlegen. Weitere Informationen finden Sie im Entwicklerhandbuch Flex 2 Developer's Guide* unter "Using Cascading Style Sheets (CSS)" (Cascading Style Sheets (CSS)).
Hinweis: Sie können Ihre Flex-Anwendung mithilfe der Compiler-Datei mxmlc über die Befehlszeile oder mithilfe von Flex Builder 2 kompilieren. Anweisungen zum Kompilieren einer Anwendung mit mxmlc sind im Lernprogramm Mit MXML und ActionScript programmieren enthalten.
Beispiel
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/HelloWorld/index.html" horizontalAlign="center" verticalAlign="middle" width="300" height="160" > <mx:Panel paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" title="My Application" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> </mx:Panel> </mx:Application>
Funktion
This content requires Flash
Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.
Weitere Informationen
Weitere Informationen zum Erstellen von Flex-Anwendungen finden Sie im Entwicklerhandbuch Flex 2 Developer's Guide* im Abschnitt "Developing Applications in MXML" (Anwendungen in MXML entwickeln).
Die Autoren
Aral Balkan singt und spielt Theater, er leitet Entwicklungsteams, beschäftigt sich mit Anwendererfahrungen, entwickelt Rich Internet Applications und leitet zudem OSFlash.org*, die London Macromedia User Group, sowie sein Unternehmen Ariaware*. Am liebsten diskutiert er über Entwurfsmuster und schreibt Artikel für Bücher und Zeitschriften. Außerdem hat er Arp* entwickelt, das Open Source RIA-Framework für die Flash-Plattform. Aral Balkan vertritt seine eigenen Meinungen und ist aktiv und engagiert. Er lächelt gerne und kann sogar im Gehen Kaugummi kauen.
