To create the HelloWorld project and Greeter class in Flex Builder:

1. In Flex Builder, select File > New> Flex Project,

2. If the New Flex Project dialog box asks you to select a Flex Server Technology, select Basic, and then click Next.

3. Type HelloWorld as the Project Name, and then click Finish.

   Your new project will be created and should be showing in the Navigator panel. By default the project should already contain a file named HelloWorld.mxml, and that file should be open in the Editor panel.

4. Now to create a custom ActionScript class file in the Flex Builder tool, select File > New > ActionScript File.

5. In the New ActionScript File dialog box, select HelloWorld as the parent folder, type Greeter.as the filename, and then click Finish.

   A new ActionScript editing window is displayed.

   Continue with Adding code to the Greeter class.

To add code to the Greeter class:

1. Type the following code into the new file:

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

   The Greeter class includes a single sayHello() method, which returns a string that says “Hello World!”.

2. Select File > Save to save this ActionScript file.

The Greeter class is now ready to be used in an application.

To create an ActionScript application using Flex Builder:

1. Open the HelloWorld.mxml file, and type the following code:

   <?xml version="1.0" encoding="utf-8"?> 
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" 
       layout="vertical" 
       creationComplete = "initApp()" > 
        
       <mx: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(); 
               } 
           ]]> 
       </mx:Script> 
    
       <mx:TextArea id = "mainTxt" width="400" />         
        
   </mx:Application>

   This Flex project includes three MXML tags:

   • An <mx:Application> tag, which defines the Application container

   • An <mx:Script> tag that includes some ActionScript code

   • An <mx:TextArea> tag, which defines a field to display text messages to the user

   The code in the <mx:Script> tag defines a initApp() method that is called when the application loads. The initApp() method sets the text value of the mainTxt TextArea to the “Hello World!” string returned by the sayHello() method of the custom class Greeter, which you just wrote.

2. Select File > Save to save the application.

Continue with Publishing and testing your ActionScript application.

To publish and test an ActionScript application using Flex Builder:

1. Select Run > Run. Make sure that the Project field shows “HelloWorld” and the Application file field shows “HelloWorld.mxml”.

2. In the Run dialog box, click Run.

   The HelloWorld application starts.

   • If any errors or warnings are displayed in the Output window when you test your application, fix the causes of these errors in the HelloWorld.mxml or Greeter.as files, and then try testing the application again.

   • If there are no compilation errors, a browser window opens showing the Hello World application. The text “Hello World!” should be displayed.

   You have just created a simple but complete object-oriented application that uses ActionScript 3.0. Continue with Enhancing the HelloWorld application.

To update the Greeter.as file:

1. Open the Greeter.as file.

2. Change the contents of the file to the following (new and changed lines are shown in boldface):

   package 
   { 
       public class Greeter 
       { 
           /** 
            * Defines the names that should 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; 
               } 
           } 
       } 
   }

The Greeter class now has a number of new features:

• The validNames array lists valid user names. The array is initialized to a list of three names when the Greeter class is loaded.

• The sayHello() method now accepts a user name and changes the greeting based on some conditions. If the userName is an empty string (""), the greeting property is set to prompt the user for a name. If the user name is valid, the greeting becomes "Hello, userName." Finally, if either of those two conditions are not met, the greeting variable is set to "Sorry userName, you are not on the list."

• The validName() method returns true if the inputName is found in the validNames array, and false if it is not found. The statement validNames.indexOf(inputName) checks each of the strings in the validNames array against the inputName string. The Array.indexOf() method returns the index position of the first instance of an object in an array, or the value -1 if the object is not found in the array.

Next you will edit the Flash or Flex file that references this ActionScript class.

To modify the application using Flex Builder:

1. Open the HelloWorld.mxml file.

2. Next modify the <mx:TextArea> tag to indicate to the user that it is for display only, by changing the background color to a light gray and preventing the user from editing the displayed text:

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

3. Now add the following lines right after the <mx:TextArea> closing tag. These lines create a new TextInput field that lets the user enter a user name value:

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

   The enter attribute specifies that when the user presses the Enter key in the userNameTxt field, the text in the field will be passed to the Greeter.sayHello() method, and the greeting displayed in the mainTxt field will change accordingly.

   The final contents of the HelloWorld.mxml file should look like this:

   <?xml version="1.0" encoding="utf-8"?> 
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" 
       layout="vertical" 
       creationComplete = "initApp()" > 
        
       <mx: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(); 
               } 
                
           ]]> 
       </mx:Script> 
    
       <mx:TextArea id = "mainTxt" width="400" backgroundColor="#DDDDDD" editable="false" />     
    
       <mx:HBox width="400">     
           <mx:Label text="User Name:"/>     
           <mx:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" /> 
       </mx:HBox> 
        
   </mx:Application>

4. Save the edited HelloWorld.mxml file. Select File > Run to run the application.

   When you run the application, you will be prompted to enter a user name. If it is valid (Sammy, Frank, or Dean), the application will display the “ Hello, userName” confirmation message.