Exempel: Skapa ett basprogram

Så här skapar du projektet HelloWorld och klassen Greeter i Flex:

1. Välj File > New > Flex Project i Flash Builder.

2. Skriv HelloWorld som projektnamn. Kontrollera att Application type är inställt på ”Web (runs in Adobe Flash Player)” och klicka sedan på Finish.

   Projektet skapas i Flash Builder och visas i Package Explorer. Projektet innehåller som standard redan en fil med namnet HelloWorld.mxml, och den filen öppnas i redigeraren.

3. Skapa nu en egen ActionScript-klassfil i Flash Builder genom att välja Arkiv> Ny > ActionScript-klass.

4. I dialogrutan Ny ActionScript-klass skriver du Greeter som klassnamn i fältet Namn. Klicka sedan på Slutför.

   Ett nytt redigeringsfönster visas.

   Fortsätt med Lägga till koder i klassen Greeter.

Så här skapar du klassen Greeter i Flash Professional:

1. Välj Arkiv > Nytt i Flash Professional.

2. I dialogrutan Nytt dokument väljer du ActionScript-fil och klickar på OK.

   Ett nytt redigeringsfönster visas.

3. Välj Arkiv > Spara. Välj en mapp som ska innehålla programmet, ge ActionScript-filen namnet Greeter.as och klicka på OK.

   Fortsätt med Lägga till koder i klassen Greeter.

Så här lägger du till kod i klassen Greeter:

1. Skriv den här koden i den nya filen (viss kod kan ha lagts till):

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

   Klassen Greeter innehåller en enda sayHello() -metod, som returnerar strängen ”Hello World!”.

2. Välj Arkiv > Spara och spara ActionScript-filen.

Klassen Greeter är nu färdig att användas i ett program.

Så här skapar du ett ActionScript-program med Flash Professional:

1. Välj Arkiv > Nytt.

2. I dialogrutan Nytt dokument väljer du Flash-fil (ActionScript 3.0) och klickar på OK.

   Ett nytt dokumentfönster visas.

3. Välj Arkiv > Spara. Välj samma mapp som innehåller klassfilen Greeter.as, ge Flash-dokumentet namnet HelloWorld.fla och klicka på OK.

4. Välj textverktyget i verktygspaletten i Flash Professional. Dra över scenen för att definiera ett nytt textfält, ungefär 300 pixlar brett och 100 pixlar högt.

5. Gå till egenskapspanelen när textfältet fortfarande är markerat på scenen, ställ in texttypen på ”Dynamisk text” och skriv mainText som instansnamn för textfältet.

6. Klicka på den första bildrutan i huvudtidslinjen. Öppna panelen Åtgärder genom att välja Fönster > Åtgärder.

7. Skriv följande skript i åtgärdspanelen:

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

8. Spara filen.

Fortsätt med Publicera och testa ActionScript-programmet.

Så här skapar du ett ActionScript-program med Flash Builder:

1. Öppna filen HelloWorld.mxml och lägg till kod enligt följande:

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

   Det här Flex-projektet innehåller fyra MXML-taggar:

   • En <s:Application> -tagg som definierar Application-behållaren

   • En <s:layout> -tagg, som definierar layouten (vertikal layout) för Application-taggen

   • En <fx:Script> -tagg som innehåller ActionScript-kod

   • En <s:TextArea> -tagg som definierar ett fält som visar textmeddelanden för användaren

   Koden i <fx:Script> -taggen definierar en initApp() -metod som anropas när programmet läses in. Metoden initApp() ställer in textvärdet för textområdet mainTxt till strängen ”Hello World!” som returneras av metoden sayHello() för den egna klassen Greeter, som du precis har skrivit.

2. Välj Arkiv > Spara för att spara programmet.

Fortsätt med Publicera och testa ActionScript-programmet.

Så här publicerar du och testar ett ActionScript-program med Flash Professional:

1. Publicera programmet och se upp för kompileringsfel. Välj Kontroll > Testa filmen i Flash Professional för att kompilera ActionScript-koden och köra programmet.

2. Om det visas några fel eller varningar i utdatafönstret när du testar programmet korrigerar du felen i HelloWorld.fla- eller HelloWorld.as-filerna. Sedan testar du programmet igen.

3. Om det nu inte blir några kompileringsfel visas ett Flash Player-fönster med programmet Hello World.

Du har skapat ett enkelt men fullständigt objektorienterat program som använder ActionScript 3.0. Fortsätt med Förbättra programmet HelloWorld.

Så här publicerar du och testar ett ActionScript-program med Flash Builder:

1. Välj Kör > Kör HelloWorld.

