Exemplo: Criação de um aplicativo básico

Para criar o projeto HelloWorld e a classe Greeter no Flex:

1. No Flash Builder, selecione File > New> Flex Project.

2. Digite HelloWorld como o nome do projeto. Certifique-se de que o tipo de aplicativo esteja definido como “Web (é executado no Adobe Flash Player)” e depois clique em Concluir.

   O Flash Builder cria seu projeto e o exige no Package Explorer. Por padrão, o projeto já contém um arquivo chamado HelloWorld.mxml, e esse arquivo é aberto no painel Editor.

3. Agora, para criar um arquivo de classe do ActionScript personalizado no Flash Builder, selecione Arquivo > Novo > Classe ActionScript.

4. Na caixa de diálogo New ActionScript Class, no campo Name, digite Greeter para o nome da classe e, em seguida, clique em Finish.

   Uma nova janela de edição do ActionScript será exibida.

   Continue com Adição de código à classe Greeter.

Para criar a classe Greeter no Flash Professional:

1. No Flash Professional, selecione File > New.

2. Na caixa de diálogo Novo documento, selecione Arquivo ActionScript e clique em OK.

   Uma nova janela de edição do ActionScript será exibida.

3. Selecione Arquivo > Salvar. Selecione uma pasta para conter o aplicativo, chame o arquivo do ActionScript de Greeter.as e clique em OK.

   Continue com Adição de código à classe Greeter.

Para adicionar código à classe Greeter:

1. Digite o seguinte código no novo arquivo (parte do código pode já ter sido adicionada):

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

   A classe Greeter inclui um único método sayHello() , que retorna uma seqüência de caracteres que diz “Hello World!”.

2. Clique em Arquivo > Salvar para salvar esse arquivo do ActionScript.

A classe Greeter agora está pronta para ser usada em um aplicativo.

Para criar um aplicativo do ActionScript usando o Flash Professional:

1. Selecione Arquivo > Novo.

2. Na caixa de diálogo Novo documento, selecione Arquivo Flash (ActionScript 3.0) e clique em OK.

   É exibida uma nova janela de documento.

3. Selecione Arquivo > Salvar. Selecione uma pasta que contenha o arquivo de classe Greeter.as, chame o documento Flash de HelloWorld.fla e clique em OK.

4. Na paleta de ferramentas do Flash Professional, selecione a ferramenta Text. Arraste no Palco para definir um novo campo de texto com aproximadamente 300 pixels de largura e 100 pixels de altura.

5. No painel Propriedades, com o campo de texto ainda selecionado no Palco, defina o tipo de texto como "Texto dinâmico". Digite mainText como o nome de ocorrência do campo de texto.

6. Clique no primeiro quadro da linha de tempo principal. Abra o painel Ações escolhendo Janela > Ações.

7. No painel Ações, digite o seguinte script:

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

8. Salve o arquivo.

Continue com Publicação e teste do aplicativo do ActionScript.

Para criar um aplicativo do ActionScript usando o Flash Builder:

1. Abra o arquivo HelloWorld.mxml e adicione código correspondente à seguinte listagem:

   <?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 projeto do Flex inclui quatro tags MXML:

   • Uma tag <s:Application> , que define o contêiner Application

   • Uma tag <s:layout> , que define o estilo de layout (layout vertical) da tag Application

   • Uma tag <fx:Script> , que inclui código do ActionScript

   • Uma tag <s:TextArea> , que define um campo para exibir mensagens de texto ao usuário

   O código na tag <fx:Script> define um método initApp() que é chamado quando o aplicativo é carregado. O método initApp() define o valor de texto da TextArea mainTxt para a seqüência de caracteres "Hello World!" retornada pelo método sayHello() da classe Greeter personalizada, que você acabou de escrever.

2. Selecione Arquivo > Salvar para salvar o aplicativo.

Continue com Publicação e teste do aplicativo do ActionScript.

Para publicar e testar um aplicativo do ActionScript usando o Flash Professional:

1. Publique seu aplicativo e observe se há erros de compilação. No Flash Professional, selecione Controlar > Testar filme para compilar o código do ActionScript e executar o aplicativo HelloWorld.

2. Se forem exibidos erros ou advertências na janela Saída quando você testar seu aplicativo, conserte esses erros nos arquivos HelloWorld.fla ou HelloWorld.as. Tente testar o aplicativo novamente.

3. Se não houver nenhum erro de compilação, você vê uma janela do Flash Player mostrando o aplicativo Hello World.

Você criou um aplicativo orientado a objetos simples, mas completo, que usa o ActionScript 3.0. Continue com Aprimoramento do aplicativo HelloWorld.

Para publicar e testar um aplicativo do ActionScript usando o Flash Builder:

1. Selecione Executar > Executar HelloWorld.

