Pour créer le projet HelloWorld et la classe Greeter dans Flex :

1. Dans Flash Builder, sélectionnez File > New > Flex Project.

2. Attribuez le nom Hello World au projet. Vérifiez que le type d’application correspond à « Web (runs in Adobe Flash Player) », puis cliquez sur Finish.

   Flash Builder crée le projet et l’affiche dans l’Explorateur de packages. Par défaut, le projet contient un fichier nommé HelloWorld.mxml, qui est ouvert dans l’éditeur.

3. Pour créer un fichier de classe ActionScript personnalisé dans Flash Builder, sélectionnez File > New > ActionScript Class.

4. Dans le champ Name de la boîte de dialogue New ActionScript Class, saisissez le nom de classe Greeter, puis cliquez sur Finish.

   Une nouvelle fenêtre de modification ActionScript s’affiche.

   Passez maintenant à la section Ajout de code à la classe Greeter.

Pour créer la classe Greeter dans Flash Professional :

1. Dans Flash Professional, sélectionnez Fichier > Nouveau.

2. Dans la boîte de dialogue Nouveau document, sélectionnez un fichier ActionScript et cliquez sur OK.

   Une nouvelle fenêtre de modification ActionScript s’affiche.

3. Choisissez Fichier > Enregistrer. Sélectionnez un dossier pour votre application, nommez le fichier ActionScript Greeter.as, puis cliquez sur OK.

   Passez maintenant à la section Ajout de code à la classe Greeter.

Pour ajouter du code à la classe Greeter :

1. Saisissez le code suivant (susceptible d’avoir été partiellement entré à votre intention) dans le nouveau fichier :

   package 
   { 
       public class Greeter 
       { 
           public function sayHello():String 
           { 
               var greeting:String; 
               greeting = "Hello World!"; 
               return greeting; 
           } 
       } 
   }

   La classe Greeter comporte une méthode unique, sayHello(), qui renvoie la chaîne « Hello World! ».

2. Sélectionnez Fichier > Enregistrer pour enregistrer ce fichier ActionScript.

La classe Greeter peut maintenant être utilisée dans une application.

Pour créer une application ActionScript à l’aide de Flash Professional :

1. Choisissez Fichier > Nouveau.

2. Dans la boîte de dialogue document, sélectionnez Fichier Flash (ActionScript 3.0) et cliquez sur OK.

   Une nouvelle fenêtre de document s’affiche.

3. Choisissez Fichier > Enregistrer. Sélectionnez le même dossier qui contient le fichier de classe Greeter.as, nommez le document Flash HelloWorld.fla, puis cliquez sur OK.

4. Dans la palette des outils de Flash Professional, sélectionnez l’outil Texte et faites-le glisser sur la scène pour définir un nouveau champ de texte d’environ 300 pixels de largeur et 100 pixels de hauteur.

5. Le champ de texte étant sélectionné sur la scène, dans le panneau Propriétés, définissez le type de texte sur « Texte dynamique » et tapez mainText comme nom d’occurrence du champ de texte.

6. Cliquez sur la première image du scénario principal. Sélectionnez Fenêtre > Actions pour ouvrir le panneau Actions.

7. Dans le panneau Actions, tapez le script suivant :

   var myGreeter:Greeter = new Greeter(); 
   mainText.text = myGreeter.sayHello();

8. Enregistrez le fichier.

Passez maintenant à la section Publication et test de votre application ActionScript.

Pour créer une application ActionScript à l’aide de Flash Builder :

1. Ouvrez le fichier HelloWorld.mxml et ajoutez le code illustré ci-dessous :

   <?xml version="1.0" encoding="utf-8"?> 
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/halo" 
       minWidth="1024" 
       minHeight="768"" 
       creationComplete="initApp()"> 
        
       <fx:Script> 
           <![CDATA[ 
               private var myGreeter:Greeter = new Greeter(); 
                
               public function initApp():void 
               { 
                   // says hello at the start, and asks for the user's name 
                   mainTxt.text = myGreeter.sayHello(); 
               } 
           ]]> 
       </fx:Script> 
        
       <s:layout> 
           <s:VerticalLayout/> 
       </s:layout> 
        
       <s:TextArea id="mainTxt" width="400"/>         
        
   </s:Application>

   Le projet Flex comprend quatre balises MXML :

   • Une balise <s:Application>, qui définit le conteneur Application

   • Une balise <s:layout>, qui définit le style de formatage (formatage vertical) de la balise Application

   • Une balise <fx:Script>, qui contient du code ActionScript

   • Une balise <s:TextArea>, qui définit un champ d’affichage des messages texte destinés à l’utilisateur

   Le code qui figure dans la balise <fx:Script> définit une méthode initApp() qui est appelée au chargement de l’application. La méthode initApp() définit la valeur du texte de mainTxt TextArea sur la chaîne « Hello World! » renvoyée par la méthode sayHello() de la classe personnalisée Greeter, que vous venez de créer.

