Trabalhando com a classe DataGrid – Pacote fl.controls
por Jhonatan Rosa Jacinto

No Flash, também podemos trabalhar com componentes mais complexos de interface com o usuário (UI – User interface). Um exemplo destes componentes é o que veremos neste Tutorial: o DataGrid.

DataGrid(Grade de Dados) é um recurso que disponibiliza a visualização de dados em uma espécie de tabela dinâmica. Este recurso é muito utilizado em outras tecnologias como ASP.NET, para a visualização de informações vindas de um banco de dados por exemplo.

Este tutorial será composto pelos seguintes itens:

fl.controls.DataGrid = Classe DataGrid a qual permite a visualização de dados em uma espécie de tabela personalizada.

fl.data.DataProvider = Classe Provedora de dados para objetos contêiner.

fl.controls.dataGridClasses.DataGridCellEditor = Classe que permite a edição de dados em um DataGrid.

fl.controls.dataGridClasses.DataGridColumn = Classe que permite a personalização de colunas em um DataGrid.

fl.controls.dataGridClasses.HeaderRenderer = Classe que obtém informações sobre o cabeçalho das colunas de um DataGrid.

Primeiramente conheceremos o DataGrid. Por isso, abra o Adobe Flash CS3 Professional e clique em Actionscript File 3.0.

A tela de inserção de SCRIPT aparecerá.

Digite o código abaixo(ele está completamente comentado para ajudar no entendimento da lógica aplicada):

package{

       //Classe que permite o desenho de objetos no Stage

       import flash.display.Sprite;

       //Pacote da classe DataGrid que iremos utilizar

       import fl.controls.DataGrid;

       //O pacote fl.events possui vários eventos relacionados a componentes

       //Um destes eventos é o ListEvent que é aplicado à qualquer objeto

       //que permita listagem de dados como por exemplo o DataGrid

       import fl.events.ListEvent;

       //DataProvider é uma classe contêiner que armazena dados a serem

       //aplicados em qualquer outro objeto

       import fl.data.DataProvider;

       //Criamos uma classe chamada DataGridExample que representará os

       //objetos que serão adicionados no Stage

       public class DataGridExample extends Sprite{

       //criamos uma instância da classe DataGrid chamada ‘dg’

             private var dg:DataGrid = new DataGrid();

       //criamos agora uma instancia da classe DataProvider

             private var dp:DataProvider = new DataProvider();

       //criamos o contrutor da classe principal. Ele é o responsável

       //por inicializar todos os componentes e métodos da classe 

             public function DataGridExample():void{

                    var i:Number;

       //Adicionamos um laço “for” para adicionar itens randomicamente ao

       //DataProvider

                    for(i=0; i<=50; i++)

                    {

                           dp.addItem({label:"Meu Item " + i});

                    }

       //O evento ITEM_CLICK da classe ListEvent foi adicionado ao DataGrid.

       //Assim quando algum item do dg for clicado, o evento itemClickEvent

       //Será disparado.

                    dg.addEventListener(ListEvent.ITEM_CLICK, itemClickEvent);

       //configuramos o tamanho do DataGrid: Width=300 e Heigth=300

                    dg.setSize(300, 300);

       //a propriedate sortableColumns permite ou não a ordenação Crescente ou

       //decrescente dos itens

                    dg.sortableColumns = true;

       //atribuímos os itens do DataProvider ao DataGrid

                    dg.dataProvider = dp;

       //finalmente adicionamos o DataGrid no Stage.

                    this.addChild(dg);

             }

       //Declaramos a função itemClickEvent que será disparada quando algum

       //item do DataGrid for clicado

             private function itemClickEvent(event:ListEvent):void{

       //uma mensagem é mostrada no painel output em função do evento.

                    trace(event.item.label + " foi clicado!");

             }

       }

}

Salve o arquivo como DataGridExample.as em algum local. Crie um novo arquivo Flash File (ActionScript 3.0) adicione à Biblioteca (library) um componente DataGrid. Em Document Class, na aba properties, digite o Nome do Arquivo .as(No caso DataGridExample) e salve o arquivo .fla no mesmo diretório onde salvou o .as.

Rode o .swf e veja o resultado:

Um DataGrid é adicionado ao Stage com 50 itens adicionados. Ao clicarmos em algum...

Uma mensagem aparece com o nome do item clicado.

O pacote fl.controls.dataGridClasses foi criado para justamente a manipulação de qualquer ícone relacionado ao objeto DataGrid. Isso significa que os métodos e propriedades deste pacote só podem ser atribuídos ao objeto DataGrid.

