Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle Alert

Compatible Flex 3. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 18 mars 2010

Cet article est une traduction de l'aide Adobe Flex.

Adobe a donné son accord concernant la traduction de la documentation.

Introduction

Tous les composants Flex peuvent appeler la méthode statique show() de la classe Alert pour ouvrir une boîte de dialogue modale contentant un message et éventuellement, un titre, des boutons et des icônes. L'exemple suivant montre une fenêtre d'alerte:

Le contrôle Alert se ferme quand vous sélectionnez un bouton du contrôle, ou quand la touche Echap est pressée.

La méthode Alert.show() possède la syntaxe suivante:

public static show(
    text:String, 
    title:String=null, 
    flags:uint=mx.controls.Alert.OK, 
    parent:Sprite=null, 
    clickListener:Function=null, 
    iconClass:Class=null, 
    defaultButton:uint=mx.controls.Alert.OK
):Alert

Cette méthode retourne un objet de type Alert.

Le tableau suivant décrit les arguments de la méthode show():

ArgumentDescription
text(Obligatoire) Spécifie le message affiché dans la boîte de dialogue.
titleSpécifie le titre de la boîte de dialogue. S'il n'est pas défini, une barre de titre vide est affiché.
flagsSpécifie les boutons à afficher dans la boîte de dialogue. Les options sont les suivantes:

mx.controls.Alert.OK Bouton OK

mx.controls.Alert.YES Bouton Oui

mx.controls.Alert.NO Bouton Non

mx.controls.Alert.CANCEL Bouton Annuler

Les options peuvent être combinées en utilisant l'opérateur pipe '|'. Les boutons apparaissent dans l'ordre indiqué ici quelle que soit l'ordre spécifié dans votre code. La valeur par défaut est mx.controls.Alert.OK.
parentL'objet parent du contrôle Alert
clickListenerSpécifie la fonction d'écoute des événements des boutons.

L'objet d'événement passé à cette fonction d'écoute est une instance de la classe CloseEvent. L'objet d'événement contient la propriété detail, qui est définie sur le marqueur du bouton (mx.controls.Alert.OK, mx.controls.Alert.YES, mx.controls.Alert.NO, mx.controls.Alert.CANCEL).
iconClassSpécifie une icône à afficher à gauche du message dans la boîte de dialogue.
defaultButtonSpécifie le bouton par défaut en utilisant une des valeurs valides de l'argument flags. C'est le bouton qui est sélectionné lorsque l'utilisateur appuie sur la touche Entrée. La valeur par défaut est Alert.OK.

Un appuie sur la touche Echap simule le clic sur les boutons Non ou Annuler.

Pour utiliser le contrôle Alert, vous devez d'abord importer la classe Alert dans votre application, puis ensuite appeler la méthode show(), comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- controls\alert\AlertSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </mx:Script>
 
    <mx:TextInput id="myInput" 
        width="150" 
        text=""/>
    <mx:Button id="myButton" 
        label="Copy Text" 
        click="myText.text = myInput.text;
           Alert.show('Text Copied!', 'Alert Box', mx.controls.Alert.OK);"/>
    <mx:TextInput id="myText"/> 
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Dans cet exemple, la sélection du bouton Control copie le texte depuis le contrôle TextInput vers le contrôle TextArea, et affiche le contrôle Alert.

Vous pouvez aussi définir un écouteur d'événement pour le contrôle Button , comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- controls\alert\AlertSimpleEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            private function alertListener():void {
                myText.text = myInput.text;
                Alert.show("Text Copied!", "Alert Box", Alert.OK);
            }
        ]]>
    </mx:Script>
 
    <mx:TextInput id="myInput" 
        width="150" 
        text=""/>
    <mx:Button id="myButton" 
        label="Copy Text" 
        click="alertListener();"/>
    <mx:TextInput id="myText"/> 
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Note: Après que la méthode show() ai créé la boîte de dialogue, Flex continue le traitement de l'application; il n'attend pas que l'utilisateur ferme la boîte de dialogue.

