1. Accueil
2. Pôle de développement
3. Pôle de développement Flex
4. Flex en un clin d'œil

Flex en un clin d'œil : Prise en main

Sommaire

• Programmation avec MXML et ActionScript
• Création d'une première application
• Gestion des événements
• Positionnement et disposition de composants Flex
• Incorporation de ressources applicatives

---

Gestion des événements

Les applications Adobe® Flex™ sont orientées événements. Les événements permettent au programmeur de savoir quand l'utilisateur interagit avec un composant d'interface et quand des changements importants sont apportés à l'aspect ou au cycle de vie d'un composant (création, destruction ou redimensionnement, par exemple).

Quand une instance de composant transmet un événement, les objets enregistrés en tant qu'écouteurs de cet événement reçoivent une notification. Vous pouvez définir des écouteurs d'événements, également appelés gestionnaires d'événements, dans ActionScript pour traiter les événements. Vous avez également la possibilité de les enregistrer dans l'instruction MXML du composant ou dans ActionScript.

Il existe trois méthodes pour recevoir des notifications d'événements :

• Enregistrement d'un gestionnaire d'événements en MXML
• Création d'un gestionnaire d'événements en ligne dans la définition MXML
• Enregistrement d'un écouteur d'événements par le biais d'ActionScript

Enregistrement d'un gestionnaire d'événements en MXML

La première méthode, qui est également la plus communément utilisée, pour recevoir des notifications d'événements consiste à définir un gestionnaire d'événements en MXML qui est appelé lorsqu'un événement se produit.

Dans cet exemple, vous définissez un gestionnaire d'événements pour l'événement click d'un contrôle Button. Lorsqu'un utilisateur clique sur le contrôle Button, le gestionnaire d'événements définit la propriété text du contrôle Label sur "Hello, World!".

Exemple

<?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>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Retour au début

Création d'un gestionnaire d'événements en ligne dans la définition MXML

Le moyen le plus simple de répondre à des événements est parfois de définir intégralement le gestionnaire d'événements dans la définition MXML d'un composant. Il s'agit alors d'un gestionnaire d'événements en ligne.

Dans l'exemple ci-après, définissez la propriété click de la balise <mx:Button> de telle manière qu'elle définisse directement la propriété text du contrôle Label, sans appeler une méthode de gestionnaire d'événements.

Exemple

<?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>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Retour au début

Enregistrement d'un écouteur d'événements par le biais d'ActionScript

Vous pouvez également répondre à des événements en enregistrant un gestionnaire d'événements à l'aide d'ActionScript.

Dans cet exemple, le gestionnaire d'événements est enregistré en utilisant la méthode addEventHandler() dans ActionScript. Placez la méthode addEventHandler() dans le gestionnaire d'événements pour l'événement creationComplete du conteneur Application.

Exemple

<?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>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Retour au début

---

Pour plus d'informations

Pour plus d'informations sur la gestion des événements, reportez-vous à la section "Using Events" du document Flex 2 Developer's Guide*.

À propos de l'auteur