Filtro de dados em “real-time”
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"?><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"<br /> creationComplete="onCreate()"><br /><br /> <mx:Script><br /> <![CDATA[<br /> import mx.collections.ArrayCollection;<br /><br /> [Bindable]<br /> private var _dadosCliente:ArrayCollection;<br /><br /> /**<br /> * Responsavel por instanciar o ArrayCollection e popular com clientes.<br /> */<br /> private function onCreate():void {<br /> _dadosCliente = new ArrayCollection();<br /> <br /> _dadosCliente.addItem({nome: "Ana Maria", end: "Rua das uvas", fone: 5553323});<br /> _dadosCliente.addItem({nome: "Ana Julia", end: "Rua melao", fone: 5551122});<br /> _dadosCliente.addItem({nome: "Ana Paula", end: "Av das torres", fone: 5553654});<br /> _dadosCliente.addItem({nome: "Maria Antonia", end: "Rua da roça", fone: 5557894});<br /> _dadosCliente.addItem({nome: "Antonio da Silva", end: "Al. Joazeiro", fone: 5559658});<br /> _dadosCliente.addItem({nome: "João Ferreira", end: "Rua do expedito", fone: 5551147});<br /> _dadosCliente.addItem({nome: "Maria Gabriela", end: "Rua da bondade", fone: 5552258});<br /> _dadosCliente.addItem({nome: "Ana Paula Beltrão", end: "Rua da experança", fone: 5553369});<br /> _dadosCliente.addItem({nome: "João Paulo", end: "Av Flex", fone: 5554471});<br /> _dadosCliente.addItem({nome: "Cecilia Duarte", end: "Av Java", fone: 5555528});<br /> _dadosCliente.addItem({nome: "Carolina Alcantra", end: "Av Flash", fone: 5556639});<br /> _dadosCliente.addItem({nome: "José da Silva", end: "Rua da solidão", fone: 5557741});<br /> _dadosCliente.addItem({nome: "Juliana Correia", end: "Rua do chico", fone: 5558852});<br /> _dadosCliente.addItem({nome: "Juliano Correia", end: "Rua da manha", fone: 5559963});<br /> _dadosCliente.addItem({nome: "Aline Bressanim", end: "Rua da sacola", fone: 5551123});<br /> _dadosCliente.addItem({nome: "Gisaleine Bressanim", end: "Rua do sem nome", fone: 5552231});<br /> _dadosCliente.addItem({nome: "Rafael Korn", end: "Rua da tranquilidade", fone: 5553321});<br /> _dadosCliente.addItem({nome: "Ozzy Osbourne", end: "Rua das laranjas", fone: 5554456});<br /> _dadosCliente.addItem({nome: "Bob Marley", end: "Rua das palmeiras", fone: 5555564});<br /> _dadosCliente.addItem({nome: "Vera Verão", end: "Rua Adobe", fone: 5556654});<br /> _dadosCliente.addItem({nome: "Ricardo Rodrigues", end: "Rua Sun", fone: 5557789});<br /> _dadosCliente.addItem({nome: "Luciano Augusto", end: "Av da solidao", fone: 5558897});<br /> _dadosCliente.addItem({nome: "Josiane Milanes", end: "Av Paulo Mender", fone: 5559987});<br /> _dadosCliente.addItem({nome: "Josi Padro", end: "Rua do Brasil", fone: 5559951});<br /> _dadosCliente.addItem({nome: "Carmela Moraes", end: "Rua esqueci", fone: 5557753});<br /> _dadosCliente.addItem({nome: "Patricia Aloha", end: "Rua Maranhão", fone: 5551159});<br /> _dadosCliente.addItem({nome: "Patrik da Silveira", end: "Rua Chuva de Prego", fone: 5553357});<br /> _dadosCliente.addItem({nome: "Marcelo Medeiros", end: "Rua das uvas", fone: 5559382});<br /> _dadosCliente.addItem({nome: "Marcela Santos", end: "Rua das uvas", fone: 5551782});<br /> <br /> _dadosCliente.filterFunction = encontreCliente;<br /> _dadosCliente.refresh();<br /> }<br /><br /> /**<br /> * O objeto Item é cada item que esta no data provider do DataGrid. <br /> * A cada vez que o usuario digita uma letra no campo nome esta função é executada<br /> * e retorna true caso ache um item ou false no caso de o Item não corresponder ao filtro.<br /> */<br /> private function encontreCliente(item:Object):Boolean {<br /> var encontrado:Boolean = false;<br /> <br /> /* Crieterio do Filtro */<br /> if (item.nome.toLowerCase().search(tiNomeCliente.text.toLowerCase()) != -1)<br /> return true;<br /> else <br /> return false;<br /> }<br /> ]]><br /> </mx:Script><br /> <br /> <mx:Form width="100%" paddingLeft="0" paddingRight="0"><br /> <mx:FormItem width="100%" label="Nome Cliente"><br /> <mx:TextInput id="tiNomeCliente" width="50%" change="{_dadosCliente.refresh()}"/><br /> </mx:FormItem><br /> </mx:Form><br /><br /> <mx:DataGrid width="100%" height="100%" dataProvider="{_dadosCliente}"><br /> <mx:columns><br /> <mx:DataGridColumn headerText="Nome" dataField="nome"/><br /> <mx:DataGridColumn headerText="Endereço" dataField="end"/><br /> <mx:DataGridColumn headerText="Telefone" dataField="fone"/><br /> </mx:columns><br /> </mx:DataGrid><br /><br /></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.
trabalha a desde 2005 em desenvolvimento e integração de sistemas WEB JEE. Começou a trabalhar com desenvolvimento de aplicações RIA Flex/Air em 2007. Atualmente é analista de sistemas pela JExperts, participa de fóruns e listas de discussões como Anddev, Adroid.org, GUJ, FlexDev, FloripaFlex e PortalAndroid.
