Per creare il progetto HelloWorld e la classe Greeter in Flex:

1. In Flash Builder, selezionate File > New (Nuovo) > Flex Project (Progetto Flex).

2. Digitate HelloWorld come nome del progetto. Verificate che il tipo di applicazione sia impostato su “Web (runs in Adobe Flash Player)”, quindi fate clic su Finish (Fine).

   Flash Builder crea il progetto e lo visualizza in Package Explorer. Per impostazione predefinita, il progetto contiene già un file denominato HelloWorld.mxml aperto nell'editor.

3. Create un file di classe ActionScript personalizzato in Flash Builder selezionando File > New (Nuovo) > ActionScript Class (Classe ActionScript).

4. Nel campo Name (Nome) della finestra di dialogo New ActionScript Class (Nuova classe ActionScript), digitate Greeter come nome della classe e fate clic su Finish (Fine).

   Viene visualizzata una nuova finestra di modifica ActionScript.

   Continuate con Aggiunta di codice alla classe Greeter

Per creare la classe Greeter in Flash Professional:

1. In Flash Professional, selezionate File > Nuovo.

2. Nella finestra di dialogo Nuovo documento, selezionate File ActionScript e fate clic su OK.

   Viene visualizzata una nuova finestra di modifica ActionScript.

3. Selezionate File > Salva. Selezionate una cartella di destinazione per l'applicazione, chiamate il file Greeter.as e fate clic su OK.

   Continuate con Aggiunta di codice alla classe Greeter.

Per aggiungere codice alla classe Greeter:

1. Digitate il codice seguente nel nuovo file (parte di questo codice potrebbe essere stato aggiunto per voi):

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

   La classe Greeter include un metodo sayHello() singolo, che restituisce una stringa di testo “Hello World!”.

2. Selezionate File > Save (Salva) per salvare il file ActionScript.

La classe Greeter è pronta per essere utilizzata nell'applicazione.

Per creare un'applicazione ActionScript mediante Flash Professional:

1. Selezionate File > Nuovo.

2. Nella finestra di dialogo Nuovo documento, selezionate File Flash (ActionScript 3.0) e fate clic su OK.

   Viene visualizzata una nuova finestra del documento.

3. Selezionate File > Salva. Selezionate la stessa cartella in cui si trova il file di classe Greeter.as, denominate il file HelloWorld.fla e fate clic su OK.

4. Nel pannello Strumenti di Flash Professional, selezionate lo strumento Testo. Trascinate il puntatore sullo stage in modo da definire un nuovo campo di testo largo circa 300 pixel e alto circa 100 pixel.

5. Nel pannello Proprietà, con il campo di testo ancora selezionato sullo stage, impostate il tipo di testo su “Testo dinamico”. Digitate mainText come nome di istanza del campo di testo.

6. Fate clic sul primo fotogramma della linea temporale. Aprite il pannello Azioni scegliendo Finestra > Azioni.

7. Nel pannello Azioni, digitate il seguente script:

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

8. Salvate il file.

Continuate con Pubblicazione e prova dell'applicazione ActionScript.

Per creare un'applicazione ActionScript utilizzando Flash Builder:

1. Aprite il file HelloWorld.mxml e aggiungete il codice per la corrispondenza con il listato seguente:

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

   Il progetto Flex include quattro tag MXML:

   • Un tag <s:Application>, che definisce il contenitore dell'applicazione

   • Un tag <s:layout>, che definisce lo stile layout (layout verticale) per il tag Application

   • Un tag <fx:Script> che include codice ActionScript

   • Un tag <s:TextArea>, che definisce un campo utilizzato per visualizzare messaggi di testo per l'utente

   Il codice nel tag <fx:Script> definisce un metodo initApp() che viene chiamato nel momento in cui l'applicazione viene caricata. Il metodo initApp() imposta il valore di testo del componente TextArea mainTxt sulla stringa “Hello World!” stringa restituita dal metodo sayHello() della classe personalizzata Greeter appena creata.

2. Selezionate File > Save (Salva) per salvare l'applicazione.

Continuate con Pubblicazione e prova dell'applicazione ActionScript.

Per pubblicare e provare un'applicazione ActionScript utilizzando Flash Professional:

1. Pubblicate l'applicazione e verificate se vengono generati errori di compilazione. In Flash Professional, selezionate Controllo > Prova filmato per compilare il codice ActionScript ed eseguire l'applicazione HelloWorld.

2. Se nel pannello Output vengono visualizzati errori o avvisi durante la prova dell'applicazione, correggete gli errori nei file HelloWorld.fla o HelloWorld.as e provate nuovamente l'applicazione.

3. Se non vi sono errori di compilazione, appare una finestra di Flash Player con l'applicazione Hello World.

Avete creato un'applicazione orientata agli oggetti semplice ma completa che utilizza ActionScript 3.0. A questo punto proseguite con Perfezionamento dell'applicazione HelloWorld.

Per pubblicare e provare un'applicazione ActionScript utilizzando Flash Builder:

1. Selezionate Run (Esegui) > Run HelloWorld (Esegui HelloWorld).

