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

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.