2. O aplicativo HelloWorld é iniciado.

   • Se forem exibidos erros ou advertências na janela Saída quando você testar seu aplicativo, conserte os erros nos arquivos HelloWorld.mxml ou Greeter.as. Tente testar o aplicativo novamente.

   • Se não houver nenhum erro de compilação, uma janela de navegador é aberta mostrando o aplicativo Hello World. O texto “Hello World!” aparece.

   Você criou um aplicativo orientado a objetos simples, mas completo, que usa o ActionScript 3.0. Continue com Aprimoramento do aplicativo HelloWorld.

Para atualizar o arquivo Greeter.as:

1. Abra o arquivo Greeter.as.

2. Altere o conteúdo do arquivo com o seguinte (as linhas novas e alteradas são mostradas em negrito):

   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 classe Greeter agora tem vários novos recursos:

• A matriz validNames lista os nomes de usuário válidos. A matriz é inicializada com uma lista de três nomes quando a classe Greeter é carregada.

• O método sayHello() agora aceita um nome de usuário e altera a saudação com base em algumas condições. Se userName for uma seqüência de caracteres vazia ( "" ), a propriedade greeting será definida para solicitar um nome ao usuário. Se o nome do usuário for válido, a saudação se tornará "Hello, userName ". Finalmente, se as duas condições não forem atendidas, a variável greeting será definida como "Sorry userName , you are not on the list".

• O método validName() retornará true se inputName for encontrado na matriz validNames e false se não for encontrado. A instrução validNames.indexOf(inputName) verifica cada seqüência de caracteres na matriz validNames em relação à seqüência de caracteres inputName . O método Array.indexOf() retorna a posição de índice da primeira ocorrência de um objeto em uma matriz. Ele retorna o valor -1 se o objeto não for encontrado na array.

Em seguida, você edita o arquivo do aplicativo que faz referência a esta classe do ActionScript.

Para modificar o aplicativo usando o Flash Professional:

1. Abra o arquivo HelloWorld.fla.

2. Modifique o script no Quadro 1 para que uma seqüência de caracteres ( "" ) seja transmitida ao método sayHello() da classe Greeter:

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

3. Selecione a ferramenta Text na paleta de ferramentas. Crie dois novos campos de texto no Palco. Coloque-os lado a lado diretamente no campo de texto atual mainText .

4. No primeiro campo novo de texto, que é o rótulo, digite o texto User Name: .

5. No outro campo de texto novo, e no inspetor de propriedades, selecione InputText como o tipo de campo de texto. Selecione Linha única como o Tipo de linha. Digite textIn como o nome de ocorrência.

6. Clique no primeiro quadro da linha de tempo principal.

7. No painel Ações, adicione as seguintes linhas no final do 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); 
       } 
   }

   O novo código adiciona a seguinte funcionalidade:

   • As primeiras duas linhas simplesmente definem bordas para os dois campos de texto.

   • Um campo de texto de entrada, como o campo textIn , possui um conjunto de eventos que ele pode despachar. O método addEventListener() permite definir uma função que é executada quando um tipo de evento ocorre. Neste caso, o evento é o pressionamento de uma tecla no teclado.

   • A função personalizada keyPressed() verifica se a tecla que foi pressionada é a tecla Enter. Caso afirmativo, ela chama o método sayHello() do objeto myGreeter , transmitindo o texto do campo de texto textIn como um parâmetro. Esse método retorna uma seqüência de caracteres de saudação com base no valor transmitido. A seqüência de caracteres retornada é atribuída à propriedade text do campo de texto mainText .

   O script completo para o Quadro 1 é o seguinte:

   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. Salve o arquivo.

9. Selecione Controlar > Testar filme para executar o aplicativo.

   Quando você executa o aplicativo, ele lhe pede para inserir um nome de usuário. Se for válido (Sammy, Frank ou Dean), o aplicativo exibirá a mensagem de confirmação "hello".

Para modificar o aplicativo usando o Flash Builder:

1. Abra o arquivo HelloWorld.mxml.

2. Em seguida, modifique a tag <mx:TextArea> para indicar para o usuário que é apenas para exibição. Altere a cor de plano de fundo para um cinza claro e defina o atributo editable como false :

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

3. Agora, adicione as seguintes linhas logo depois da tag de fechamento <s:TextArea> . Essas linhas criam um componente TextInput que permite que o usuário insira um valor de nome de usuário:

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

   O atributo enter define o que acontece quando o usuário pressiona a tecla Enter no campo userNameTxt . Neste exemplo, o código passa o texto no campo para o método Greeter.sayHello() . A saudação no campo mainTxt muda da forma correspondente.

   O arquivo HelloWorld.mxml file se parece com o seguinte:

   <?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. Salve o arquivo HelloWorld.mxml editado. Selecione Executar > Executar HelloWorld para executar o aplicativo.

   Quando você executa o aplicativo, o aplicativo lhe pede para inserir um nome de usuário. Se for válido (Sammy, Frank ou Dean), o aplicativo exibirá a mensagem de confirmação " Hello, userName ”.