2. L'applicazione HelloWorld viene avviata.

   • Se nel pannello Output vengono visualizzati errori o avvisi durante la prova dell'applicazione, correggete gli errori nei file HelloWorld.mxml or Greeter.as e provate nuovamente l'applicazione.

   • Se non si verificano errori di compilazione, viene aperta una finestra del browser contenente l'applicazione Hello World. Il testo “Hello World!” viene visualizzato.

   Avete creato un'applicazione orientata agli oggetti semplice ma completa che utilizza ActionScript 3.0. A questo punto proseguite con Perfezionamento dell'applicazione HelloWorld.

Per aggiornare il file Greeter.as:

1. Aprite il file Greeter.as.

2. Modificate il contenuto del file in base all'esempio seguente (le righe nuove o modificate sono evidenziate in grassetto):

   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; 
               } 
           } 
       } 
   }

A questo punto la classe Greeter presenta alcune nuove caratteristiche:

• L'array validNames elenca i nomi utente validi. L'array viene inizializzato su un elenco di tre nomi nel momento in cui la classe Greeter viene caricata.

• Il metodo sayHello() ora accetta un nome utente e modifica il saluto in base ad alcune condizioni. Se userName è una stringa vuota (""), la proprietà greeting viene impostata in modo da richiedere un nome all'utente. Se il nome utente è valido, il saluto diventa "Hello, nomeUtente." Infine, se nessuna di queste due condizioni è soddisfatta, la variabile greeting viene impostata su "Sorry, nomeUtente, you are not on the list."

• Il metodo validName() restituisce true se inputName viene trovato nell'elenco validNames oppure false se non viene trovato. L'istruzione validNames.indexOf(inputName) confronta ciascuna delle stringhe dell'array validNames con la stringa inputName. Il metodo Array.indexOf() restituisce la posizione di indice della prima istanza di un oggetto di un array, oppure il valore -1 se l'oggetto non viene trovato nell'array.

Quindi, modificate il file dell'applicazione che fa riferimento a questa classe ActionScript.

Per modificare l'applicazione utilizzando Flash Professional:

1. Aprite il file HelloWorld.fla.

2. Modificate lo script nel fotogramma 1 in modo che una stringa vuota ("") venga passata al metodo sayHello() della classe Greeter:

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

3. Selezionate lo strumento Testo nel pannello Strumenti. Create due nuovi campi di testo sullo stage e affiancateli direttamente sotto il campo di testo mainText esistente.

4. Nel primo nuovo campo di testo, che è l'etichetta, digitate il testo User Name:.

5. Selezionate l'altro campo di testo aggiunto e, nella finestra di ispezione Proprietà, selezionate Testo di input come tipo di campo. Selezionate Riga singola come tipo di riga. Digitate textIn come nome di istanza.

6. Fate clic sul primo fotogramma della linea temporale.

7. Nel pannello Azioni, aggiungete le seguenti righe alla fine dello script esistente:

   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); 
       } 
   }

   Il nuovo codice aggiunge la seguente funzionalità:

   • Le prime due righe definiscono semplicemente i bordi dei due campi di testo.

   • Un campo di testo di input, come textIn, può inviare una serie di eventi. Il metodo addEventListener() permette di definire una funzione che viene eseguita quando si verifica un determinato tipo di evento. In questo caso, l'evento è la pressione di un tasto della tastiera.

   • La funzione personalizzata keyPressed() controlla se il tasto premuto è il tasto Invio. In questo caso, la funzione chiama il metodo sayHello() dell'oggetto myGreeter, passando il testo del campo di testo textIn come parametro. Tale metodo restituisce la stringa greeting basata sul valore passato. La stringa restituita viene quindi assegnata alla proprietà text del campo di testo mainText.

   Lo script completo del fotogramma 1 è il seguente:

   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. Salvate il file.

9. Selezionate Controllo > Prova filmato per eseguire l'applicazione.

   Quando eseguite l'applicazione viene richiesto di immettere un nome utente. Se il nome immesso è valido (Sammy, Frank o Dean), l'applicazione visualizza il messaggio di conferma “hello”.

Per modificare l'applicazione utilizzando Flash Builder:

1. Aprite il file HelloWorld.mxml.

2. Quindi, modificate il tag <mx:TextArea> per indicare che è di sola visualizzazione. Modificate il colore di sfondo su un grigio chiaro e impostate l'attributo editable su false:

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

3. Aggiungete le righe seguenti dopo il tag di chiusura <s:TextArea>. Queste righe creano un componente TextInput che consente all'utente di immettere un valore nome utente:

       <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'attributo enter definisce cosa accade quando l'utente preme il tasto Invio nel campo userNameTxt. Il questo esempio, il codice passa il testo nel campo al metodo Greeter.sayHello(). Il saluto nel campo mainTxt cambia di conseguenza.

   Il file HelloWorld.mxml ha un aspetto simile al seguente:

   <?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. Salvate il file HelloWorld.mxml modificato. Selezionate Run (Esegui) > Run HelloWorld (Esegui HelloWorld) per eseguire l'applicazione.

   Quando eseguite l'applicazione viene richiesto di immettere un nome utente. Se il nome immesso è valido (Sammy, Frank o Dean), l'applicazione visualizza il messaggio di conferma “ Hello, userName”.