Aprendendo a utilizar LabelFunction

Nessa coluna vou mostrar como utilizamos o recurso "LabelFunction". Bom antes de começar quero dedicar essa coluna para um grande amigo meu Francisco Brianezi, que o foi o cara que me mostrou o mundo Flex e sempre esteve disposto a me ajudar em todos os aspectos. Muito obrigado por toda ajuda Bria.

Por | @oficinadanet Programação
Pessoal, hoje lembrei de um recurso que utilizava todos os dias LabelFunctions!

Bom antes de começar quero dedicar essa coluna para um grande amigo meu Francisco Brianezi, que o foi o cara que me mostrou o mundo Flex e sempre esteve disposto a me ajudar em todos os aspectos. Muito obrigado por toda ajuda Bria.

LabelFunctions: Esse recursos permite ao programador conseguir exibir propriedades (em um Data Grid por exemplo) de um objeto que por sua vez está dentro de outro objeto (ficou confuso né? No final explico com mais clareza) e também permite formatar o conteúdo da informação que será exibida em algum objeto (o objeto DataGrid por exemplo).
Aqui desenvolveremos um programa onde terá uma Grid, onde irá mostrar três informações:
  • Nome
  • Idade
  • Endereço (Nome da Rua e Número)

Até aqui fácil,porém vamos dificultar um pouco (nem tudo é fácil =P), iremos criar uma classe chamada Endereço onde iremos armazenar as informações do Endereço (Nome da Rua e Número) e também vamos criar uma classe que irá se chamar Pessoa onde iremos armazenar as Informações Pessoais (Nome e Idade) e dentro dela iremos ter uma variável do tipo Endereço. Simplificando ficaremos com uma classe do tipo Pessoa que irá conter uma classe do tipo Endereço. Daqui a pouco vocês irão entender porque fiz essa "confusão" =P!

Bom então vamos lá,,,,crie um novo projeto e de o nome de "Functions" para ele.Dentro da pasta src, criem uma pasta chamada classes.Essa pasta irá guarda a nossas classes: Pessoas e Endereços.

Agora cliquem com o botão direito sobre a pasta classes e New – ActionScript Class, na janela que irá se abrir, altere somente a propriedade nome para Endereco.

Bom, para quem nunca criou uma classe actionscript, essa é a estrutura que é criada

package classes
{
    public class Endereco
    {
        public function Endereco()
        {
        }

    }
}


package classes: A nomenclatura package indica onde esse arquivo (classe) se encontra dentro do nosso projeto. No nosso caso arquivo, esta dentro de uma pasta chamada classe.
public class Endereco: Aqui está a declaração da nossa classe.
Public function Endereco(): Esse é o construtor da nossa classe, lembrando que o construtor obrigatoriamente nunca tem retorno, deve se possuir o mesmo nome da classe e deve ser público(pois é através dele que o objeto será instanciado). Caso você não possua um construtor em sua classe, no momento da compilação, o Flex, digamos que “cria” um para poder instanciar os objetos.

Como dito anteriormente, iremos ter dois atributos na classe Endereco, que serão: Nome da rua e Numero da residência. Portanto nossa classe ficará assim (copiem esse código dentro da classe Endereco):

/*Caminho onde se localiza o arquivo*/
package classes
{
    /*Declaração da classe*/
    public class Endereco
    {
        /*Construtor da classe com parâmetros*/
        public function Endereco(pNomeRua:String, pNumResidencia:int)
        {
            this._nomeRua = pNomeRua;
            this._numResidencia = pNumResidencia;
        }

        /*Atributo que irá armazenar o nome da rua
        e logo abaixo seus métodos Get e Set*/
        private var _nomeRua:String;
        public function get NomeRua():String
        {
            return _nomeRua
        }
        public function set NomeRua(value:String):void
        {
            _nomeRua = value;
        }

        /*Atributo que irá armazenar o numero da residencia
        e logo abaixo seus métodos Get e Set*/
        private var _numResidencia:int;
        public function get NumResidencia():int
        {
            return _numResidencia
        }
        public function set NumResidencia(value:int):void
        {
            _numResidencia = value;
        }
    }
}


Só um comentário: O Flex não suporta overloads de construtor, portanto cada classe  deve ter um e somente um construtor.

Agora, iremos criar a nossa classe chamada Pessoa. Vamos seguir o mesmo procedimento da criação da classe Endereco , ou seja, cliquem com o botão direito sobre a pasta classes e New – ActionScript Class, na janela que irá se abrir, altere somente a propriedade nome para Pessoa.

Nessa classe iremos armazenar as seguintes informações:  Nome, idade e endereço. Portanto clique duas vezes na classe Pessoa e adicione o seguinte código:

