Ejemplo: Creación de una aplicación básica

Para crear el proyecto HelloWorld y la clase Greeter en Flex:

1. En Flash Builder, seleccione File (Archivo) > New (Nuevo)> Flex Project (Proyecto de Flex).

2. Escriba HelloWorld como nombre del proyecto. Asegúrese de que el tipo de aplicación se establece como “Web (runs in Adobe Flash Player)” (Web (se ejecuta en Adobe Flash Player)), a continuación, haga clic en Finish (Finalizar).

   Flash Builder crea el proyecto y lo muestra en el explorador de paquetes. De forma predeterminada, el proyecto debe contener un archivo con el nombre HelloWorld.mxml, el cual se debe encontrar abierto en el editor.

3. A continuación, para crear una clase personalizada de ActionScript en la herramienta Flash Builder, seleccione File (Archivo) > New (Nuevo) >ActionScript Class (Clase de ActionScript).

4. En el cuadro de diálogo New ActionScript Class (Nueva clase de ActionScript), en el campo Name (Nombre), escriba Greeter como nombre de la clase y haga clic en Finish (Terminar).

   Aparecerá una nueva ventana de edición de ActionScript.

   Para continuar, consulte la sección Añadir código a la clase Greeter.

Para crear la clase Greeter en Flash Professional:

1. En Flash Professional, seleccione Archivo > Nuevo.

2. En el cuadro de diálogo Nuevo documento, seleccione Archivo ActionScript y haga clic en Aceptar.

   Aparecerá una nueva ventana de edición de ActionScript.

3. Seleccione Archivo > Guardar. Seleccione la carpeta en la que desea almacenar la aplicación, asigne el nombre Greeter.as al archivo ActionScript y haga clic en Aceptar.

   Para continuar, consulte la sección Añadir código a la clase Greeter.

Para añadir código a la clase Greeter:

1. Escriba el código siguiente en el nuevo archivo (parte del código se puede añadir por usted):

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

   La clase Greeter incluye un único método sayHello() , el cual devuelve una cadena con el texto “Hello World!”.

2. Seleccione Archivo > Guardar para guardar este archivo de ActionScript.

Ya se puede utilizar la clase Greeter en la aplicación.

Para crear una aplicación ActionScript con Flash Professional:

1. Seleccione Archivo > Nuevo.

2. En el cuadro de diálogo Nuevo documento, seleccione Archivo de Flash (ActionScript 3.0) y haga clic en Aceptar.

   Aparece una nueva ventana de documento.

3. Seleccione Archivo > Guardar. Seleccione la misma carpeta que contiene el archivo de clase Greeter.as, asigne al documento de Flash el nombre HelloWorld.fla y haga clic en Aceptar.

4. En la paleta de herramientas de Flash Professional, seleccione la herramienta Texto. Arrastre el cursor por el escenario para definir un nuevo campo de texto, con una anchura de aproximadamente 300 pí­xeles y una altura de unos 100 píxeles.

5. En el panel Propiedades, con el campo de texto todavía seleccionado en el escenario, establezca “Texto dinámico” como tipo de texto. Escriba mainText como nombre de instancia del campo de texto.

6. Haga clic en el primer fotograma de la línea de tiempo principal. Abra el panel Acciones eligiendo Ventana > Acciones.

7. En el panel Acciones, escriba el siguiente script:

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

8. Guarde el archivo.

Para continuar, consulte la sección Publicación y prueba de la aplicación ActionScript.

Para crear una aplicación ActionScript con Flash Builder:

1. Abra el archivo HelloWorld.mxml y añada código para que coincida con lo siguiente:

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

   Este proyecto de Flex incluye cuatro etiquetas MXML:

   • Una etiqueta <s:Application> que define el contenedor de la aplicación

   • Una etiqueta <s:layout> que define el estilo del diseño (diseño vertical) para la etiqueta de la aplicación

   • Una etiqueta <fx:Script> que incluye código ActionScript

   • Una etiqueta <s:TextArea> que define un campo para que se muestren mensajes de texto al usuario

   El código de la etiqueta <fx:Script> define un método initApp() al que se llama cuando se carga la aplicación. El método initApp() establece el valor de texto de la etiqueta TextArea de mainTxt como la cadena “Hello World!” devuelta por el método sayHello() de la clase Greeter personalizada que se acaba de escribir.

2. Seleccione File (Archivo) > Save (Guardar) para guardar la aplicación.

Para continuar, consulte la sección Publicación y prueba de la aplicación ActionScript.

Para publicar y probar una aplicación ActionScript con Flash Professional:

1. Publique la aplicación y vea si aparecen errores de compilación. En la herramienta de edición de Flash Professional, seleccione Control > Probar película para compilar el código ActionScript y ejecutar la aplicación HelloWorld.

2. Si aparecen errores o advertencias en la ventana Salida al probar la aplicación, solucione estos errores en los archivos HelloWorld.fla o HelloWorld.as. Posteriormente intente probar de nuevo la aplicación.

3. Si no se producen errores de compilación, verá una ventana de Flash Player en la que se mostrará la aplicación Hello World.

Acaba de crear una aplicación orientada a objetos sencilla, pero completa, que utiliza ActionScript 3.0. Para continuar, consulte la sección Mejora de la aplicación HelloWorld.