Dimensionner le contrôle Alert

Le contrôle Alert se redimensionne automatiquement pour s'ajuster à ses textes, boutons et icônes. Vous pouvez dimensionner de façon explicite le contrôle Alert en utilisant l'objet Alert retourné par la méthode show(), comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- controls\alert\AlertSize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            // Define variable to hold the Alert object. 
            public var myAlert:Alert;
 
            private function openAlert():void {
                myAlert = Alert.show("Copy Text?", "Alert", 
                    Alert.OK    | Alert.CANCEL);
                // Set the height and width of the Alert control.
                myAlert.height=150;
                myAlert.width=150;
            }
        ]]>
    </mx:Script>
 
        <mx:TextInput id="myInput" 
            width="150" 
            text=""/>
        <mx:Button id="myButton" 
            label="Copy Text" 
            click="openAlert();"/>
        <mx:TextInput id="myText"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Dans cet exemple, vous définissez les propriétés height et width du contrôle Alert de façon explicite, afin de redimensionner le contrôle.

Utiliser des écouteurs d'événements avec le contrôle Alert

L'exemple suivant ajoute un écouteur d'événement à la boîte de dialogue créée avec le contrôle Alert. Un écouteur d'événement vous permet d'effectuer un traitement quand l'utilisateur sélectionne un des boutons du contrôle Alert. L'objet d'événement passé à la fonction de rappel est de type CloseEvent.

Dans l'exemple suivant, le texte n'est copié que si l'utilisateur sélectionne le bouton OK dans le contrôle Alert:

<?xml version="1.0"?>
<!-- controls\alert\AlertEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;
 
            private function alertListener(eventObj:CloseEvent):void {
                // Check to see if the OK button was pressed.
                if (eventObj.detail==Alert.OK) {
                    myText.text = myInput.text; 
                }
            }
        ]]>
    </mx:Script>
 
    <mx:TextInput id="myInput" 
        width="150" 
        text="" />
    <mx:Button id="myButton" 
        label="Copy Text" 
        click='Alert.show("Copy Text?", "Alert",
            Alert.OK | Alert.CANCEL, this,
            alertListener, null, Alert.OK);'/>
    <mx:TextInput id="myText"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Dans cet exemple, vous définissez un écouteur d'événement pour le contrôle Alert. Dans le corps de la méthode de rappel de l'événement, vous déterminez quel bouton a été appuyé en examinant la propriété detail de l'objet d'événement. L'objet d'événement est une instance de la classe CloseEvent. Si l'utilisateur a appuyé sur le bouton OK, le texte est copié. Si l'utilisateur a appuyé sur n'importe quel autre bouton, ou sur la touche Echap, le texte n'est pas copié.

Spécifier une icône au contrôle Alert

Vous pouvez inclure une icône dans le contrôle Alert, qui apparaître à gauche du texte du contrôle. Cet exemple modifie l'exemple de la précédente section en ajoutant une balise metadata Embed pour importer l'icône. Pour plus d'informations sur l'import de ressources, regardez Using ActionScript.

<?xml version="1.0"?>
<!-- controls\alert\AlertIcon.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;
 
            [Embed(source="assets/alertIcon.jpg")] 
            [Bindable]
            public var iconSymbol:Class; 
 
            private function alertListener(eventObj:CloseEvent):void {
                // Check to see if the OK button was pressed.
                if (eventObj.detail==Alert.OK) {
                    myText.text = myInput.text; 
                }
            }
        ]]>
    </mx:Script>
 
        <mx:TextInput id="myInput" 
            width="150" 
            text=""/>
        <mx:Button id="myButton" 
            label="Copy Text"
            click='Alert.show("Copy Text?", "Alert",
                Alert.OK | Alert.CANCEL, this,
                alertListener, iconSymbol,  Alert.OK );'/>
        <mx:TextInput id="myText"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.