2. Sélectionnez Fichier > Enregistrer pour enregistrer le fichier.

Passez maintenant à la section Publication et test de votre application ActionScript.

Pour publier et tester une application ActionScript à l’aide de Flash Professional :

1. Publiez l’application et recherchez les erreurs de compilation. Dans Flash Professional, sélectionnez Contrôle > Tester l’animation pour compiler le code ActionScript et exécuter l’application HelloWorld.

2. Si des erreurs ou des avertissements s’affichent dans la fenêtre Sortie lorsque vous testez l’ application, résolvez-les dans les fichiers HelloWorld.fla ou HelloWorld.as, puis réessayez de tester l’application.

3. S’il n’existe aucune erreur de compilation, une fenêtre Flash Player affiche l’application HelloWorld.

Vous avez créé une application orientée objet, simple mais complète, qui utilise ActionScript 3.0. Passez maintenant à la section Amélioration de l’application HelloWorld.

Pour publier et tester une application ActionScript à l’aide de Flash Builder :

1. Sélectionnez Run > Run HelloWorld.

2. L’application HelloWorld démarre.

   • Si des erreurs ou des avertissements s’affichent dans la fenêtre de sortie lorsque vous testez l’ application, résolvez-les dans les fichiers HelloWorld.mxml ou Greeter.as, puis réessayez de tester l’application.

   • En l’absence d’erreurs de compilation, une fenêtre de navigateur contenant l’application HelloWorld apparaît. Elle devrait afficher le texte “Hello World!”

   Vous avez créé une application orientée objet, simple mais complète, qui utilise ActionScript 3.0. Passez maintenant à la section Amélioration de l’application HelloWorld.

Pour mettre à jour le fichier Greeter.as :

1. Ouvrez le fichier Greeter.as.

2. Remplacez son contenu par le suivant (les lignes nouvelles et modifiées sont signalées en gras) :

   package 
   { 
       public class Greeter 
       { 
           /** 
            * Defines the names that receive a proper greeting. 
            */ 
           public static var validNames:Array = ["Sammy", "Frank", "Dean"]; 
    
           /** 
            * Builds a greeting string using the given name. 
            */ 
           public function sayHello(userName:String = ""):String 
           { 
               var greeting:String; 
               if (userName == "")  
               { 
                   greeting = "Hello. Please type your user name, and then press " 
                               + "the Enter key."; 
               }  
               else if (validName(userName))  
               { 
                   greeting = "Hello, " + userName + "."; 
               }  
               else  
               { 
                   greeting = "Sorry " + userName + ", you are not on the list."; 
               } 
               return greeting; 
           } 
            
           /** 
            * Checks whether a name is in the validNames list. 
            */ 
           public static function validName(inputName:String = ""):Boolean  
           { 
               if (validNames.indexOf(inputName) > -1)  
               { 
                   return true; 
               }  
               else  
               { 
                   return false; 
               } 
           } 
       } 
   }

La classe Greeter présente maintenant plusieurs fonctions nouvelles :

• Le tableau validNames répertorie les noms d’utilisateur valables. Lors du chargement de la classe Greeter, ce tableau contient trois noms.

• La méthode sayHello() accepte désormais un nom d’utilisateur et modifie la salutation en fonction de certaines conditions. Si le nom d’utilisateur userName est une chaîne vide (""), la propriété greeting permet de demander le nom de l’utilisateur. Si le nom d’utilisateur est valable, la salutation devient "Hello, userName". Enfin, si l’une de ces deux conditions n’est pas satisfaite, la variable greeting renvoie la valeur "Sorry, userName, you are not on the list." (Désolé, nom d’utilisateur, vous n’êtes pas sur la liste).

• La méthode validName() renvoie la valeur true si le nom entré inputName figure dans le tableau validNames, et la valeur false s’il ne s’y trouve pas. L’instruction validNames.indexOf(inputName) compare toutes les chaînes du tableau validNames à la chaîne inputName. La méthode Array.indexOf() renvoie la position d’index de la première occurrence d’un objet dans un tableau ou la valeur -1 si l’objet ne s’y trouve pas.

Ensuite, vous devez modifier le fichier d’application qui référence cette classe ActionScript.

Pour modifier l’application à l’aide de Flash Professional :

1. Ouvrez le fichier HelloWorld.fla.

2. Modifiez le script dans l’image 1 de façon à ce qu’une chaîne vide ("") soit transmise à la méthode sayHello() de la classe Greeter :

   var myGreeter:Greeter = new Greeter(); 
   mainText.text = myGreeter.sayHello("");