Veremos a utilização de cada um na seqüência abaixo:

Veremos agora um exemplo de utilização desta classe:

package{

       //Como já dissemos a classe Sprite é a responsável por permitir o desenho

       //de objetos no Stage

       import flash.display.Sprite;

       //pacote da classe DataGrid

       import fl.controls.DataGrid;

       //Importamos a classe DataGridColumn

       import fl.controls.dataGridClasses.DataGridColumn;

       //Para este exemplo usaremos um evento da classe DataGridEvents

       //O evento que usaremos é o COLUMN_STRETCH que será explicado mais adiante

       import fl.events.DataGridEvent;

       //Importamos o DataProvider

       import fl.data.DataProvider;

       //Criamos a classe principal da aplicação

       public class DataGridColumnExample extends Sprite{

             //criamos uma nova instancia da classe DataGrid chamada ‘dg’

             private var dg:DataGrid = new DataGrid();

             //Fazemos o mesmo com o DataProvider

             private var dp:DataProvider = new DataProvider();

            

             public function DataGridColumnExample():void{

                    var i:Number;

             //Usando o laço for novamente adicionamos no objeto DataProvider

             //Os itens de cada coluna do DataGrid

                    for(i=0; i<=50; i++)

                    {

                           dp.addItem({Coluna1:"Meu item Coluna 1" + i,

                                           Coluna2:"Meu Item Columa 2 " + i,

                                           Coluna3:"Meu Item Coluna 3 " + i});

                    }

             //O comando With() permite acessar de uma só vez vários métodos e

             //propriedades de um objeto. No caso o DataGrid

                    with(dg)

                    {

             //O evento COLUMN_STRETCH da classe DataGridEvent faz referência à ação

             //de redimensionamento da largura de uma coluna.

                           addEventListener(DataGridEvent.COLUMN_STRETCH, columnStretchEvent);

             //Adicionamos 3 colunas ao DataGrid

                           columns = [new DataGridColumn("Coluna1"), new DataGridColumn("Coluna2"), new DataGridColumn("Coluna3")];

             //Permitimos a ordenação dos itens através da propriedade sortableColumns

                           sortableColumns = true;

                           setSize(500,500);

                    }

             //Adiciomandos o DataProvider ao DataGrid

                    dg.dataProvider = dp;

                    this.addChild(dg);

             }

             //O método columStretchEvent será acionado todas as vezes que uma certa

             //coluna do DataGrid for redimensionada

             private function columnStretchEvent(event:DataGridEvent):void{

             //Criamos uma nova instancia da classe DataGrid que receberá o nome

             //do DataGrid que está no Stage através dos comandos

             //event.target que será tratado como uma instancia da classe DataGrid

             //’as DataGrid’

                    var dg1:DataGrid = event.target as DataGrid;

             //Mostramos no painel output o nome da coluna que foi modificada.

                    trace(dg1.columns[event.columnIndex].headerText + " foi modificada");

             }

       }

}

Salve o arquivo como sendo DataGridColumnExample.as e faça a relação deste com um arquivo .fla.

O resultado no swf será o seguinte:

Ao tentarmos redimensionar uma das colunas...

Uma mensagem aparece no painel output:

Poderíamos escrever o final deste código da seguinte maneira, usando como referencia um DataGridColumn:

private function columnStretchEvent(event:DataGridEvent):void{

       var dg1:DataGrid = event.target as DataGrid;

       var dgc:DataGridColumn = dg1.columns[event.columnIndex];

       trace(dgc.headerText + " foi modificada");

}

Como o próprio nome diz, a classe DataGridCellEditor refere-se à edição de dados em células de um DataGrid.

Isso permite que itens, como os adicionados possam ser editados diretamente em tempo de execução.

Além disso podemos definir estilos para personalizar a edição.

Utilizaremos um outro exemplo usando o ActionScript File 3.0.

Após criação do Arquivo .as salve-o como DataGridCellEditorExample.as no mesmo diretório da aplicação .fla

Não se esqueça de atribuir no Painel Properties, o nome do arquivo .as em Document Class.

Vejamos o código da aplicação.