/*Caminho onde se localiza o arquivo*/
package classes
{
    /*Declaração da classe*/
    public class Pessoa
    {
        /*Construtor da classe com parametros*/
        public function Pessoa(pNomePessoa:String, pIdadePessoa:int, pEndereco:Endereco)
        {
            this._nomePessoa = pNomePessoa;
            this._idadePessoa = pIdadePessoa;
            this._enderecoPessoa = pEndereco;
        }

        /*Atributo que irá armazenar o nome da pessoa
        e logo abaixo seus métodos Get e Set*/
        private var _nomePessoa:String;
        public function get NomePessoa():String
        {
            return _nomePessoa
        }
        public function set NomePessoa(value:String):void
        {
            _nomePessoa = value;
        }

        /*Atributo que irá armazenar a idade da pessoa
        e logo abaixo seus métodos Get e Set*/
        private var _idadePessoa:int;
        public function get IdadePessoa():int
        {
            return _idadePessoa
        }
        public function set IdadePessoa(value:int):void
        {
            _idadePessoa = value;
        }

        /*Atributo que irá armazenar o endereço da pessoa
        e logo abaixo seus métodos Get e Set*/
        private var _enderecoPessoa:Endereco;
        public function get EnderecoPessoa():Endereco
        {
            return _enderecoPessoa
        }
        public function set EnderecoPessoa(value:Endereco):void
        {
            _enderecoPessoa = value;
        }

    }
}


Pronto, nossas classes já estão criadas. Agora finalmente vamos programar as nossas LabelFunction.
Clique duas vezes no arquivo Functions.mxml e coloque o seguinte código:


    layout="absolute" creationComplete="{initApp();}"
    xmlns:classes="classes.*">
    
                 import mx.controls.dataGridClasses.DataGridColumn;
        import mx.collections.ArrayCollection;
        import classes.Endereco;
        import classes.Pessoa;

        /*Esse ArrayList, será a fonte de dados para a nossa Grid*/
        [Bindable]
        private var _lstPessoas:ArrayCollection = new ArrayCollection()

        /*Aqui estamos criando objetos que serão armazenados na array
        criada anteriormente. Esse função é chamada no creationComplete
        da nossa aplicação*/
        private function initApp():void
        {
            var endereco1:Endereco = new Endereco("Rua Nicaragua",87);
            var pessoa1:Pessoa = new Pessoa("Caio Acca",20,endereco1);

            var endereco2:Endereco = new Endereco("Rua Elidio Santos",50);
            var pessoa2:Pessoa = new Pessoa("João da Silva",47,endereco2);

            var endereco3:Endereco = new Endereco("Avenida Alameda",708);
            var pessoa3:Pessoa = new Pessoa("Pedro dos Santos",34,endereco3);

            var endereco4:Endereco = new Endereco("Rua dos Aples",455)
            var pessoa4:Pessoa = new Pessoa("Maria Aparecida",22,endereco4)

            var endereco5:Endereco = new Endereco("Rua dos Gnomos",22)
            var pessoa5:Pessoa = new Pessoa("Bento da Silva",99,endereco5)

            /*Adiciona os itens no array*/
           _lstPessoas.addItem(pessoa1);
            _lstPessoas.addItem(pessoa2);
            _lstPessoas.addItem(pessoa3);
            _lstPessoas.addItem(pessoa4);
            _lstPessoas.addItem(pessoa5);

            /*Passamos para o Provider da nossa Grid, o array carregado
            com os objetos*/
            dgPessoas.dataProvider = _lstPessoas;
        }

        /*Essas são as LabelFunction, repare que elas recebem dois parametros,
        1* --> Recebe o Object, ou seja, o objeto que é aquela linha
        do DataGrid
        2* --> Recebe o DataGridColumn, ou seja, a coluna em que essa
        LabelFunction está agindo

        Elas sempre irão retornar uma String, pois será o texto exibido
        na coluna.

        Pelo codigo var "obj:Pessoa = row as Pessoa;" crio uma variavel
        com as mesmas informações da linha da coluna. A partir disso acesso
        as propriedades desse objeto montando a String que irá retornar*/

        private function labelFunctionMostraSomenteRua(row:Object, column:DataGridColumn):String
        {
            var obj:Pessoa = row as Pessoa;
            return obj.EnderecoPessoa.NomeRua;
        }

        private function labelFunctionMostraSomenteNumero(row:Object, column:DataGridColumn):String
        {
            var obj:Pessoa = row as Pessoa;
            return obj.EnderecoPessoa.NumResidencia.toString();
        }

        private function labelFunctionMostraRuaENumero(row:Object, column:DataGridColumn):String
        {
            var obj:Pessoa = row as Pessoa;
            return obj.EnderecoPessoa.NomeRua + " - " +obj.EnderecoPessoa.NumResidencia;
        }

        private function labelFunctionMostraNumeroERua(row:Object, column:DataGridColumn):String
        {
            var obj:Pessoa = row as Pessoa;
            return obj.EnderecoPessoa.NumResidencia + " - " +obj.EnderecoPessoa.NomeRua;
        }

        private function cmbLabelFunctionChange(evt:Event):void
        {
            switch((evt.target as ComboBox).selectedIndex)
            {
                case 0:
                {
                    colunaEndereco.labelFunction = labelFunctionMostraSomenteRua;
                    break;
                }
                case 1:
                {
                    colunaEndereco.labelFunction = labelFunctionMostraSomenteNumero;
                    break;
                }
                case 2:
                {
                    colunaEndereco.labelFunction = labelFunctionMostraRuaENumero;
                    break;
                }
                case 3:
                {
                    colunaEndereco.labelFunction = labelFunctionMostraNumeroERua;
                    break;
            }
        }

        (dgPessoas.dataProvider as ArrayCollection).refresh();
        }

        ]]>
    




    
        
                     dataField="IdadePessoa" headerText="Idade"/>
                     dataField="EnderecoPessoa.NomeRua" headerText="Endereço"
            labelFunction="labelFunctionMostraSomenteRua" width="200"/>
    





    
        Exibir Somente Rua
        Exibir Somente Número
        Exibir Rua e Número
        Exibir Número e Rua
    