3. Sélectionnez l’outil Texte dans la palette des outils, puis créez deux champs de texte sur la scène, l’un à côté de l’autre, et directement sous le champ de texte mainText existant.

4. Dans le premier nouveau champ de texte, tapez le texte User Name: qui servira d’étiquette.

5. Sélectionnez l’autre nouveau champ de texte et, dans l’Inspecteur des propriétés, sélectionnez Saisie de texte comme type de champ de texte. Sélectionnez le type de ligne Une seule ligne. Tapez textIn comme nom d’occurrence.

6. Cliquez sur la première image du scénario principal.

7. Dans le panneau Actions, ajoutez les lignes suivantes à la fin du script existant :

   mainText.border = true; 
   textIn.border = true; 
    
   textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); 
    
   function keyPressed(event:KeyboardEvent):void 
   { 
       if (event.keyCode == Keyboard.ENTER) 
       { 
           mainText.text = myGreeter.sayHello(textIn.text); 
       } 
   }

   Le nouveau code ajoute la fonctionnalité suivante :

   • Les deux premières lignes définissent les bordures de deux champs de texte.

   • Un champ de texte d’entrée tel que le champ textIn a un ensemble d’événements qu’il peut envoyer. La méthode addEventListener() vous permet de définir une fonction exécutée lorsqu’un type d’événement se produit. Dans ce cas, cet événement est le fait d’appuyer sur une touche du clavier.

   • La fonction personnalisée keyPressed() vérifie si la touche actionnée est la touche Entrée. Si tel est le cas, elle appelle la méthode sayHello() de l’objet myGreeter, en transmettant le texte du champ de texte textIn comme paramètre. Cette méthode renvoie une chaîne greeting en fonction de la valeur transmise. La chaîne renvoyée est ensuite affectée à la propriété text du champ de texte mainText.

   Le script complet pour l’image 1 est le suivant :

   var myGreeter:Greeter = new Greeter(); 
   mainText.text = myGreeter.sayHello(""); 
    
   mainText.border = true; 
   textIn.border = true; 
    
   textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); 
    
   function keyPressed(event:KeyboardEvent):void 
   { 
       if (event.keyCode == Keyboard.ENTER) 
       { 
           mainText.text = myGreeter.sayHello(textIn.text); 
       } 
   }

8. Enregistrez le fichier.

9. Choisissez Contrôle > Tester l’animation pour exécuter l’application.

   Lorsque vous exécutez l’application, il vous est demandé d’entrer un nom d’utilisateur. S’il est valide (Sammy, Frank, ou Dean), l’application affiche le message de confirmation « hello ».

Pour modifier l’application à l’aide de Flash Builder :

1. Ouvrez le fichier HelloWorld.mxml.

2. Modifiez ensuite la balise <mx:TextArea> pour indiquer à l’utilisateur qu’elle est utilisée à des fins d’affichage uniquement. Choisissez un arrière-plan gris clair et définissez l’attribut editablesur false :

       <s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false" />

3. Ajoutez à présent les lignes suivantes juste après la balise de fin de <s:TextArea>. Ces lignes créent un composant TextInput qui permet à l’utilisateur de saisir un nom d’utilisateur :

       <s:HGroup width="400"> 
           <mx:Label text="User Name:"/>     
           <s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" /> 
       </s:HGroup>

   L’attribut enter définit l’action exécutée lorsque l’utilisateur appuie sur la touche Entrée dans le champ userNameTxt. Dans cet exemple, le code transmet le texte du champ à la méthode Greeter.sayHello(). Le contenu du champ mainTxt est modifié en conséquence.

   Le fichier HelloWorld.mxml se présente comme suit :

   <?xml version="1.0" encoding="utf-8"?> 
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/halo" 
       minWidth="1024" 
       minHeight="768"" 
       creationComplete="initApp()"> 
        
       <fx:Script> 
           <![CDATA[ 
               private var myGreeter:Greeter = new Greeter(); 
                
               public function initApp():void 
               { 
                   // says hello at the start, and asks for the user's name 
                   mainTxt.text = myGreeter.sayHello(); 
               } 
           ]]> 
       </fx:Script> 
        
       <s:layout> 
           <s:VerticalLayout/> 
       </s:layout> 
        
       <s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false"/>     
    
       <s:HGroup width="400">     
           <mx:Label text="User Name:"/>     
           <s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" /> 
       </s:HGroup> 
        
   </s:Application>

4. Enregistrez le fichier HelloWorld.mxml modifié. Sélectionnez Run > Run HelloWorld pour exécuter l’application.

   Lorsque vous exécutez l’application, il vous est demandé d’entrer un nom d’utilisateur. S’il est valide (Sammy, Frank, ou Dean), l’application affiche le message de confirmation « Hello, userName ».