Salve, pessoal!
Hoje vamos ver uma funcionalidade muito útil chamada “filterFunction”.
O FilterFunction permite criar e aplicar filtros de visões em ArrayCollection e XMLListCollection, fazendo como base alguns critérios de busca, o que é muito útil quando você quer filtrar e exibir, ao mesmo tempo, os dados contidos em algum armazenado ou componente como DataGrid, List etc. Esta função é muito semelhante a um Auto Complete.
Para demonstrar esta funcionalidade vou usar um exemplo real de projetos. Iremos, então, criar um componente de busca de contatos de agenda. O fluxo para isso é muito simples.
Vejamos o seguinte cenário:
A pizzaria Moda da Casa quer melhorar o atendimento dos pedidos de encomendas de pizza. Para isso, ela deseja que, enquanto o atendente fale com o cliente, ele possa fazer uma busca no sistema, por nome, pegar os dados pessoais do cliente.
Para atender a esta necessidade, iremos criar um simples componente de filtro. O componente será estruturado da seguinte maneira: terá um campo textinput para informar o nome do cliente e um data grid que terá todos os clientes da pizzaria; desta maneira, assim que o usuário digitar uma letra, o sistema fará um filtro no datagrid, exibindo apenas os clientes que tenham as letras digitadas no campo nome.
Então, mãos à obra.
Requisitos para o desenvolvimento do artigo:
- Ter Flex/Flash Builder ou outra IDE.
- Ter SDk 3 ou superior.
- Conhecimento em ActionScript e Mxml.
Nivel de dificuldade: 5
Passo 1: Criar um projeto Flex BuscadorCliente
Passo 2: Criar uma classe BuscadorCliente.mxml, que será nosso componente principal.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
creationComplete="onCreate()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var _dadosCliente:ArrayCollection;
/**
* Responsavel por instanciar o ArrayCollection e popular com clientes.
*/
private function onCreate():void {
_dadosCliente = new ArrayCollection();
_dadosCliente.addItem({nome: "Ana Maria", end: "Rua das uvas", fone: 5553323});
_dadosCliente.addItem({nome: "Ana Julia", end: "Rua melao", fone: 5551122});
_dadosCliente.addItem({nome: "Ana Paula", end: "Av das torres", fone: 5553654});
_dadosCliente.addItem({nome: "Maria Antonia", end: "Rua da roça", fone: 5557894});
_dadosCliente.addItem({nome: "Antonio da Silva", end: "Al. Joazeiro", fone: 5559658});
_dadosCliente.addItem({nome: "João Ferreira", end: "Rua do expedito", fone: 5551147});
_dadosCliente.addItem({nome: "Maria Gabriela", end: "Rua da bondade", fone: 5552258});
_dadosCliente.addItem({nome: "Ana Paula Beltrão", end: "Rua da experança", fone: 5553369});
_dadosCliente.addItem({nome: "João Paulo", end: "Av Flex", fone: 5554471});
_dadosCliente.addItem({nome: "Cecilia Duarte", end: "Av Java", fone: 5555528});
_dadosCliente.addItem({nome: "Carolina Alcantra", end: "Av Flash", fone: 5556639});
_dadosCliente.addItem({nome: "José da Silva", end: "Rua da solidão", fone: 5557741});
_dadosCliente.addItem({nome: "Juliana Correia", end: "Rua do chico", fone: 5558852});
_dadosCliente.addItem({nome: "Juliano Correia", end: "Rua da manha", fone: 5559963});
_dadosCliente.addItem({nome: "Aline Bressanim", end: "Rua da sacola", fone: 5551123});
_dadosCliente.addItem({nome: "Gisaleine Bressanim", end: "Rua do sem nome", fone: 5552231});
_dadosCliente.addItem({nome: "Rafael Korn", end: "Rua da tranquilidade", fone: 5553321});
_dadosCliente.addItem({nome: "Ozzy Osbourne", end: "Rua das laranjas", fone: 5554456});
_dadosCliente.addItem({nome: "Bob Marley", end: "Rua das palmeiras", fone: 5555564});
_dadosCliente.addItem({nome: "Vera Verão", end: "Rua Adobe", fone: 5556654});
_dadosCliente.addItem({nome: "Ricardo Rodrigues", end: "Rua Sun", fone: 5557789});
_dadosCliente.addItem({nome: "Luciano Augusto", end: "Av da solidao", fone: 5558897});
_dadosCliente.addItem({nome: "Josiane Milanes", end: "Av Paulo Mender", fone: 5559987});
_dadosCliente.addItem({nome: "Josi Padro", end: "Rua do Brasil", fone: 5559951});
_dadosCliente.addItem({nome: "Carmela Moraes", end: "Rua esqueci", fone: 5557753});
_dadosCliente.addItem({nome: "Patricia Aloha", end: "Rua Maranhão", fone: 5551159});
_dadosCliente.addItem({nome: "Patrik da Silveira", end: "Rua Chuva de Prego", fone: 5553357});
_dadosCliente.addItem({nome: "Marcelo Medeiros", end: "Rua das uvas", fone: 5559382});
_dadosCliente.addItem({nome: "Marcela Santos", end: "Rua das uvas", fone: 5551782});
_dadosCliente.filterFunction = encontreCliente;
_dadosCliente.refresh();
}
/**
* O objeto Item é cada item que esta no data provider do DataGrid.
* A cada vez que o usuario digita uma letra no campo nome esta função é executada
* e retorna true caso ache um item ou false no caso de o Item não corresponder ao filtro.
*/
private function encontreCliente(item:Object):Boolean {
var encontrado:Boolean = false;
/* Crieterio do Filtro */
if (item.nome.toLowerCase().search(tiNomeCliente.text.toLowerCase()) != -1)
return true;
else
return false;
}
]]>
</mx:Script>
<mx:Form width="100%" paddingLeft="0" paddingRight="0">
<mx:FormItem width="100%" label="Nome Cliente">
<mx:TextInput id="tiNomeCliente" width="50%" change="{_dadosCliente.refresh()}"/>
</mx:FormItem>
</mx:Form>
<mx:DataGrid width="100%" height="100%" dataProvider="{_dadosCliente}">
<mx:columns>
<mx:DataGridColumn headerText="Nome" dataField="nome"/>
<mx:DataGridColumn headerText="Endereço" dataField="end"/>
<mx:DataGridColumn headerText="Telefone" dataField="fone"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>Na classe acima, temos de prestar atenção nas seguintes partes:
- _dadosCliente.filterFunction = encontreCliente; Aqui é onde defino qual método de filter o ArrayCollection deve utilizar.
- _dadosCliente.refresh(); Toda vez que chamo o método refresh, este, por sua vez, irá chamar o nosso método de filtro.
- change=”{_dadosCliente.refresh()}” Toda vez que o usuário realizar alguma alteração nos dados do textinpu este irá chamar o método refresh que por sua vez irá executar a função de filtro.
- private function encontreCliente(item:Object):Boolean; Este é o método de filtro. O objeto Item é cada item que esta no ArrayCollection
A cada vez que o usuário digita uma letra no campo nome, esta função é executada e retorna true caso ache um item, ou false no caso de o Item não corresponder ao filtro. - [Bindable] private var _dadosCliente:ArrayCollection; É de suma importância definir a metadata Bindable no Array pois desta maneira todas alterações feitas neste o datagrid irá ouvir.
E é isso, pessoal, uma forma simples, fácil e rápida de aplicar filtro em listas. Qualquer duvida deixe seu comentário.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?