Pronto,explicando agora:
A primeira coisa que acontece quando nossa aplicação se inicia é criar os objetos que irão carregar o nosso DataGrid, para isso chamamos  a função initApp .
Foram criadas 5 funções que irão ser nossas LabelFunction
  • labelFunctionMostraSomenteRua
  • labelFunctionMostraSomenteNumero
  • labelFunctionMostraRuaENumero
  • labelFunctionMostraNumeroERua

Cada função retornará uma String diferente, fiz isso porque quero mostrar para vocês o funcionamento delas. Abaixo do DataGrid existe um ComboBox por onde vocês escolherão o tipo de LabelFunction que irá “entrar em ação”, portanto existe uma função chamada cmbLabelFunctionChange que é disparada quando é alterado a seleção do combo e dentro dessa função faço um estrutura switch que pela opção selecionado eu altero a LabelFunction pelo código:
colunaEndereco.labelFunction = NOME_LABELFUNCTION


No Flex temos duas formas de dizer para a coluna qual campo do objeto ela irá exibir:
1 -> Setando a propriedade dataField da coluna com o nome da propriedade do objeto que irá ser exibido, porém se a propriedade estive dentro de uma cadeia de objetos, por exemplo:a informação que iremos exibir está dentro de um objeto 2 que por sua vez objeto 1, não irá funcionar(daí temos que usar a opção 2).
2 -> Utilizando a LabelFunction.

E logo após isso faço um refresh no data provider do DataGrid para a nova labelFunction funcionar:
(dgPessoas.dataProvider as ArrayCollection).refresh(); 


Nosso DataGrid possui tres colunas:
  • colunaNome
  • colunaIdade
  • colunaEndereco

Reparem o seguinte: a coluna colunaNome e colunaIdade não estão utilizando LabelFunction e sim setando na propriedaDe dataField a propriedade do objeto que será exibida. Isso pelo fato de que as propriedade que serão exibidas nessas colunas estão dentro do próprio objeto Pessoa, ao contrario das propriedades do endereço que estão no objeto Endereco que por sua vez estão dentro do objeto Pessoa. Aqui está o motivo de eu criar as classes Endereco e Pessoa no começo da coluna.

Isso não significa que vocês não poderão utilizar LabelFunction no caso das duas primeiras colunas, muito pelo contrário pois caso deseje formatá-las poderão usar esse recurso sem problemas.

As duas primeiras LabelFunction "labelFunctionMostraSomenteRua" e "labelFunctionMostraSomenteNumero" foram criadas devido ao fato de a propriedade que quero mostrar estar dentro de um objeto que por sua vez está dentro de outro objeto. Já as duas últimas "labelFunctionMostraRuaENumero" e "labelFunctionMostraNumeroERua" foram criadas por motivo de formatação

Bom acho que agora consegui explicar melhor o começo meio confuso =P !

Esse assunto é bem simples para ser visualizado, porém o conceito dele é meio chato.

Agora excutem a Aplicação e troquem a opção do Combo Box =) !!!! Nossa coluna de endereço irá mudar a exibição dos dados.

Qualquer dúvida pode perguntar ou me adicionem no MSN acca_15@hotmail.com

Abraços galera! Té a próxima!

Mais sobre: Flex Adobe LabelFunction
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo