Exemplo: FilterFunction Flex
Salve salve pessoas e pessoinhas =)
Voltando a ativa… e agora pra ficar!! hehehe
Hoje quero explor um exemplo usando o FilterFunction com o Flex…. é algo bem interessante e que facilita a vida da galera =)
O que faremos: Vamos criar um array e seta-lo como dataProvider em um grid…. e nos campos nome e email vamos escrevendo e o grid será filtrado automaticamente…. Jóia não?! hehe
Vamos lá então… farei o seguinte…. exponho o código e exmplido ele OK?
Mas como sempre eu digo… procurem evitar o Ctrl+C e Ctrl+V…. ele torna vcs burros! =D hehehe
MXML…
<mx:HBox verticalAlign="bottom">
<mx:FormItem label="Nome:">
<mx:TextInput id="txtNome" width="200" change="addFiltro()"/>
</mx:FormItem>
<mx:FormItem label="Email:">
<mx:TextInput id="txtEmail" width="200" change="addFiltro()"/>
</mx:FormItem>
</mx:HBox>
<mx:DataGrid width="100%" height="100%" id="dg" dataProvider="{listaNomeEmail}">
<mx:columns>
<mx:DataGridColumn headerText="Nome" dataField="nome"/>
<mx:DataGridColumn headerText="Email" dataField="email"/>
</mx:columns>
</mx:DataGrid>
Essa parte é o MXML…
Vejam que criei dois formItems com TextInput, txtNome e txtEmail… no change deles há uma função chamada addFiltro() onde será executado o filtro… o change irá fazer com que a função seja executada toda vez que houver uma alteração no TextInput, ou seja, toda vez que vc acrescentar ou apagar um caracter.
No DataGrid ta tudo OK não é?! DataProvider listaNomeEmail (ArrayCollection) … dataField nome e email para mostrar os dados…. bem…. é isso….
Aaaaa…. no Application(não pus o código) eu mudei o layout para “vertical”…. pois o Grid está 100%, se ficar absolute, fica por cima dos TextInputs ^^
ACTION SCRIPT (ACS)…
var listaNomeEmail:ArrayCollection = new ArrayCollection([
{nome:"Guilherme Sjlender", email:"guisjlender@gmail.com.br"},
{nome:"Guilherme Silva", email:"guilherme@email.com.br"},
{nome:"Tiago Sjlender", email:"tiago@email.com.br"},
{nome:"Taniele Berwian", email:"tani@email.com.br"},
{nome:"Rodrigo Sjlender", email:"rodrigo@email.com.br"},
{nome:"Valdemar Sjlender", email:"vald@email.com.br"},
{nome:"Luciana Berté Sjlender", email:"luciana@email.com.br"},
{nome:"Ana Luiza Berté", email:"anaana@email.com.br"}]);
private function addFiltro():void
{
listaNomeEmail.filterFunction = regraFiltro;
listaNomeEmail.refresh();
dg.dataProvider = listaNomeEmail;
}
private function regraFiltro(objeto:Object):Boolean
{
return ((objeto.nome.toUpperCase().indexOf(txtNome.text.toUpperCase()) >= 0)
&& (objeto.email.toUpperCase().indexOf(txtEmail.text.toUpperCase()) >= 0));
}
Aqui que o bicho pega! hehehe
Bem… vamos as explicações =)
1º Começamos criando um arrayCollection com os dados de algumas pessoas (eu e minha familia! heahaehea) e seus respectivos emails ^^
2º Criamos a função addFiltro()… Nessa função pegamos a lista listaNomeEmail e dizemos que ela vai ter uma função FilterFunction cujo nome é regraFiltro:
listaNomeEmail.filterFunction = regraFiltro;
Depois de executado essa função “regraFiltro” damos um refresh() na lista e readicionamos ela ao nosso DataGrid.
3º Criamos a função regraFiltro(objeto:Object)… essa função é onde vai ser feito as regras de negócio para dizer se “tal” registro será mostrado ou não…. o parâmetro dessa função (objeto:Object) recebe cada objeto da lista e assim verifica um por um retornando true ou false para ele aparecer ou não… entenderam?
Nessa situação verificamos se o txtNome(txtNome.text.toUpperCase()) está contido(.indexOf) no nome do objeto(objeto.nome.toUpperCase()) e(&&) se txtEmail(txtEmail.text.toUpperCase()) está contido(.indexOf) no email do objeto(objeto.email.toUpperCase()) caso essas duas condições retornem 0 ou mais caracteres ( >= 0 ) o retorno será true, senão, será false…
Compreenderam a situação? Dizemos ao filterFunction da lista qual é a função que irá fazer as regras de validações, damos um refresh e readicionamos para o DataGrid… não tem erro ^^
É isso ai pessoal…. boa sorte nos estudos ai e agora em diante vou ir postando mais direto alguns exemplos legais ok?
Até mais
GuiSjlender 8D
