Voorbeeld: een basistoepassing maken

Zo maakt u het HelloWorld-project en de klasse Greeter in Flex:

1. Selecteer in Flash Builder Bestand > Nieuw> Flex-project

2. Voer HelloWorld in als projectnaam. Controleer of het toepassingstype is ingesteld op 'Web (in Adobe Flash Player),' en klik op Voltooien.

   Flash Builder maakt uw project en geeft het weer in Package Explorer. Standaard bevat het project al een bestand met de naam HelloWorld.mxml en dat bestand is geopend in het deelvenster Editor.

3. Maak nu een aangepast ActionScript-klassenbestand door in Flash Builder Bestand > Nieuw > ActionScript-klasse·te selecteren.

4. Ga in het dialoogvenster Nieuwe ActionScript-klasse naar het veld Naam en typ Greeter als naam voor de klasse en klik op Voltooien.

   Er wordt een nieuw ActionScript-bewerkingsvenster weergegeven.

   Ga nu verder met het toevoegen van code aan de klasse Greeter.

Een Greeter-klasse maken in Flash Professional:

1. In Flash Professional, selecteert u Bestand > Nieuw.

2. Selecteer ActionScript-bestand in het dialoogvenster Nieuw document en klik op OK.

   Er wordt een nieuw ActionScript-bewerkingsvenster weergegeven.

3. Selecteer Bestand > Opslaan. Selecteer een map waarin de toepassing wordt opgeslagen, geef het ActionScript-bestand de naam Greeter.as en klik vervolgens op OK.

   Ga nu verder naar code toevoegen aan de klasse Greeter.

U kunt als volgt code toevoegen aan de klasse Greeter:

1. Typ de volgende code in het nieuwe bestand (het kan zijn dat sommige code al automatisch is toegevoegd):

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

   De klasse Greeter bevat één methode sayHello() , die een tekenreeks retourneert met als tekst 'Hello World!'.

2. Selecteer Bestand > Opslaan om dit ActionScript-bestand op te slaan.

De klasse Greeter kan nu in een toepassing worden gebruikt.

U kunt als volgt met Flex Professional een ActionScript-toepassing maken:

1. Selecteer Bestand > Nieuw.

2. Selecteer in het dialoogvenster Nieuw document het type Flash-bestand (ActionScript 3.0) en klik op OK.

   Er wordt een nieuw documentvenster weergegeven.

3. Selecteer Bestand > Opslaan. Selecteer dezelfde map die het klassenbestand Greeter.as bevat, geef het Flash-document de naam HelloWorld.fla en klik op OK.

4. In het gereedschapspalet van Flash Professional, selecteert u het gereedschap Tekst. Sleep het over het werkgebied om een nieuw tekstveld te definiëren van ongeveer 300 pixels breed en 100 pixels hoog.

5. Zorg ervoor dat in het deelvenster Eigenschappen het tekstveld in het werkgebied is geselecteerd, stel het teksttype in op Dynamische tekst en typ mainText als instantienaam van het tekstveld.

6. Klik op het eerste frame in de hoofdtijdlijn. Open het deelvenster Acties door Venster > Acties te selecteren.

7. Typ het volgende script in het deelvenster Handelingen:

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

8. Sla het bestand op.

Ga verder naar Uw ActionScript-toepassing publiceren en testen.

U kunt als volgt met Flash Builder een ActionScript-toepassing maken:

1. Open het bestand HelloWorld.mxml en voeg code toe die overeenkomt met wat hieronder wordt weergegeven:

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

   Dit Flex-project bevat vier MXML-tags:

   • Een tag <s:Application> , waarin de container Application wordt gedefinieerd

   • Een tag <s:layout> , waarin de lay-outstijl wordt (verticale lay-out) voor de tag Application wordt gedefinieerd

   • Een tag <fx:Script> met daarin ActionScript-code

   • Een tag <s:TextArea> , waarin een veld wordt gedefinieerd voor het weergeven van berichten van de gebruiker

   De code in de tag <fx:Script> definieert een methode initApp() die wordt aangeroepen wanneer de toepassing wordt geladen. De methode initApp() stelt de tekstwaarde van het tekstgebied mainTxt in op de tekenreeks 'Hello World!' die wordt geretourneerd door de methode sayHello() van de aangepaste klasse Greeter, die u net hebt gemaakt.

2. Selecteer Bestand > Opslaan om de toepassing op te slaan.

Ga verder naar Uw ActionScript-toepassing publiceren en testen.

Zo publiceert en test u een ActionScript-toepassing met Flash Professional:

1. Publiceer de toepassing en controleer of er compilatiefouten optreden. Selecteer Besturing > Film testen in Flash professional om de ActionScript-code te compileren en de toepassing HelloWorld uit te voeren.

2. Als er in het venster Uitvoer fouten of waarschuwingen worden weergegeven tijdens het testen van uw toepassing, repareert u deze fouten in de bestanden HelloWorld.fla of HelloWorld.as. Test de toepassing opnieuw.

3. Wanneer geen compilatiefouten optreden, wordt in een Flash Player-venster de toepassing HelloWorld weergegeven.

U hebt een eenvoudige maar volledige objectgeoriënteerde toepassing met ActionScript 3.0 gemaakt. Ga verder naar De toepassing HelloWorld uitbreiden.

Zo publiceert en test u een ActionScript-toepassing met Flash Builder:

1. Selecteer Uitvoeren > HelloWorld uitvoeren.

