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 JacintoConhecendo 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!
- Actionscript AS3 + AMFPHPActionScript
- Video-player em AS3 no Flash - Parte 1ActionScript
- Upload de arquivos em Flash (parte 2)ActionScript
- Upload de arquivos em Flash usando a Class FileReference e integração com PHP e MySQLActionScript
- ActionScript: Conhecendo a class MovieClipLoaderActionScript