Trabalhando com a classe DataGrid – Pacote fl.controls

Neste artigo conheceremos as classes do pacote fl.controls.dataGridClasses no Flash CS3 construindo pequenas aplicações que visam mostrar os recursos oferecidos por essas classes junto ao componente DataGrid.

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!