Mit der MXML-Datei kann man das Userinterface und die Aktionen definieren welche die Flex-Anwendungen bietet. Die Formularelemente werden dabei in MXML beschrieben, die Aktionen in ActionScript 3.

Im kostenpflichtigen FlexBuilder kann man die Formular-Elemente einfach per Drag&Drop in das gewünschte Fenster ziehen. Bei dem Schreiben des Codes hilft einem eine Autovervollständigungs-Funktion (IntelliSense).

1. Zur Erstellung einer Beispielanwendung mit dem FlexBuilder erstellt wählt man: File >> New >> Flex Project
2. Anschliessend wählt man die "Web Application" aus. Eine Servertechnologie muss dabei nicht gewählt werden.

Die Autovervollständigung kann wie in Eclipse mit STRG+Leertaste aktiviert werden.

Das Wurzelelemente einer MXML-Datei ist:

<mx:Application>

Grundlegende Elemente für Texteingabe, Buttons, Anzeigefeldern und die Eingabe von ActionScript sind:

<mx:TextInput>

<mx:Button>

<mx:Label>

<mx:Script>

Code für das Definieren eines Buttons mit Action-Script-Code nach dem Event-Handler "click":

<!-- ActionScript inline -->
<mx:Button x="76" y="70" 

label="Klick mich!" width="165"

click="mx.controls.Alert.show('Servus')"/> 

Code für Button mit eingebettetem Code. Vor allem sinnvoll wenn der Code sehr lang wird:

<!-- ActionScript nested -->
<mx:Button x="76" y="135" label="Zweiter Button (nested)" click="onClick(event)"/>
    
<mx:Script>
     <![CDATA[
         import mx.controls.Alert;
         private function onClick(event:Event):void {
         Alert.show("der Button mit nested Code wurde geklickt " + event.type);
         }
    ]]>
</mx:Script>

Möchte man Icons für die Beschriftung verwenden, geht dies übrigens wie folgt:

<mx:Button
label="Icon Button"
icon="@Embed(source='assets/logo.jpg')"
height="36"
/> 

Auswahllisten bzw. ComboBoxes werden wie folgt definiert. Zunächst benötigt man eine ArrayCollection in der die Daten für die Combobox definiert werden:

<!-- Arbeiten mit einer Combobox -->

    <mx:ArrayCollection id="Faecher">

        <mx:Object label="Wirtschaftsinformatik" data="WI"/>

        <mx:Object label="Software-Engineering" data="SE"/>

    </mx:ArrayCollection>

Anschliessend erstellen wir die Combobox mit der eben erzeugten ArrayCollection als Datenbasis:

<mx:ComboBox x="79" y="200" dataProvider="{Faecher}"

 close="closeHandler(event)"/>

Wir haben auch gleich den closeHandler definiert, der aufgerufen wird wenn die ComboBox geschlossen wird (etwas ausgewählt wird):

<mx:Script>
        <![CDATA[
            private function closeHandler(event:Event):void {
            Alert.show(ComboBox(event.target).selectedItem.label);    
            }
        ]]>
</mx:Script> 

Das Erzeugen von Labels geschieht mit der folgenden Codezeile:

<mx:Label id="meinLabel" x="358" y="202" text="Label"/>

Die Elemente können auf vielfältige Weise in ihrem Aussehen angepasst werden. Dies kann man entweder direkt im Code tun, oder wie in CSS eine externe Style-Datei definieren.

Style direkt in der MXML-Datei:

<mx:TextArea id="myText" text="hello world" fontFamily="Tahoma"/>

oder...

<mx:Style>
        Button {color:red;}
</mx:Style> 

Style-Datei eingebunden über externe Datei:

<mx:Style source="URLzuStyleSheet"/>