Notícias

#4 Flex How to: Como filtrar coleção de dados

Filtrar é uma boa pedida para quem tem uma coleção de dados na sua tela e não gostaria de ficar chamando novamente seus serviços remotos com novos selects baseados em parametros passados. O que na verdade é uma má prática.
Filtrar um ArrayCollection,XMLCollection,Array,XML é sem dúvida ótimo começo, e deixa o aplicativo mais leve e rápido de executar na máquena do usuário.

Então como fazer?
Vamos usar o FilterFunction, que é uma propriedade pública e herdade pelo ArrayCollection e XMLListCollection da classe ListCollectionView.

Imagine que temos os seguinte exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :ArrayCollection id="clientes" filterFunction="filtrarSexo">
		<mx :Object nome="Claudio Cavalcanti" sexo="m"/>
		<mx :Object nome="Miguel de Souza"  sexo="m" />
		<mx :Object nome="Daniela Moura" sexo="f" />
		<mx :Object nome="Fernando Bolk" sexo="m"/>
		<mx :Object nome="Carla Maduro" sexo="f" />
		<mx :Object nome="Maria Silva" sexo="f"/>
		<mx :Object nome="Marcelo Siqueira" sexo="m"/>
		<mx :Object nome="Florice Carneiro" sexo="f"/>
</mx>
 
	<mx :DataGrid dataProvider="{clientes}" x="40" y="74" width="510" height="268">
		</mx><mx :columns>
			<mx :DataGridColumn headerText="Nome" dataField="nome"/>
			<mx :DataGridColumn headerText="Sexo" dataField="sexo"/>
		</mx>
 
 
	<mx :HBox x="40" y="46">
		<mx :RadioButtonGroup id="filtrarGrupo"/>
		<mx :Label text="Filtrar por sexo:"/>
		<mx :RadioButton label="Feminino" groupName="filtrarGrupo"/>
		<mx :RadioButton label="Masculino" groupName="filtrarGrupo"/>
	</mx>

Lembrando, Toda vez que você aplicar filtros em sua coleção você deve chamar primeiro a coleção para depois filtrar(óbvio), porém se você está usando o LCDS ou paginando os resultados, você deve aplicar primeiro o filtro para depois chamar a coleção.

Agora só aplicar o filterFunction a coleção, eu posso aplicar quantos filtros forem necessários.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
		import mx.controls.Alert;
			public function filtrarF(item:Object):Object{
				switch(String(item.sexo)){
						case 'f':
								return true;
								break;
				}
				return false;
			}
			public function filtrarM(item:Object):Object{
				switch(String(item.sexo)){
						case 'm':
								return true;
								break;
				}
				return false;
			}
			public function filtrar():void{
					if(filtrarGrupo.selection.label == 'Feminino'){
							clientes.filterFunction = filtrarF;
							clientes.refresh();
					}else{
							clientes.filterFunction = filtrarM;
							clientes.refresh();
					}
			}

Quando se aplica o filtro você não está alterando em nada sua coleção de dados, eles apenas estão sendo filtrados, a coleção pega do lado do servidor continuará inalterada.

Código final do exemplo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
			public function filtrarF(item:Object):Object{
				switch(String(item.sexo)){
						case 'f':
								return true;
								break;
				}
				return false;
			}
			public function filtrarM(item:Object):Object{
				switch(String(item.sexo)){
						case 'm':
								return true;
								break;
				}
				return false;
			}
			public function filtrar():void{
					if(filtrarGrupo.selection.label == 'Feminino'){
							clientes.filterFunction = filtrarF;
							clientes.refresh();
					}else{
							clientes.filterFunction = filtrarM;
							clientes.refresh();
					}
			}
 
	]]>
</mx>
<mx :ArrayCollection id="clientes">
		<mx :Object nome="Claudio Cavalcanti" sexo="m"/>
		<mx :Object nome="Miguel de Souza"  sexo="m" />
		<mx :Object nome="Daniela Moura" sexo="f" />
		<mx :Object nome="Fernando Bolk" sexo="m"/>
		<mx :Object nome="Carla Maduro" sexo="f" />
		<mx :Object nome="Maria Silva" sexo="f"/>
		<mx :Object nome="Marcelo Siqueira" sexo="m"/>
		<mx :Object nome="Florice Carneiro" sexo="f"/>
</mx>
 
	<mx :DataGrid dataProvider="{clientes}" x="40" y="74" width="510" height="268">
		</mx><mx :columns>
			<mx :DataGridColumn headerText="Nome" dataField="nome"/>
			<mx :DataGridColumn headerText="Sexo" dataField="sexo"/>
		</mx>
 
 
	<mx :HBox x="40" y="46">
		<mx :RadioButtonGroup change="filtrar()" id="filtrarGrupo"/>
		<mx :Label text="Filtrar por sexo:"/>
		<mx :RadioButton label="Feminino" groupName="filtrarGrupo"/>
		<mx :RadioButton label="Masculino" groupName="filtrarGrupo"/>
	</mx>