1. Accueil
2. Pôle de développement
3. Pôle de développement Flex

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

---

Programmation avec MXML et ActionScript

Adobe® a implémenté Flex en tant que bibliothèque de classes ActionScript. Cette bibliothèque de classes contient des composants (conteneurs et contrôles), des classes de gestionnaires, des classes de services de données et des classes pour toutes les autres fonctionnalités. Vous pouvez développer des applications en utilisant les langages MXML et ActionScript avec la bibliothèque de classes.

MXML

MXML est un langage XML qui sert à agencer des composants d'interface utilisateur pour les applications Adobe® Flex™. Vous pouvez également utiliser le langage MXML pour définir de manière déclarative des aspects non graphiques d'une application, tels que l'accès à des sources de données côté serveur et les liaisons de données entre des composants d'interface utilisateur et des sources de données.

Vous pouvez, par exemple, utiliser la balise <mx:Button> pour créer une instance du contrôle Button à l'aide de l'instruction MXML suivante :

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

Définissez la propriété id pour donner à l'instance Button un nom unique que vous pouvez utiliser ultérieurement pour y faire référence. La propriété label définit le texte du libellé affiché sur l'instance Button .

L'exemple suivant reprend dans son intégralité le code nécessaire pour créer une application Flex affichant un contrôle Button :

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

Une fois que vous avez écrit une application Flex, vous devez la compiler à l'aide du compilateur Flex. Ce compilateur est un petit fichier exécutable appelé mxmlc qui se trouve dans le dossier Flex SDK 2.0\bin sous votre dossier d'installation Flex 2.

Instructions

1. Créez un nouveau fichier dans votre éditeur de texte favori (ex., Notepad) et enregistrez-le sous MyFirst.mxml.
2. Saisissez le code de l'exemple précédent dans MyFirst.mxml et enregistrez votre fichier.
3. Ouvrez une fenêtre de commande en sélectionnant Démarrer > Tous les programmes > Accessoires > Invite de commandes.
4. Remplacez votre répertoire courant par le répertoire qui contient l'application Flex enregistrée à l'étape 1.
5. Tapez la commande suivante pour appeler le compilateur Flex :
   mxmlc --strict=true --file-specs MyFirst.mxml
   
   

   Les éléments de la chaîne de commande qui commencent par des double-tirets sont des options de compilateur qui servent à définir le comportement du compilateur Flex. Dans l'exemple ci-dessus, l'option --strict est définie sur true pour forcer le compilateur à passer en mode strict. Dans ce mode, le compilateur est plus exigeant en ce qui concerne votre code. Par exemple, il requiert que vous tapiez statiquement vos variables. L'option --file-specs sert à spécifier le fichier MXML qui est compilé.

6. Double-cliquez sur le fichier SWF dans Windows Explorer ou saisissez son nom dans la ligne de commande pour l'ouvrir dans l'application autonome Adobe Flash Player 9.

Cet exemple produit le fichier SWF suivant :

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.

ActionScript

Les balises MXML correspondent à des classes ou des propriétés de classes ActionScript. Lorsque vous compilez votre application, Flex analyse vos balises MXML et génère les classes ActionScript correspondantes. Il compile ensuite ces classes ActionScript en code-octet SWF et les stocke dans un fichier SWF.

Pour continuer avec l'exemple ci-dessus, Flex fournit la classe ActionScript Button qui définit le contrôle Button Flex.

Remarque : Dans l'exemple précédent, le préfixe mx dans la balise <mx:Button> est un espace de nom. Il est déclaré à l'aide d'une URL unique dans la balise Application. Le préfixe mx met en correspondance chacun des composants de l'espace de nom mx avec le nom de classe approprié. C'est ainsi que le compilateur Flex peut trouver les classes ActionScript qui correspondent aux balises MXML dans l'espace de nom mx .

L'exemple ci-après montre comment créer un contrôle Button en utilisant ActionScript. Le résultat est identique à la version MXML.

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

Lorsque vous créez un composant Flex par le biais d'ActionScript, vous devez importer la classe du composant. Vous devez également ajouter le composant à la liste DisplayList de votre application en utilisant la méthode addChild() pour le rendre visible. La comparaison avec la version MXML est édifiante : la longueur et la complexité de ce dernier exemple parlent d'elles-mêmes. La syntaxe déclarative simple du langage MXML, basée sur des balises, évite d'avoir à écrire de nombreuses lignes de code ActionScript pour agencer les composants.

Cet exemple produit le fichier SWF suivant :

Remarque : Cet exemple montre l'utilisation d'ActionScript en ligne avec la balise Script . Il existe d'autres méthodes pour inclure ActionScript dans votre application Flex. Vous pouvez ainsi séparer des blocs de script dans des fichiers ActionScript externes ou utiliser des classes ActionScript externes.

Retour au début

---

Pour plus d'informations

Pour plus d'informations sur MXML et ActionScript, reportez-vous aux sections "Developing applications in MXML", "MXML Syntax" et "Using ActionScript" du document Flex 2 Developer's Guide*.

À propos de l'auteur