1. Home
2. Developer Center
3. Flex Developer Center

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

---

Programmieren mit MXML und ActionScript

Adobe® hat Flex als eine ActionScript-Klassenbibliothek implementiert. Diese Klassenbibliothek enthält Komponenten (Container und Steuerelemente), Manager-Klassen, Datenservice-Klassen sowie Klassen für alle sonstigen Funktionen. Anwendungen werden durch Verwendung der Sprachen MXML und ActionScript in der Klassenbibliothek entwickelt.

MXML

MXML ist eine XML-Sprache, mit der Sie das Layout der Benutzeroberflächenkomponenten für Adobe® Flex™-Anwendungen gestalten können. Zudem definieren Sie mit MXML deklarativ nichtoptische Aspekte einer Anwendung, wie beispielsweise das Aufrufen serverseitiger Datenquellen und Datenbindungen zwischen Benutzeroberflächenkomponenten und Datenquellen.

Mit dem <mx:Button> -Tag erstellen Sie z. B. eine Instanz des Button-Steuerelements mit folgender MXML-Anweisung:

<mx:Button id="myButton" label="I'm a button!"/>

Setzen Sie die id -Eigenschaft, um der Button -Instanz einen eindeutigen Namen zu geben, um sie später referenzieren zu können. Die Funktion label Eigenschaft legt den Text der Beschriftung für die Button -Instanz fest.

Das nachfolgende Beispiel enthält den vollständigen Code, der zum Erstellen einer Flex-Anwendung erforderlich ist, die ein Button-Steuerelement anzeigt:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    horizontalAlign="center" verticalAlign="center"
>

    <mx:Button id="myButton" label="I'm a button!" />
</mx:Application>

Nach dem Schreiben der Flex-Anwendung müssen Sie sie mit dem Flex Compiler kompilieren. Der Flex Compiler ist eine kleine ausführbare Datei namens mxmlc. Sie ist im Unterordner Flex SDK 2.0\bin Ihres Flex 2-Installationsordners gespeichert.

Anleitung

1. Erstellen Sie in Ihrem bevorzugten Textbearbeitungsprogramm (z. B. Editor) eine neue Datei und speichern Sie sie als MyFirst.mxml.
2. Geben Sie den Code aus dem vorangegangenen Beispiel in MyFirst.mxml ein und speichern Sie Ihre Datei.
3. Öffnen Sie ein Befehlsfenster, indem Sie die Optionsfolge Start > Programme > Zubehör > Eingabeaufforderung auswählen.
4. Ändern Sie Ihr aktuelles Verzeichnis in das Verzeichnis des Ordners, in dem Sie die Flex-Anwendung in Schritt 1 gespeichert haben.
5. Rufen Sie den Flex Compiler mit folgendem Befehl auf:
   mxmlc --strict=true --file-specs MyFirst.mxml
   
   

   Die Elemente in der Befehlszeichenfolge, die mit doppelten Bindestrichen beginnen, werden Compiler-Optionen genannt. Sie dienen zum Definieren des Verhaltens des Flex Compilers. Im vorangegangenen Beispiel haben Sie die --strict -Option auf true gesetzt, um den Strict-Modus des Compilers zu erzwingen. Im Strict-Modus stellt der Compiler höhere Erwartungen an Ihren Code. So erwartet er beispielsweise, dass Sie Ihre Variablen statisch eingeben. Geben Sie mit der --file-specs -Option die MXML-Datei an, die kompiliert werden soll.

6. Sie können entweder in Windows Explorer auf die SWF-Datei doppelklicken oder ihren Namen in die Befehlszeile eingeben, um sie in Adobe Flash Player 9 zu öffnen.

Ergebnis dieses Beispiels ist die folgende SWF-Datei:

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.

ActionScript

MXML-Tags entsprechen ActionScript-Klassen oder Eigenschaften von Klassen. Wenn Sie Ihre Flex-Anwendung kompilieren, analysiert Flex Ihre MXML-Tags und generiert die entsprechenden ActionScript-Klassen. Anschließend werden diese ActionScript-Klassen in SWF-Bytecode kompiliert und in einer SWF-Datei gespeichert.

Anknüpfend an das oben stehende Beispiel, stellt Flex die ActionScript Button-Klasse bereit, mit der das Flex Button-Steuerelement definiert wird.

Hinweis:Im vorangegangenen Beispiel war das mx -Präfix im <mx:Button> Tag ein Namespace. Er wird durch eine eindeutige URL im Application-Tag deklariert. Die Funktion mx -Präfix ordnet alle Komponenten im mx -Namespace ihren vollständig qualifizierten Klassennamen zu. Auf diese Weise findet der Flex Compiler die ActionScript-Klassen, die den MXML-Tags im mx -Namespace entsprechen.

Das nachfolgende Beispiel zeigt, wie Sie unter Verwendung von ActionScript ein Button-Steuerelement erstellen. Das Ergebnis ist mit der MXML-Version identisch.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/GettingStartedActionScript/index.html"

    creationComplete="creationCompleteHandler();"
    width="300" height="80"
 >

    <mx:Script>

        <![CDATA[
            import mx.controls.Button;
            import mx.events.FlexEvent;

            private var myButton:Button;

            private function creationCompleteHandler():void

            {
                // Create a Button instance and set its label 
                myButton = new Button();
                myButton.label = "I'm a button!";
                
                // Get notified once button component has been created and processed for layout


                myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);
                
                // Add the Button instance to the DisplayList
                addChild (myButton);
            } 
            
            private function buttonCreationCompleteHandler ( evt:FlexEvent ):void

            {
                // Center the button 
                myButton.x = parent.width/2 - myButton.width/2;
                myButton.y = parent.height/2 - myButton.height/2;
            }

        ]]>
    </mx:Script>
</mx:Application>

Wenn Sie eine Flex-Komponente mittels ActionScript erstellen, müssen Sie die Klasse der Komponente importieren. Außerdem müssen Sie die Komponente der DisplayList Ihrer Anwendung hinzufügen. Mithilfe der addChild() -Methode machen Sie sie sichtbar. Wenn Sie die Länge und Komplexität dieses Beispiels mit der MXML-Version vergleichen, wird deutlich, wie Ihnen die einfache, tag-basierte, deklarative Syntax von MXML das Schreiben einer Menge Zeilen von ActionScript-Code für das Layout Ihrer Komponenten erspart.

Ergebnis dieses Beispiels ist die folgende SWF-Datei:

Hinweis: Dieses Beispiel veranschaulicht die Verwendung von Inline-ActionScript mit dem Script Tag. Dies ist eine der möglichen Methoden, ActionScript in Ihre Flex-Anwendung einzubinden. Desweiteren können Sie Skriptblöcke in externe ActionScript-Dateien aufteilen oder externe ActionScript-Klassen verwenden.

Zurück zum Anfang

---

Weitere Informationen

Weitere Informationen zu MXML und ActionScript finden Sie im Entwicklerhandbuch Flex 2 Developer's Guide* unter den Kapiteln "Developing applications in MXML" (Anwendungen in MXML entwickeln), "MXML Syntax" (MXML-Syntax) und "ActionScript".

Die Autoren