Desenvolvimento - ActionScript

Conhecendo e Trabalhando com os pacotes fl.controls, fl.data e fl.events

Neste artigo falaremos dos pacotes fl.controls, fl.data e fl.events contruindo uma aplicação simples baseando-se em Oriented Object Programming com ActionScript 3.0 e o Flash CS3.

por Jhonatan Rosa Jacinto



Conhecendo e trabalhando com o pacote fl.controls

E ae galera, blz?

Depois de algum tempo sem aparecer estou voltando com mais tutoriais sobre o Flash e ActionScript 3.0 além de outros que estou preparando de ASP.NET, C# e VB.NET.

A partir de hoje teremos uma seqüência de tutoriais que tratarão das classes do pacote fl.data, fl.controls e fl.events.

Então, vamos lá!

Definição dos pacotes.

Fl.controls.*: conjunto de classes que representa os componentes do Flash direcionados à UI (User Interface – Interface de Usuário) como Buttons, CheckBoxes, Labels, ComboBox, etc.

Fl.data.*: Provê mecanismos para armazenamento de dados.

Fl.events.*: Gerencia eventos relacionados aos componentes do pacote fl.controls.*.

fl.controls.*

No código abaixo criaremos um aplicativo simples usando as classes de fl.controls.

      package{

      import flash.display.MovieClip;

      //importamos os pacotes necessários para nossa aplicação

      //o primeiro é o fl.controls que provê mecanismos de inserção de objetos //User Interface como buttons, DataGrids, etc.

      //A classe Button representa um botão

      import fl.controls.Button;

      //importamos a classe CheckBox (Caixa de Seleção)

      import fl.controls.CheckBox;

      //importamos a classe ComboBox (Caixa de Combinação)

      import fl.controls.ComboBox;

      //importamos a classe flash.events.MouseEvent. Não há muitas diferenças //entre os pacotes fl.events e flash.events. Os dois apresentam eventos //relacionados aos objetos do flash

      import flash.events.MouseEvent;

      //o componente DataProvider é um objeto contêiner que armazena informações

      import fl.data.DataProvider;

      //declaramos uma classe que extende a classe MovieClip para desenharmos os //objetos no stage

      public class myFlControls extends MovieClip{

      //declaramos uma nova instancia da classe Button chamada ‘myButton’ que //representará o botão no Stage

                private var myButton:Button = new Button();

      //O mesmo fazemos com as variáveis ‘myCheckBox’, e ‘myComboBox’

                private var myCheckBox:CheckBox = new CheckBox();

                private var myComboBox:ComboBox = new ComboBox();

      //Declaramos um novo objeto DataProvider que armazenará informações para o //ComboBox

                private var dp:DataProvider = new DataProvider();

      //Declaramos o construtor da classe

         public function myFlControls():void{

      //O comando With() permite acessar as propriedades e os métodos de um //objeto em um único bloco de declarações ‘{}’

                with(myButton)

                {

      //Configuramos o texto do Botão myButton

                       label = "Carregar dados";

      //Adicionamos o evento CLICK da classe MouseEvent. Quando o botão for //clicado o evento clickEventHandler será disparado.

                       addEventListener(MouseEvent.CLICK, clickEventHandler);

      //Gerenciamos as posições X e Y do objeto no stage

                       x = 200;

                       y = 200;

                }

      //por fim, o adicionamos no stage

                addChild(myButton);

                with(myCheckBox)

                {

                       label = "Continentes";

      //Com o mesmo comando With() acessamos as propriedades do objeto CheckBox. //A propriedade ‘selected’ define se o objeto estará selecionado(com a //marquinha de seleção de caixa) ou não. Inicialmente ele será false, assim //a caixa de seleção estará desmarcada.

                       selected = false;

                       x = 150;

                       y = 150;

                }

                with(myComboBox)

                {

                       x = 250;

                       y = 150;

                }

      //Adicionamos os objetos ‘myCheckBox’ e ‘myComboBox no Stage com o comando //addChild()

                addChild(myCheckBox);

                addChild(myComboBox);

         }

      //a função abaixo é chamada quando o objeto myButton é clicado.

         private function clickEventHandler(e:MouseEvent):void{

      //o método addItem() do objeto DataProvider faz com que propriedades de //objetos sejam adicionados como um item que será passado à outro objeto. //Assim, o objeto myComboBox receberá os labels(‘textos’) abaixo como sendo //itens de seleção

                dp.addItem({label:"Oceania"});

                dp.addItem({label:"Europa"});

                dp.addItem({label:"Ásia"});

                dp.addItem({label:"América"});

                dp.addItem({label:"África"});

      //Se a caixa de seleção myCheckBox estiver selecionada...

                if(myCheckBox.selected == true)

                {

      //...myComboBox é preenchido com os dados do objeto dp(DataProvider)

                       myComboBox.dataProvider = dp;

      //caso contrário...

                }else{

      //uma mensagem é exibida no painel OutPut e os itens do comboBox são //limpos.

                trace("Selecione a CheckBox primeiro!");

                myComboBox.removeAll();

                }//fechamos o if

         }//fechamos a função clickEventHandler

      }//Fechamos a classe

      }//E finalmente o Pacote

      Crie uma pasta na área de trabalho chamada ActionScript;

      Nela, salve o arquivo (.as) com o nome de myFlControls.as;

      Crie um novo documento Flash File ActionScript 3.0 e salve-o no mesmo diretório do arquivo (.as).

      Vá até o painel Properties e na caixa Document Class digite myFlControls.as

      Teste a aplicação dando CTRL+Enter. O resultado deverá ser o seguinte:

      Se clicarmos no botão sem a caixa de seleção ‘Continentes estiver marcada’ um erro ocorre:

      Caso contrário...

      Preenche o ComboBox com os dados do DataProvider.

      fl.events e fl.controls.

      Agora faremos um outro exemplo utilizando as classes do pacote fl.events e o controle DataGrid do Flash.

      Crie um novo ActionScript File 3.0 e digite o código Abaixo:

      package{

      //importamos os pacotes necessários

             import flash.display.MovieClip;

             import flash.events.MouseEvent;

      //Um DataGrid (ou grade de Dados) é um objeto que exibe informações em uma //espécie de tabela personalizada.

             import fl.controls.DataGrid;

             import fl.controls.Button;

             import fl.controls.CheckBox;

      //Um List é um objeto que exibe uma lista de itens a serem selecionados

             import fl.controls.List;

      //TextArea, como o próprio nome diz, Área de Texto. Onde podemos digitar //textos.

             import fl.controls.TextArea;

      //Aqui a classe ListEvent do pacote fl.events gerencia os eventos relacionados //à objetos que contêm itens selecionáveis como o DataGrid e o List

             import fl.events.ListEvent;

      //DataProvider será nosso Provedor de dados

             import fl.data.DataProvider;

            

      //Declaramos a classe que é uma extensão da classe MovieClip

             public class AnotherExample extends MovieClip{

      //Declaramos as instancias das classes usadas.

                   private var dg:DataGrid = new DataGrid();

                   private var myButton:Button = new Button();

                   private var myListBox:List = new List();

                   private var myTextArea:TextArea = new TextArea();

                   private var dp:DataProvider = new DataProvider();

                   private var myCheckBox1:CheckBox = new CheckBox();

                   private var myCheckBox2:CheckBox = new CheckBox();

      //Iniciamos o contrutor da classe AnotherExample

                   public function AnotherExample():void{

      //Configuramos as propriedades dos objetos com o comando With()

                          with(myCheckBox1)

                          {

      //Texto do CheckBox1

                                 label = "Tecnologia";

      //Posição X do CheckBox1

                                 x = 200;

                                 y = 50;

                                 selected = false;

                          }

                          addChild(myCheckBox1);

                          with(myCheckBox2)

                          {

      //Texto do CheckBox2

                                 label = "Automotivo";

      //Posição X do CheckBox2

                                 x = 200;

                          //Posição Y do CheckBox2

                                 y = 80;

                                 selected = false;

                          }

                          addChild(myCheckBox2);

                          with(myButton)

                          {

                          label = "Carregar Dados";

                          x = 250;

                          y = 100;

                          addEventListener(MouseEvent.CLICK, clickEventHandler);

                          }

                          addChild(myButton);

                          with(myTextArea)

                          {

                                 x = 200;

                                 y = 150;

                                 width = 300;

                                 height = 100;

                          }

                          addChild(myTextArea);

                          with(dg)

                          {

                                 x = 400;

                                 y = 10;

      //Um evento é relacionado ao DataGrid dg. Quando o Mouse passar sobre os itens //do DataGrid, o evento ItemRollOverEventHandler será disparado.

             addEventListener(ListEvent.ITEM_ROLL_OVER, ItemRollOverEventHandler);

                          }

                          addChild(dg);

                          with(myListBox)

                          {

                                 x = 50;

                                 y = 100;

      //O Evento ListEvent.ITEM_CLICK analisa qual dos item do List foi clicado

                   addEventListener(ListEvent.ITEM_CLICK, ItemClickEventHandler);

                          }

                          addChild(myListBox);

                          }

      //Declaramos a função clickEventHandler do myButton

             private function clickEventHandler(e:MouseEvent):void{

      //Se myCheckBox e myCheckBox2 estiverem selecionadas...

                   if(myCheckBox1.selected == true && myCheckBox2.selected == true)

                   {

      //Uma mensagem é acionada no painel outPut e o ListBox limpo

                   trace("Selecione apenas 1 opção "Automotivo" ou "Tecnologia"");

                   myListBox.removeAll();

      //Caso contrário se apenas o myCheckBox1 estiver selecionado...

                   }else if(myCheckBox1.selected == true)

                   {

      //Se houver algo no List, é removido e

      //Uma nova seqüência de itens são adicionados ao dataProvider dp

                          myListBox.removeAll();

                          dp.addItem({label:"Microsoft"});

                          dp.addItem({label:"Adobe"});

                          dp.addItem({label:"IBM"});

      //myListBox recebe o DataProvider

                          myListBox.dataProvider = dp;

      //Caso contrário se myCheckBox2 estiver selecionado...

                   }else if(myCheckBox2.selected == true)

                   {

      //Novamente o list é limpo e uma nova seqüência de dados é criada no //DataProvider

                          myListBox.removeAll();

                          dp.addItem({label:"Chevrolet"});

                          dp.addItem({label:"Fiat"});

                          dp.addItem({label:"Ford"});

                          myListBox.dataProvider = dp;

      //Enfim, se nenhuma das condições for verdadeira

      //Quer dizer que nenhum dos item foram selecionados...

      //então...

                          }else{

      //Uma mensagem exige que um dos itens seja selecionado para que as ações //continuem.

                          trace("Selecione uma opção");

                          myListBox.removeAll();

                          }

                   }

      //Declara-se a função ItemClickEventHandler do ListBox

                   private function ItemClickEventHandler(e:ListEvent):void{

      //Se o texto apresentado no item clicado for igual à  ‘Microsoft’...

                          if(e.item.label == "Microsoft")

                          {

      //Então, declara-se um novo DataProvider que obtem os produtos da empresa

                          var dp2:DataProvider = new DataProvider();

                          dp2.addItem({label:"Silverlight"});

                          dp2.addItem({label:"Visual Studio 2005"});

                          dp2.addItem({label:"Office 2007"});

      //O DataGrid recebe o DataProvider dp2

                          dg.dataProvider = dp2;

                          }else{

      //Caso contrário, se o item selecionado não foi o Microsoft...

      //Mostra-se uma mensagem no Painel outPut

                          trace(“Não há o que mostrar sobre esse item!”);

                          }

                   }

      //Finalmente o Evento do DataGrid dg, o ‘ItemRollOverEventHandler’

                   private function ItemRollOverEventHandler(e:ListEvent):void{

      //Se o mouse rolou em cima do item Silverlight

                   if(e.item.label == ‘Silverlight’)

                   {

      //O Objeto TextArea recebe um texto informativo sobre o produto

                          myTextArea.text = “O Microsoft Silverlight é um plug-in multi-plataforma e cross-browser criado pela Microsoft Corporation”;

                   }else{

      //Caso contrário... uma mensagem é exibida...

                          trace(“Você selecionou outro item”);

                   }

             }

      }

      }

      Na pasta ActionScript que vc criou salve este Arquivo como AnotherExample.as

      Crie um novo documento Flash File ActionScript 3.0  e em Document Class digite o nome do aquivo AnotherExample. Salve o .fla na mesma pasta que salvou o código da aplicação.

      Rode o swf e o resultado deve ser o seguinte.

      Se o botão for clicado diretamente...

      A mensagem de erro aparece na tela informando que uma das opções devem ser selecionada.

      Se o usuário escolhe as duas opções...

      Outra mensagem de erro...

      Com a escolha do item Tecnologia, o List é preenchido com os dados referentes:

      Objeto List

      Se clicarmos no Microsoft...

      O DataGrid é preenchido e se rolarmos no item silverlight o TextArea é preenchido...

      Objeto DataGrid

      Objeto TextArea.

      Espero que tenham gostado deste tutorial. Para os amantes de linguagens como ASP, ASP.NET, C# e VB.NET estou preparando tutoriais também.

      Para os Flasheiros de plantão um grande abraço e até o próximo tutorial se Deus quiser! Fui!

Jhonatan Rosa Jacinto

Jhonatan Rosa Jacinto