Filtro de dados em “real-time”

Colocado por Fabiel Prestes na(s) categoria(s): Flex, Flex Fast Code em 09 5th, 2009 | 1 Comentário

Salve pessoal,

Neste artigo irei mostrar a vocês uma funcionalidade muito util e bem conhecida por alguns e um tanto desconhecida para outros é o “filterFunction”.

O FilterFunction permite criar e aplicar filtros de visões em ArrayCollection e XMLListCollection fazendo como base alguns criterios de busca. Este é muito útil quando você quer filtar e exibir ao mesmo tempo os dados contidos em algum armazenado ou componente como DataGrid, List, etc. Esta função é muito semelhante á um Auto Complete.

Para demonstrar esta fucionalidade irei demonstra-la em um exemplo real de projetos.
Iremos então criar um componente de busca de contatos de agenda o fluxo para este é muito simples.

Vejamos o seguinte senário:

A pizzaria Moda da Casa quer melhorar o atendimento dos pedidos de encomendas de pizza, para isto ela deseja enquanto o atendente fala com o cliente ele possa fazer uma busca no sistema pelo nome do cliente para pegar os dados pessoais do mesmo.
Para atender 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 maneria assim que o usuario digitar uma letra o sistema irá fazer um filtro no datagrid exibindo apenas os clientes que tenham as letras digitadas no campo nome.

Então mãos-a-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 o qual 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 pestar a atenção nas seguintes partes:

1. _dadosCliente.filterFunction = encontreCliente; Aqui é onde defino qual metodo de filter o ArrayCollection deve utilizar.
2. _dadosCliente.refresh(); Toda vez que chamo o metodo refresh este por sua vez irá chamar o nosso metodo de filtro.
3. change=”{_dadosCliente.refresh()}” Toda vez que o usuario realizar alguma alteração nos dados do textinpu este irá chamar o metodo refresh que por sua vez irá executar a função de filtro.
4. private function encontreCliente(item:Object):Boolean; Este é o metodo de filtro. O objeto Item é cada item que esta no ArrayCollection
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.
5. [Bindable] private var _dadosCliente:ArrayCollection; É de suma importancia definir a metadata Bindable no Array pois desta maneira todas alterções feita neste o datagrid irá ouvir.

E é isso pessoal uma forma simples, facil e rapida de aplicar filtro em listas. Qualquer duvida com relação deixem seu comentário.

Codigo Fonte

Veja o post original no blog do autor aqui!