1. Home
2. Developer Center
3. Flex Developer Center
4. Einführung in Flex

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

---

Ereignisse verarbeiten

Adobe® Flex™-Anwendungen sind ereignisgesteuert. Ereignisse informieren den Programmierer über Benutzerinteraktionen mit einer Oberflächenkomponente, desweiteren über wichtige Änderungen in der Darstellung oder im Lebenszyklus einer Komponente, beispielsweise die Erstellung oder Löschung einer Komponente oder die Änderung ihrer Größe.

Wenn eine Instanz einer Komponente ein Ereignis sendet, werden Objekte benachrichtigt, die Sie als Listener für dieses Ereignis festgelegt haben. Sie definieren Ereignis-Listener, auch Ereignis-Handler genannt, in ActionScript, um Ereignisse zu verarbeiten. Sie legen Ereignis-Listener für Ereignisse entweder in der MXML-Deklaration für die Komponente oder in ActionScript fest.

Ereignis-Benachrichtigungen können auf drei Arten empfangen werden:

• Registrierung eines Ereignis-Handlers in MXML
• Erstellen eines Inline-Ereignis-Handlers in der MXML-Definition
• Registrierung eines Ereignis-Handlers über ActionScript

Registrierung eines Ereignis-Handlers in MXML

Die erste und am häufigsten verwendete Methode für den Erhalt von Ereignisbeachrichtigungen ist die Definition eines Ereignis-Handlers in MXML. Dieser wird aufgerufen, wenn ein Ereignis stattfindet.

In diesem Beispiel definieren Sie einen Ereignis-Handler für das click -Ereignis des Button-Steuerelements. Sobald ein Benutzer auf das Button-Steuerelement klickt, setzt der Ereignis-Handler die Eigenschaft text des Label-Steuerelements auf "Hello, World!"..

Beispiel

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="300" height="200"
    horizontalAlign="center" verticalAlign="middle" 
    viewSourceURL="src/HandlingEventsEventHandler/index.html"

>
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
        
            private function clickHandler ( event:MouseEvent ):void
            {
                myLabel.text = "Hello, World!";
            }
        ]]>
    </mx:Script>

    
    <mx:Panel 
        title="My Application" horizontalAlign="center"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" 
    >

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button id="myButton" label="Click Me!" click="clickHandler(event);" />

    </mx:Panel>
</mx:Application>

Funktion

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.

Zurück zum Anfang

Inline-Ereignis-Handler in der MXML-Definition erstellen

In bestimmten Situationen ist es als Reaktion auf Ereignisse am einfachsten, den Ereignis-Handler komplett in der MXML-Definition einer Komponente zu definieren. Man bezeichnet dies auch als Verwendung eines Inline-Ereignis-Handlers.

Im folgenden Beispiel setzen Sie die click -Eigenschaft des <mx:Button> -Tag so, dass er die Eigenschaft text des Label-Steuerelements direkt festlegt, ohne eine Ereignis-Handler-Methode aufzurufen.

Beispiel

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/HandlingEventsInlineMethod/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="200"

>
    <mx:Panel 
        title="My Application" horizontalAlign="center"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
    >

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button id="myButton" label="Click Me!" click="myLabel.text = 'Hello, World!'" />

    </mx:Panel>
</mx:Application>

Funktion

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.

Zurück zum Anfang

Ereignis-Handler über ActionScript registrieren

Sie können auch auf Ereignisse reagieren, indem Sie einen Ereignis-Handler mittels ActionScript festlegen.

In diesem Beispiel legen Sie den Ereignis-Handler mit der addEventHandler() -Methode in ActionScript fest. Setzen Sie die addEventHandler() -Methode in den Ereignis-Handler für das creationComplete -Ereignis des Application-Containers.

Beispiel

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
     viewSourceURL="src/HandlingEventsActionScript/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="200"
    creationComplete="creationCompleteHandler(event);"

>
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
            import mx.events.FlexEvent;

            private function creationCompleteHandler(event:FlexEvent):void

            {
                // Listen for the click event on the Button control
                myButton.addEventListener (MouseEvent.CLICK, clickHandler);
            }
        
            private function clickHandler ( event:Event ):void

            {
                myLabel.text = "Hello, World!";
            }
        ]]>
    </mx:Script>

    
    <mx:Panel 
        title="My Application" horizontalAlign="center"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
    >

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button id="myButton" label="Click Me!" />

    </mx:Panel>
</mx:Application>

Funktion

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.

Zurück zum Anfang

---

Weitere Informationen

Weitere Informationen zur Verarbeitung von Ereignissen finden Sie im Entwicklerhandbuch Flex 2 Developer's Guide im Abschnitt "Using Events" (Ereignisse verwenden).

Die Autoren