2. De toepassing HelloWorld wordt gestart.

   • Als er in het venster Uitvoer fouten of waarschuwingen worden weergegeven tijdens het testen van uw toepassing, repareert u deze fouten in de bestanden HelloWorld.mxml of Greeter.as. Test de toepassing opnieuw.

   • Wanneer geen compilatiefouten optreden, wordt een browservenster geopend met daarin de toepassing HelloWorld. Als het goed is, wordt de tekst 'Hello World!' weergegeven.

   U hebt een eenvoudige maar volledige objectgeoriënteerde toepassing met ActionScript 3.0 gemaakt. Ga verder naar De toepassing HelloWorld uitbreiden.

U kunt als volgt het bestand Greeter.as bijwerken:

1. Open het bestand Greeter.as.

2. Wijzig de inhoud van het bestand in het volgende (nieuwe en gewijzigde regels worden vet weergegeven):

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

De klasse Greeter bevat nu de volgende nieuwe functies:

• De array validNames bevat een lijst met geldige gebruikersnamen. Wanneer de klasse Greeter wordt geladen, wordt de array geïnitialiseerd als een lijst met drie namen.

• De methode sayHello() gebruikt nu bepaalde voorwaarden om een gebruikersnaam te accepteren en de begroeting te wijzigen. Wanneer userName een lege tekenreeks is ( "" ), wordt de eigenschap greeting zo ingesteld dat de gebruiker wordt gevraagd een naam op te geven. Wanneer de gebruikernaam geldig is, wordt de begroeting 'Hello, userName '. Wanneer niet aan een van bovenstaande voorwaarden wordt voldaan, wordt de variabele greeting ingesteld op 'Sorry, userName , you are not on the list.'

• De methode validName() retourneert true wanneer inputName wordt gevonden in de array validNames en false wanneer deze niet wordt gevonden. De instructie validNames.indexOf(inputName) vergelijkt elke tekenreeks in de array validNames met de tekenreeks inputName . De Array.indexOf() -methode geeft de indexpositie van de eerste instantie weer van een object in een array. Het geeft de waarde -1 weer als het object niet wordt gevonden in de array.

Vervolgens bewerkt u het toepassingsbestand waarin wordt verwezen naar deze ActionScript-klasse.

De toepassing aanpassen met Flash Professional:

1. Open het bestand HelloWorld.fla.

2. Wijzig het script in frame 1 als volgt, zodat een lege tekenreeks ( "" ) wordt doorgegeven aan de methode sayHello() van de klasse Greeter:

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

3. Selecteer het gereedschap Tekst in het gereedschapspalet. Maak twee nieuwe tekstvelden in het werkgebied. Plaats deze naast elkaar direct onder het bestaande tekstveld mainText .

4. In het eerste nieuwe tekstveld, dit is het label, vult u de tekst Gebruikernaam: in.

5. Selecteer het andere nieuwe tekstveld en selecteer Input Text in Eigenschapcontrole als het type tekstveld. Selecteer Enkele regel als regeltype. Typ textIn als instantienaam.

6. Klik op het eerste frame in de hoofdtijdlijn.

7. Voeg in het deelvenster Handelingen de volgende regels toe aan het einde van het bestaande script:

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

   De nieuwe code voegt de volgende functionaliteit toe:

   • De eerste twee regels definiëren eenvoudig randen voor twee tekstvelden.

   • Een invoertekstveld zoals het veld textIn heeft een set gebeurtenissen die het kan verzenden. Met de methode addEventListener() kunt u een functie definiëren die wordt uitgevoerd wanneer een bepaald type gebeurtenis plaatsvindt. In dit geval is die gebeurtenis het drukken op een toets op het toetsenbord.

   • De aangepaste functie keyPressed() controleert of de ingedrukte toets de Enter-toets is. Als dat het geval is, wordt de methode sayHello() van het object myGreeter aangeroepen, waarbij de tekst uit het tekstveld textIn als parameter wordt doorgegeven. Deze methode retourneert een tekenreeks (de begroeting), op basis van de doorgegeven waarde. De geretourneerde tekenreeks wordt vervolgens toegewezen aan de eigenschap text van het tekstveld mainText .

   Het volledige script voor frame 1 ziet er als volgt uit:

   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. Sla het bestand op.

9. Selecteer Besturing > Film testen om de toepassing uit te voeren.

   Wanneer u de toepassing uitvoert, wordt u nu gevraagd om een gebruikernaam in te voeren. Als deze geldig is (Sammy, Frank of Dean), geeft de toepassing het bevestigingsbericht ‘hello’ weer.

De toepassing aanpassen met Flash Builder:

1. Open het bestand HelloWorld.mxml.

2. Pas vervolgens de <mx:TextArea> -tag aan om aan de gebruiker aan te geven dat dit alleen voor weergave is bedoeld. Wijzig de achtergrondkleur in lichtgrijs en stel het attribuut editable in op false :

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

3. Voeg nu de volgende regels toe achter de afsluitingstag <s:TextArea> . Met deze regels maakt u een TextInput-component waarin de gebruiker een gebruikernaam kan invoeren:

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

   Het attribuut enter bepaalt wat er gebeurt wanneer de gebruiker op de toets Enter drukt in het veld userNameTxt . In dit voorbeeld, stuurt de code de tekst in het veld naar de methode Greeter.sayHello() . De greeting in het veld mainTxt wordt gewijzigd.

   Het HelloWorld.mxml-bestand ziet er als volgt uit:

   <?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. Sla het gewijzigde bestand HelloWorld.mxml op. Selecteer Uitvoeren > HelloWorld uitvoeren om de toepassing uit te voeren.

   Wanneer u de toepassing uitvoert, wordt u nu gevraagd om een gebruikernaam in te voeren. Als deze geldig is (Sammy, Frank of Dean), geeft de toepassing het bevestigingsbericht ‘ Hello, userName ’ weer.