Home » 2008 » novembro » 17 » Buscando registros usando Like com E4X ou FilterFunction, faça sua escolha.

Buscando registros usando Like com E4X ou FilterFunction, faça sua escolha.

Publicado em 17.Nov.2008 por Marcus Nadai
Categorias: Flex

Semana passada tive que fazer um filtro em um datagrid que tinha como dataprovider um xml.

O filtro seria parecido com o like das queries SQL de consulta ao banco de dados. Fazendo a minha busca, encontrei duas opções para concluir essa tarefa: O filterFunction do XmlListCollection e o search do e4x.

As duas implementações são simples e interessantes. Falta testar o desempenho(deixo com vcs…hehehe)

Segue a aplicação implementando as duas soluções:

Seguem os fontes:

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
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    verticalAlign="middle" backgroundColor="white" verticalGap="20">

    <mx:Script>
        <![CDATA[
            private function filterFunc(item:Object):Boolean
            {
                return item.text().toUpperCase().indexOf(stateName.text.toUpperCase()) > -1;
            }

            private function filtrar():void
            {
                xmlListE4x.source = dp.country.state.(*.toUpperCase().search(stateName0.text.toUpperCase()) > -1);
            }

        ]]>
    </mx:Script>

    <mx:XML id="dp" source="countries_states.xml"/>

    <mx:XMLListCollection id="xmlListFilterFunc" source="{dp.country.state}" filterFunction="filterFunc" />

    <mx:XMLListCollection id="xmlListE4x" source="{dp.country.state}"/>

    <mx:Panel width="322" height="248" layout="absolute" title="Filtro usando Filer Function">
        <mx:Label text="Name:"  x="10" y="10"/>
        <mx:TextInput id="stateName" width="232" change="xmlListFilterFunc.refresh()"  x="60" y="10"/>
        <mx:DataGrid id="dataGrid" dataProvider="{xmlListFilterFunc}" x="10" y="38" width="282" height="140">
            <mx:columns>
                <mx:DataGridColumn id="codeCol" dataField="@code" headerText="Abbr:" width="60" />
                <mx:DataGridColumn id="nameCol" dataField="*" headerText="Name:" width="240" />
            </mx:columns>
        </mx:DataGrid>
        <mx:Label text="Filtered: Showing {xmlListFilterFunc.length} record(s)" visible="{stateName.text.length > 0}" x="10" y="186"/>
    </mx:Panel>

    <mx:Panel width="322" height="248" layout="absolute" title="Filtro usando Search do E4x">
        <mx:Label text="Name:"  x="10" y="10"/>
        <mx:TextInput id="stateName0" width="232" change="filtrar()"  x="60" y="10"/>
        <mx:DataGrid id="dataGrid0" dataProvider="{xmlListE4x}" x="10" y="38" width="282" height="140">
            <mx:columns>
                <mx:DataGridColumn id="codeCol0" dataField="@code" headerText="Abbr:" width="60" />
                <mx:DataGridColumn id="nameCol0" dataField="*" headerText="Name:" width="240" />
            </mx:columns>
        </mx:DataGrid>
        <mx:Label text="Filtered: Showing {xmlListE4x.length} record(s)" visible="{stateName0.text.length > 0}" x="10" y="186"/>
    </mx:Panel>

</mx:Application>