2. Programmet HelloWorld startar.

   • Om det visas några fel eller varningar i utdatafönstret när du testar programmet korrigerar du felen i HelloWorld.mxml- eller Greeter.as-filerna. Sedan testar du programmet igen.

   • Om det inte finns några kompileringsfel öppnas ett webbläsarfönster där programmet Hello World visas. Texten ”Hello World!” visas.

   Du har skapat ett enkelt men fullständigt objektorienterat program som använder ActionScript 3.0. Fortsätt med Förbättra programmet HelloWorld.

Så här uppdaterar du filen Greeter.as:

1. Öppna filen Greeter.as.

2. Ändra så att innehållet i filen blir följande (nya och ändrade rader visas med fetstil):

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

Klassen Greeter har nu fått ett antal nya funktioner:

• I arrayen validNames visas giltiga användarnamn. Arrayen initieras till en lista med tre namn när klassen Greeter läses in.

• Metoden sayHello() godkänner nu ett användarnamn och ändrar hälsningen baserat på vissa villkor. Om userName är en tom sträng ( "" ) ställs egenskapen greeting in på att uppmana användaren att ange ett namn. Om användarnamnet är giltigt blir hälsningen "Hello, userName ". Om något av villkoren inte möts ställs variabeln greeting in på "Sorry userName , you are not on the list."

• Metoden validName() returnerar true om inputName finns i arrayen validNames och false om det inte finns. Programsatsen validNames.indexOf(inputName) kontrollerar alla strängar i arrayen validNames mot strängen inputName . Metoden Array.indexOf() returnerar indexpositionen för den första instansen av ett objekt i en array. Om objektet inte hittas i arrayen returneras värdet -1.

Därefter redigerar du den programfil som refererar till den här ActionScript-klassen.

Så här ändrar du programmet med Flash Professional:

1. Öppna filen HelloWorld.fla.

2. Ändra skriptet i bildruta 1 så att en tom sträng ( "" ) skickas till metoden sayHello() för klassen Greeter:

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

3. Välj textverktyget i verktygspaletten. Skapa två nya textfält på scenen. Placera dem bredvid varandra direkt under det befintliga textfältet mainText .

4. I det första nya textfältet, som är etiketten, skriver du texten User Name: .

5. Markera det andra nya textfältet och välj Inmatningstext som textfältstyp i egenskapsinspektören. Välj Enkelrad som radtyp. Skriv textIn som förekomstnamn.

6. Klicka på den första bildrutan i huvudtidslinjen.

7. I åtgärdspanelen lägger du till följande rader i slutet av det befintliga skriptet:

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

   Med den nya koden infogas följande funktion:

   • De första två raderna definierar kanterna för de två textfälten.

   • Ett inmatningstextfält, som fältet textIn , har en serie händelser som det kan skicka. Med metoden addEventListener() kan du definiera en funktion som körs när en typ av händelse inträffar. I det här fallet är denna händelse att någon trycker på en tangent på tangentbordet.

   • Den egna funktionen keyPressed() kontrollerar om tangenten som tryckte var Retur-tangenten. Om så är fallet anropas metoden sayHello() för objektet myGreeter och texten skickas från textfältet textIn som en parameter. Den här metoden returnerar en stränghälsning baserat på det värde som skickats. Den returnerade strängen kopplas därefter till egenskapen text för textfältet mainText .

   Det fullständiga skriptet för bildruta 1 blir:

   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. Spara filen.

9. Välj Kontroll > Testa filmen för att köra programmet.

   När programmet körs uppmanas du att ange ett användarnamn. Om det är giltigt (Sammy, Frank eller Dean) visas meddelandet ”hello”.

Så här ändrar du programmet med Flash Builder:

1. Öppna filen HelloWorld.mxml.

2. Sedan ändrar du taggen <mx:TextArea> för att tala om för användaren att den bara är för visning. Ändra bakgrundsfärgen till en ljusgrå nyans och ställ in attributet editable på false :

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

3. Lägg nu till följande rader efter den avslutande <s:TextArea> -taggen. Dessa rader skapar en TextInput-komponent, där användaren kan ange ett användarnamn:

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

   Attributet enter definierar vad som händer när användaren trycker på returtangenten i fältet userNameTxt . I det här exemplet skickar koden texten i fältet till metoden Greeter.sayHello() . Hälsningen i fältet mainTxt ändras på motsvarande sätt.

   Filen HelloWorld.mxml ser ut så här:

   <?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. Spara den redigerade HelloWorld.mxml-filen. Välj Kör > Kör HelloWorld för att köra programmet.

   När programmet körs uppmanas du att ange ett användarnamn. Om det är giltigt (Sammy, Frank eller Dean) visas bekräftelsemeddelandet ” Hello, userName ”.