Flex – Combos aninhados Estados/Cidades

Combos aninhados são usados frequentemente em aplicações. O objetivo deste post é ensinar uma das formas de implementar combos aninhados onde cada estado está relacionado com várias cidades.

Criando a aplicação

  1. Crie uma nova aplicação: File –> New –> MXML application e escolha um nome de sua preferência. Apague seu conteúdo e cole o seguinte código no arquivo:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel x="368" y="170" width="352" height="131" layout="absolute" title="Combos aninhados - Cidade e Estado">
   <mx:Label x="21" y="10" text="Escolha um Estado"/>
   <mx:Label x="21" y="36" text="Escolha uma Cidade"/>
   <mx:ComboBox id="combo_estados" dataProvider="{estados}" change="filtraCidadeByEstado();" x="162" y="8" />
   <mx:ComboBox id="combo_cidades" dataProvider="{cidades_sp}" x="162" y="34" />
</mx:Panel>

<mx:Array id="estados">
   <mx:String>Paraná</mx:String> <!-- selectedIndex == 0 -->
   <mx:String>Santa Catarina</mx:String>
   <mx:String>São Paulo</mx:String>
</mx:Array>

<mx:Array id="cidades_pr">
   <mx:String>Maringá</mx:String>
   <mx:String>Londrina</mx:String>
   <mx:String>Curitiba</mx:String>
</mx:Array>

<mx:Array id="cidades_sc">
   <mx:String>Florianópolis</mx:String>
   <mx:String>Bombinhas</mx:String>
</mx:Array>

<mx:Array id="cidades_sp">
   <mx:String>São Paulo</mx:String>
   <mx:String>Guarujá</mx:String>
   <mx:String>Santo Andre</mx:String>
</mx:Array>

 <mx:Script>
 <![CDATA[
       private function filtraCidadeByEstado() : void {
            if(combo_estados.selectedIndex == 0){
                 combo_cidades.dataProvider = cidades_pr;
            } else if(combo_estados.selectedIndex == 1){
                 combo_cidades.dataProvider = cidades_sc;
            } else if(combo_estados.selectedIndex == 2){
                 combo_cidades.dataProvider = cidades_sp;
            }
      }
 ]]>
 </mx:Script>
</mx:Application>

Explicando o código

Como podem ver criei um componente <mx:Panel> e dentro dele inseri os dois combos que identifiquei como id=”combo_estados” e id=”combo_cidades”:

<mx:ComboBox id="combo_estados" dataProvider="{estados}" change="filtraCidadeByEstado();" x="162" y="8" />
<mx:ComboBox id="combo_cidades" dataProvider="{cidades_sp}" x="162" y="34" />
  1. Um dos pontos importantes do código está aqui dataProvider=”{estados}” que é o comando que faz o combo ser populado pelo pelo array de estados identificado por estados.
  2. Outro ponto importante é o comando change=”filtraCidadeByEstado();” que invoca a função que faz a checagem das cidades relacionadas ao estado selecionado no combo.

Resultado

combosAninhados

Com certeza não é a maneira mais elegante de se fazer combos aninhados, mas já é um bom ponto de partida para implementações mais elegantes.

Espero ter ajudado!


3 Comentários on “Flex – Combos aninhados Estados/Cidades”

  1. Entao… assim Blz.. mas estou com o seguinte problema

    eu preencho uma combo com os estados (uf,id) carregados do MySql, dai quando selecionar um UF ele tem q carrega em outra Combo ou DataGrid mesmo, soh as cidades que possuem aquele UF..

    estou tentando resolver isso a 2 dias ja..

  2. juniorsatanas disse:

    Meu primeiro crud control C + Control V eheheh valeu mano !


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s