O XML usado no dataProvider:

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<?xml version="1.0" encoding="utf-8"?>
<countries>
    <!-- Taken from: http://canadaonline.about.com/library/bl/blpabb.htm -->
    <country name="Canada">
        <state code="AB">Alberta</state>
        <state code="BC">British Columbia</state>
        <state code="MB">Manitoba</state>
        <state code="NB">New Brunswick</state>
        <state code="NL">Newfoundland and Labrador</state>
        <state code="NT">Northwest Territories</state>
        <state code="NS">Nova Scotia</state>
        <state code="NU">Nunavut</state>
        <state code="ON">Ontario</state>
        <state code="PE">Prince Edward Island</state>
        <state code="QC">Quebec</state>
        <state code="SK">Saskatchewan</state>
        <state code="YT">Yukon Territory</state>
    </country>

    <!-- Taken from: http://www.usps.com/ncsc/lookups/usps_abbreviations.html -->
    <country name="United States of America">
        <state code="AL">Alabama</state>
        <state code="AK">Alaska</state>
        <state code="AS">American Samoa</state>
        <state code="AZ">Arizona</state>
        <state code="AR">Arkansas</state>
        <state code="CA">California</state>
        <state code="CO">Colorado</state>
        <state code="CT">Connecticut</state>
        <state code="DE">Delaware</state>
        <state code="DC">District of Columbia</state>
        <state code="FM">Federated States of Micronesia</state>
        <state code="FL">Florida</state>
        <state code="GA">Georgia</state>
        <state code="GU">Guam</state>
        <state code="HI">Hawaii</state>
        <state code="ID">Idaho</state>
        <state code="IL">Illinois</state>
        <state code="IN">Indiana</state>
        <state code="IA">Iowa</state>
        <state code="KS">Kansas</state>
        <state code="KY">Kentucky</state>
        <state code="LA">Louisiana</state>
        <state code="ME">Maine</state>
        <state code="MH">Marshall Islands</state>
        <state code="MD">Maryland</state>
        <state code="MA">Massachusetts</state>
        <state code="MI">Michigan</state>
        <state code="MN">Minnesota</state>
        <state code="MS">Mississippi</state>
        <state code="MO">Missouri</state>
        <state code="MT">Montana</state>
        <state code="NE">Nebraska</state>
        <state code="NV">Nevada</state>
        <state code="MP">Northern Mariana Islands</state>
        <state code="NC">North Carolina</state>
        <state code="ND">North Dakota</state>
        <state code="NH">New Hampshire</state>
        <state code="NJ">New Jersey</state>
        <state code="NM">New Mexico</state>
        <state code="NY">New York</state>
        <state code="OH">Ohio</state>
        <state code="OK">Oklahoma</state>
        <state code="OR">Oregon</state>
        <state code="PW">Palau</state>
        <state code="PA">Pennsylvania</state>
        <state code="PR">Puerto Rico</state>
        <state code="RI">Rhode Island</state>
        <state code="SC">South Carolina</state>
        <state code="SD">South Dakota</state>
        <state code="TN">Tennessee</state>
        <state code="TX">Texas</state>
        <state code="UT">Utah</state>
        <state code="VA">Virginia</state>
        <state code="VI">Virgin Islands</state>
        <state code="VT">Vermont</state>
        <state code="WA">Washington</state>
        <state code="WI">Wisconsin</state>
        <state code="WV">West Virginia</state>
        <state code="WY">Wyoming</state>
    </country>
</countries>

Em ambos os casos terá como resultado uma consulta semelhante ao like %…% do SQL.

No primeiro dataGrid é feito o filtro baseado no filterFunction, ao preencher o campo de texto é disparada a função filterFunc(item:Object):Boolean por meio do método xmlListFilterFunc.refresh(), retornando true somente para as linhas do xml que satisfazem a consulta. Ou seja, indexOf(..) > -1.

No segundo dataGrid é pelo E4X que fazemos a consulta. Para cada linha do xml é comparada com o texto digitado no campo. O search funciona igual à função indexOf da classe String. O intessante a observar neste segundo exemplo é que qualquer consulta feita por meio do texto do xml, ou seja, se vc tem como nó do xml <state code=”AB”>Alberta</state>  o texto é Alberta. Isso é representado no E4X por (*).

Qualquer dúvida será bem vinda.

Abraços

Um comentário

  1. Phrix em 28.mai.09 às 9:43 am

    Olá,
    Parabéns pela dica, casou certinho com o que eu preciso porém estou com a seguinte dificuldade recebo minha XML de um HTTPService que alimenta meu dataGrid porém se eu coloco o HTTPService alimentando o <mx:XML recebo o seguinte erro:
    Problem finding external XML:

Deixe Seu Comentário