Flex – Pesquisa utilizando filtros

Neste post irei ensinar uma das formas de implementar filtragem de dados em pesquisa utilizando a propriedade filterFunction da classe ArrayCollection. A aplicação apresentada é bem simples de ser entendida e pode ser aprimorada facilmente.

Criando a aplicação

Crie uma nova aplicação: File –> New –> MXML application e escolha um nome de sua preferência. Apague seu conteúdo e cole o seguinte código no arquivo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">

 <mx:Panel x="129" y="67" width="555" height="389" layout="absolute" title="Filtragem por Nome">
     <mx:DataGrid id="dataGridPessoas" x="10" y="77" width="518" height="234"/>
     <mx:Label x="10" y="37" text="Nome"/>
     <mx:TextInput id="campo_pesquisar" x="62" y="35"/>
     <mx:Button x="230" y="35" label="Filtrar" click="pesquisar();"/>
     <mx:Button x="325" y="35" label="Exibir tudo" click="exibirTudo();"/>
 </mx:Panel>

 <mx:Script>
     <![CDATA[
     import mx.collections.ArrayCollection;

     [Bindable]
     public var pessoas : ArrayCollection = new ArrayCollection([
         {Nome : "Sérgio Fantin", Apelido : "Serjão", Cidade : "Maringá"},
         {Nome : "Mariana Ortega", Apelido : "Mary", Cidade : "Maringá"},
         {Nome : "Maria da Silva", Apelido : "Maria", Cidade : "São Paulo"},
         {Nome : "José dos Santos", Apelido : "Zé", Cidade : "Sarandi"}]);

     public function init() : void{
         dataGridPessoas.dataProvider = this.pessoas;
     }

     public function pesquisar() : void {
         pessoas.filterFunction = filtroNome;
         pessoas.refresh();
     }

     public function filtroNome(pessoa_nome : Object) : Boolean {
         return pessoa_nome.Nome.substr(0, campo_pesquisar.length) == campo_pesquisar.text;
     }

     public function exibirTudo() : void {
         pessoas.filterFunction = retornaTrue;
         pessoas.refresh();
     }

     public function retornaTrue(dado : Object) : Boolean {
         return true;
     }
  ]]>

 </mx:Script>
</mx:Application>

Explicando o código

  • Criei uma variável bindable pessoa do tipo ArrayCollection e fiz a inicialização da variável na mesma linha;
  • Assim que a aplicação é inicializada eu populo o dataGridPessoas com os dados da minha variável pessoa através da chamada init();
  • O método pesquisar() faz com que a variável pessoa receba o retorno do método filtroNome() através da propriedade filterFunction presente na classe ArrayCollection;

Resultado

filtro

Até o próximo post!



Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s