Flex: Filtrando dados em tempo real
Olá pessoal, hoje vou mostrar um exemplo muito bacana, que é de alta utilidade e bem simples de se fazer.
Trata-se de um filtro de dados que estão em um datagrid, e aproveitando este exemplo utilizei como “recheio” nomes de desenvolvedores (e feras!) que utilizam a tag #soudev, se você é programador/desenvolvedor e não conhece ainda a tag, sugiro primeiro que você entre no site #soudev e fique por dentro do que tá rolando e em segundo que siga esse pessoal que está recheando o datagrid, vai te agregar muita informação, conhecimento e ótimas amizades!
Bom, vamos lá, a aplicação está inteira comentada, aqui vou dar um simples passo a passo do que acontece.
Primeiramente, a propriedade filterFunction nos permite a criação e aplicação de filtros, tanto de dados em um ArrayCollection quanto de um XMLListCollection, é preciso que haja critérios para busca.
No exemplo, o ArrayCollection, com todos os nossos registros, é criado logo no início da aplicação, sendo ‘chamado’ na função init() por meio da propriedade creationComplete.
private function init():void{ _nomesDevs = new ArrayCollection(); _nomesDevs.addItem({name: "Vinícius Lourenço", twt:"@vilourenco", url:"http://www.twitter.com/vilourenco"}); _nomesDevs.addItem({name: "Raphael Franco", twt:"@raphaelfranco", url:"http://www.twitter.com/raphaelfranco"}); _nomesDevs.addItem({name: "Marcel Araújo", twt:"@marcelaraujo", url:"http://www.twitter.com/marcelaraujo"}); _nomesDevs.addItem({name: "Janderson F. Cardoso", twt:"@jandersonfc", url:"http://www.twitter.com/jandersonfc"}); _nomesDevs.addItem({name: "Marcos Paulo Bonatti", twt:"@mpbonatti", url:"http://www.twitter.com/mpbonatti"}); _nomesDevs.addItem({name: "Fábio Vedovelli", twt:"@vedovelli", url:"http://www.twitter.com/vedovelli"}); _nomesDevs.addItem({name: "Oswaldo Gusmao", twt:"@oswaldogusmao", url:"http://www.twitter.com/oswaldogusmao"}); _nomesDevs.addItem({name: "Beck Novaes", twt:"@becknovaes", url:"http://www.twitter.com/becknovaes"}); _nomesDevs.addItem({name: "Marcos Júnior", twt:"@marcosgugs", url:"http://www.twitter.com/marcosgugs"}); _nomesDevs.addItem({name: "Erko Bridee", twt:"@erkobridee", url:"http://www.twitter.com/erkobridee"}); _nomesDevs.addItem({name: "Pedro Cláudio", twt:"@pcsilva", url:"http://www.twitter.com/pcsilva"}); _nomesDevs.addItem({name: "Régis Mesquita", twt:"@regismesquita", url:"http://www.twitter.com/regismesquita"}); _nomesDevs.addItem({name: "Luis Messias", twt:"@luismessias", url:"http://www.twitter.com/luismessias"}); _nomesDevs.addItem({name: "Carlos Alan", twt:"@carlosalan", url:"http://www.twitter.com/carlosalan"}); _nomesDevs.addItem({name: "William Amaro", twt:"@williamaro", url:"http://www.twitter.com/williamaro"}); _nomesDevs.addItem({name: "Stefan Horochovec", twt:"@horochovec", url:"http://www.twitter.com/horochovec"}); _nomesDevs.addItem({name: "Willian Mano Araujo", twt:"@willianmano", url:"http://www.twitter.com/willianmano"}); _nomesDevs.addItem({name: "Fausto G. Cintra", twt:"@g0nc1n", url:"http://www.twitter.com/g0nc1n"}); _nomesDevs.addItem({name: "Rodrigo", twt:"@relesbao", url:"http://www.twitter.com/relesbao"}); _nomesDevs.filterFunction = buscaDev; _nomesDevs.refresh(); }
Logo após, indicamos pra propriedade filterFunction, que os critérios de busca estão na função especificada: buscaDev, e atualizamos o datagrid.
_nomesDevs.filterFunction = buscaDev; _nomesDevs.refresh()
Já na função buscaDev, os dados são tratados como caixa baixa, ou seja, as strings estão minúsculas (método: toLowerCase()), e o que é digitado no textInput é procurado no item name do datagrid, e quando encontrado é retornado true, caso contrário false.
private function buscaDev(item:Object):Boolean { if (item.name.toLowerCase().search(nomeDev.text.toLowerCase()) != -1) return true; else return false; }
Na parte MXML da aplicação, apenas indicamos no datagrid que os dados virão do ArrayCollection, pela propriedade: dataProvider (dataProvider=”{_nomesDevs}”).
E já no campo de busca, quando é digitado alguma letra, o textInput atualiza o ArrayCollection com a propriedade change (change=”{_nomesDevs.refresh()}”).
<mx:DataGrid id="dg1" x="18" y="63" width="464" height="276" dataProvider="{_nomesDevs}" click="DataGridLink(event)" toolTip="Clique para ir para o perfil"> <mx:columns> <mx:DataGridColumn headerText="Nome" dataField="name"/> <mx:DataGridColumn headerText="Twitter" dataField="twt"/> </mx:columns> </mx:DataGrid> <mx:TextInput x="170" y="22" id="nomeDev" change="{_nomesDevs.refresh()}"/> <mx:Label x="94" y="24" text="Buscar Dev:"/> <mx:Label x="223.5" y="347" text="#soudev"/>
Simples e muito útil.
Clique aqui para acessar o exemplo, o código-fonte está aberto, veja e baixe o exemplo, que está inteiramente comentado.
Espero que seja de utilidade pra você, e em caso de dúvidas, por favor, sinalize aqui nos comentários!!
Boa semana e forte abraço!
Ta mandando bem em rapaz.. Parabens ai soorte sucesso e força pra nos #soudev
Muito bom, estou baixando o fonte e vou brincar um pouco. Obrigado pelo tutorial.
Boa cara, ótimo exemplo… muito útil mesmo! Continue assim que a comunidade #soudev só tem a agradecer! Abraço mano
Parabéns Vini, a comunidade #soudev agradece!
ótimo exemplo fera, parabens
antes desse exemplo juro que faria uma estrutura de repetição 
aprendi algo hoje, obrigado fera e parabens pelos conteúdos gerados no seu blog.
Cumps. #soudev
belíssimo post cara… muito útil…
só lembrando que pode adicionar filtros pros outros itens do arraycollection… adicionando um if mudando apenas o item.name para item.twt
parabéns…
Oswaldo, Rodrigo, Marcos, Carlos, Janderson e Willian.
Eu que agradeço a todos vocês, e fico muito feliz que estejam gostando!!
Muito Obrigado!
#soudev
Abraços!!
Excelente dica, hoje precisei usar algo do gênero no meu primeiro projeto em Flex e lembrei dessa sua dica.
Parabéns!