package{

       import flash.display.Sprite;

       import fl.controls.DataGrid;

       import fl.controls.dataGridClasses.DataGridCellEditor;

       import fl.controls.dataGridClasses.DataGridColumn;

       import fl.data.DataProvider;

       import flash.text.TextFormat;

       import flash.text.TextFormatAlign;

       import fl.events.DataGridEvent;

      

       public class DataGridCellEditorExample extends Sprite{

             private var dg:DataGrid = new DataGrid();

             private var dp:DataProvider = new DataProvider();

             private var textFormat:TextFormat = new TextFormat();

             private var dgce:DataGridCellEditor = new DataGridCellEditor();

            

             public function DataGridCellEditorExample():void{

                    var i:Number;

                    for(i=0; i<=50; i++)

                    {

                           dp.addItem({Coluna1:"Meu Item - Coluna1",

                                           Coluna2:"Meu Item - Coluna2",

                                           Coluna3:"Meu Item - Coluna3"});

                    }

                    with(textFormat)

                    {

                           align = TextFormatAlign.CENTER;

                           font = "Verdana";

                           color = 0xff9900;

                           bold = true;

                    }

                    dgce.textField.background = true;

                    dgce.textField.backgroundColor = 0x666666;

                    dgce.setStyle("textFormat", textFormat);

                    with(dg)

                    {

                           sortableColumns = false;

                           setSize(400,400);

                           columns = [new DataGridColumn("Coluna1"), new DataGridColumn("Coluna2"), new DataGridColumn("Coluna3")];

                           dataProvider = dp;

                           editable = true;

                           addEventListener(DataGridEvent.ITEM_EDIT_BEGINNING, itemEditBeginEvent);

                    }

                    var t:Number;

                    for(t=0; t<3; t++)

                    {

                           dg.columns[t].itemEditor = dgce;

                    }

                    this.addChild(dg);

             }

             private function itemEditBeginEvent(event:DataGridEvent):void{

                    trace("Item pronto para ser Editado");

             }

       }

}

Veja o Resultado no .swf

Quando clicamos em um dos itens, a célula correspondente do DataGrid abre espaço para edição atribuindo à essa edição uma personalização graças às configurações feitas com a classe TextFormat. Além disso o evento ITEM_EDIT_BEGINNING é acionado mostrando uma mensagem no painel output.

*OBS.: Você poder ter observado que existiam os eventos ITEM_EDIT_BEGIN e ITEM_EDIT_BEGINNING. Não há diferenças relevantes sobre os dois eventos. Nesta aplicação você poderia ter usado um ou outro sem problemas com o resultado.

Basicamente a classe HeaderRenderer provê mecanismos de eventos e propriedades relacionadas aos cabeçalhos das colunas em um DataGrid.

Vejamos um exemplo prático.

*OBS.: Não se esqueça de salvar o arquivo como HeaderRendererExample.as no mesmo diretório da aplicação .fla.

package{

       import flash.display.Sprite;

       import fl.controls.DataGrid;

       import fl.controls.dataGridClasses.DataGridColumn;

       import fl.controls.dataGridClasses.HeaderRenderer;

       import fl.events.DataGridEvent;

       import fl.data.DataProvider;

      

       public class HeaderRendererExample extends Sprite{

             private var dg:DataGrid = new DataGrid();

             private var dgc:DataGridColumn;

             private var dp:DataProvider = new DataProvider();

            

             public function HeaderRendererExample():void{

                    var cont:uint;

                    for(cont=0; cont<=30;cont++)

                    {

                           dp.addItem({Coluna1:"Meu Item - C1",

                                           Coluna2:"Meu Item - C2",

                                           Coluna3:"Meu Item - C3"});

                    }

                    with(dg)

                    {

                           addEventListener(DataGridEvent.HEADER_RELEASE, headerReleaseEvent);

                           setSize(300,300);

                           editable = false;

                           columns = [new DataGridColumn("Coluna1"), new DataGridColumn("Coluna2"), new DataGridColumn("Coluna3")];

                           dataProvider = dp;

                           sortableColumns = true;

                    }

                    addChild(dg);

             }

             private function headerReleaseEvent(event:DataGridEvent):void{

                    var hr:HeaderRenderer = event.itemRenderer as HeaderRenderer;

                    trace(dg.columns[hr.column].headerText + " - este é o resultado final");

             }

       }

}

O resultado final no .swf é o seguinte.

Ao clicarmos no cabeçalho de uma das colunas e nos trás a mensagem correspondente.

Bem, neste tutorial vimos que o DataGrid tem muito a nos oferecer no desenvolvimento de aplicações complexas com o Flash. Conhecemos de “cabo a rabo” o pacote fl.controls.dataGridClasses e aplicamos suas funcionalidades em nossas aplicações de exemplo. Agora é com vc!

Pratiquem sempre e até o nosso próximo tutorial, se Deus quiser!