Para publicar y probar una aplicación ActionScript con Flash Builder:

1. Seleccione Run (Ejecutar) > Run HelloWorld (Ejecutar HelloWorld).

2. Se iniciará la aplicación HelloWorld.

   • Si aparecen errores o advertencias en la ventana de salida al probar la aplicación, solucione estos errores en los archivos HelloWorld.mxml o Greeter.as. Posteriormente intente probar de nuevo la aplicación.

   • Si no se producen errores de compilación, se abrirá una ventana del navegador con la aplicación Hello World. Aparece el texto “Hello World!”.

   Acaba de crear una aplicación orientada a objetos sencilla, pero completa, que utiliza ActionScript 3.0. Para continuar, consulte la sección Mejora de la aplicación HelloWorld.

Para actualizar el archivo Greeter.as:

1. Abra el archivo Greeter.as.

2. Cambie el contenido del archivo por lo siguiente (las líneas nuevas y cambiadas se muestran en negrita):

   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 clase Greeter tiene ahora varias funciones nuevas:

• El conjunto validNames enumera los nombres de usuario válidos. El conjunto se inicializa como una lista de tres nombres cuando se carga la clase Greeter.

• El método sayHello() acepta ahora un nombre de usuario y cambia el saludo en función de algunas condiciones. Si userName es una cadena vacía ( "" ), la propiedad greeting se define de forma que pida un nombre al usuario. Si el nombre de usuario es válido, el saludo se convierte en "Hello, userName" . Finalmente, si no se cumple alguna de estas dos condiciones, la variable greeting se define como "Sorry, userName , you are not on the list" .

• El método validName() devuelve true si inputName se encuentra en el conjunto validNames y false si no se encuentra. La sentencia validNames.indexOf(inputName) comprueba cada una de las cadenas del conjunto validNames con respecto a la cadena inputName . El método Array.indexOf() devuelve la posición de í­ndice de la primera instancia de un objeto en un conjunto. Devuelve el valor -1 si el objeto no se encuentra en el conjunto.

A continuación se edita el archivo de la aplicación que hace referencia a esta clase de ActionScript.

Para modificar la aplicación utilizando Flash Professional:

1. Abra el archivo HelloWorld.fla.

2. Modifique el script en el Fotograma 1 de forma que se pase una cadena vacía ( "" ) al método sayHello() de la clase Greeter:

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

3. Seleccione la herramienta Texto en la paleta Herramientas y cree dos nuevos campos de texto en el escenario. Colóquelos uno junto al otro directamente debajo del campo de texto mainText existente.

4. En el primer nuevo campo de texto, que es la etiqueta, escriba el texto User Name: .

5. Seleccione el otro campo de texto nuevo y, en el inspector de propiedades, seleccione Texto de entrada como tipo del campo de texto. Seleccione Línea única como tipo de línea. Escriba textIn como nombre de instancia.

6. Haga clic en el primer fotograma de la línea de tiempo principal.

7. En el panel Acciones, añada las líneas siguientes al final del script existente:

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

   El código nuevo añade la siguiente funcionalidad:

   • Las dos primeras líneas sólo definen los bordes de dos campos de texto.

   • Un campo de texto de entrada, como el campo textIn , tiene un conjunto de eventos que puede distribuir. El método addEventListener() permite definir una función que se ejecuta cuando se produce un tipo de evento. En este caso, el evento es presionar una tecla del teclado.

   • La función personalizada keyPressed() comprueba si la tecla presionada es la tecla Intro. De ser así, llama al método sayHello() del objeto myGreeter y le pasa el texto del campo de texto textIn como parámetro. El método devuelve una cadena de saludo basada en el valor pasado. Después se asigna la cadena devuelta a la propiedad text del campo de texto mainText .

   A continuación se muestra el script completo para el Fotograma 1:

   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. Guarde el archivo.

9. Seleccione Control > Probar película para ejecutar la aplicación.

   Al ejecutar la aplicación, se solicita que indique un nombre de usuario. Si es válido (Sammy, Frank o Dean), la aplicación mostrará el mensaje de confirmación “hello”.

Para modificar la aplicación con Flash Builder:

1. Abra el archivo HelloWorld.mxml.

2. A continuación modifique la etiqueta <mx:TextArea> para indicar al usuario que es sólo para visualización. Cambie el color de fondo a un gris claro y establezca el atributo editable en false :

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

3. Añada ahora las siguientes líneas justo después de la etiqueta de cierre <s:TextArea> . Estas líneas crean un componente TextInput que permite al usuario especificar un valor de nombre de usuario:

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

   El atributo enter define qué sucede cuando el usuario presiona la tecla Intro en el campo userNameTxt . En este ejemplo, el código pasa el texto en el campo al método Greeter.sayHello() . El saludo del campo mainTxt cambia como resultado.

   El archivo HelloWorld.mxml presenta el siguiente aspecto:

   <?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. Guarde el archivo HelloWorld.mxml modificado. Seleccione Run (Ejecutar) > Run HelloWorld (Ejecutar HelloWorld) para ejecutar la aplicación.

   Al ejecutar la aplicación, ésta solicita que indique un nombre de usuario. Si es válido (Sammy, Frank o Dean), la aplicación mostrará el mensaje de confirmación “ Hello, userName ”.