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

O ActionScript 3.0 pode ser usado em uma série de ambientes de desenvolvimento de aplicativos, incluindo as ferramentas Flash Professional e Flash Builder ou qualquer editor de texto.

Este exemplo apresenta as etapas de criação e de aprimoramento de um aplicativo ActionScript 3.0 simples usando o Flash Professional ou Flash Builder. O aplicativo que você criar apresentará um padrão simples para usar arquivos externos de classe do ActionScript 3.0 no Flash Professional e Flex.

Criação do seu aplicativo do ActionScript

Esse exemplo de aplicativo ActionScript é um aplicativo padrão do tipo "Hello World", por isso seu design é simples:

  • O aplicativo é chamado de HelloWorld.

  • Ele exibe um único campo de texto contendo as palavras “Hello World!”.

  • O aplicativo usa uma classe única orientada a objetos chamadas Greeter. Esse projeto permite que a classe seja usada de dentro de um projeto do Flash Professional ou Flex.

  • Neste exemplo, você primeiro cria uma versão básica do aplicativo. Em seguida, você aumenta a funcionalidade para fazer com que o usuário insira um nome de usuário e o aplicativo verifique o nome em uma lista de usuários conhecidos.

Com essa definição concisa estabelecida, você pode começar a criar o aplicativo em si.

Criação do projeto HelloWorld e da classe Greeter

A instrução do design para o aplicativo Hello World diz que seu código é fácil de reutilizar. Para atingir esse objetivo, o aplicativo usa uma única classe orientada a objetos chamadas Greeter. Você usa essa classe de dentro de um aplicativo que você cria no Flash Builder ou no Flash Professional.

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.

Adição de código à classe Greeter

A classe Greeter define um objeto, Greeter , que você usa no aplicativo HelloWorld.

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.

Criação de um aplicativo que usa o código do ActionScript

A classe Greeter que você criou define um conjunto independente de funções de software, mas não representa um aplicativo completo. Para usar a classe, você crie um documento do Flash Professional ou um projeto do Flex.

O código precisa de uma ocorrência da classe Greeter. Veja como usar a classe Greeter ao seu 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.

Publicação e teste do aplicativo do ActionScript

O desenvolvimento de software é um processo interativo. Você escreve um código, tenta compilá-lo e o edita até obter uma compilação limpa. Você executa o aplicativo compilado e testa-o para ver se representa o design pretendido. Se não representar, você edita o código novamente até que represente. Os ambientes de desenvolvimento do Flash Professional e do Flash Builder oferecem vários meios de publicar, testar e depurar seus aplicativos.

Veja as etapas básicas para testar o aplicativo HelloWorld em cada ambiente.

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.

Aprimoramento do aplicativo HelloWorld

Para tornar o aplicativo um pouco mais interessante, agora você o fará solicitar e validar um nome de usuário em relação a uma lista de nomes predefinida.

Primeiro, você atualiza a classe Greeter para adicionar nova funcionalidade. Depois, você atualiza o aplicativo para usar a nova funcionalidade.

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 ”.