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

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á!

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

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!