Populando um combobox com Adobe Flex Builder 3.0, PHP e Mysql

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Veja neste artigo como popular um combobox em uma aplicação Flex com dados oriundos de um banco de dados Mysql.

Crie um projeto chamado DevTeste na IDE Flex Builder. Na página principal do projeto, arraste dois componentes para a área da página, no modo design. Nomeie os dois combos para CbxUF e CbxCidade. O primeiro combo irá receber de nosso banco de dados Mysql, a lista de unidades federativas do Brasil.Essa lista vira no formato xml e o combo ira ser alimentado por esses dados, idem para a lista de cidades. A idéia é que ao escolhermos a UF, o combo cidade exibirá apenas as cidades da UF selecionada.

Devemos iniciar o trabalho criando no banco de dados duas tabelas: Cidades e UF(unidade federativa), ambas com suas chaves primárias que estabelecem a diferenciação entre cada registro no banco. Após a criação das tabelas realizaremos os inserts com os dados das cidades e estados do país.

O segundo passo é a criação de um arquivo php que irá trazer os dados de cada tabela individualmente. O primeiro arquivo criado é o load_uf.php , ele buscará no banco de dados a relação de todas as UF’s em ordem alfabética.O arquivo load_uf.php após realizar a busca no banco retorna um XML com as informações da tabela de UF.A busca retorna o código da UF e a sigla em nós XML.

Listagem 1: O código php que gera o xml:

if ($result)
  {
     /* xml result */
     $xml = XMLHeader() . "";
     while ($row = mysql_fetch_assoc($result))
     {
       $v_cd_uf                       =    $row['cd_uf'];
       $v_ds_uf_sigla              =    $row['ds_uf_sigla'];
        $node = "" ;
       $xml = $xml . $node;    
 }    $xml = $xml . "" ;

Após a execução desse arquivo obtemos um retorno assim:

Listagem 2: XML gerado

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

A segunda parte é irmos até o flex e criarmos um projeto, dentro deste projeto iremos criar pastas para organizarmos o projeto, com os nomes classes(cidades e uf) e ws .Clicando com o botão direito do mouse na pasta UF( criada dentro de classes) iremos criar uma nova ActionScript Class, daremos o nome de UFData. Dentro desta classe iremos atribuir os métodos para carregar os dados que retornam no formato XML.Para isso fazemos o import da classe flash.xml.XMLNode do Flex e criamos o método doLoadFromXML que recebe como parâmetro um nó XML. O Código do método é:

Listagem 3: Método doLoadFromXML

public function doLoadFromXML(loNode:XMLNode):void
{
this.cd_uf = loNode.attributes.cd_uf;
	this.ds_uf_sigla= loNode.attributes.ds_uf_sigla;
}

Iremos obter do XML o cd_uf e ds_uf_sigla, para isso criamos antes no arquivo UFData as variáveis cd_uf e ds_uf_sigla, da seguinte forma:

Listagem 4: Variáveis para receber valores do XML

public var cd_uf:String;
public var ds_uf_sigla:String;

Já possuímos a classe uf criada, fazemos o mesmo para a classe cidade.

O passo seguinte é criarmos um serviço que consumirá o xml retornado , isso é feito com a criação de um componente no flex o wsUF. O componente é criado e damos um tamanho de 10px de largura e 10px de altura apenas para podermos manipula-lo depois de pronto.Dentro do wsUF iremos usar a tag que informa que sua execução será após um evento do tipo onExecute. Usamos a tag para informarmos que o componente criado é do tipo HTTPService e seu retorno é em xml.Dentro do componente criamos o import das classes adicionais e da classe UFData. Criamos também uma variável FoList que receberá um array com os dados retornados, colocamos a palavra [Bindable] para garantir que essa variável possa ser acessada com atualização de seu conteúdo.Criamos o método que irá permitir a exibição dos dados do XML:

Listagem 5: Método OnResultUFRead

private function OnResultUFRead(event:ResultEvent):void
{
	var lcXML:String = event.result.toString();			
	/* pede o arquivo xml */
	var loXML:XMLDocument = new XMLDocument(lcXML)			
	/* colecao */
	var loData:classes.UF.UFData = null;			
	/* remove os dados anteriores */
	this.FoList.removeAll();			
	/* carregar o xml */
	for each (var loNode:XMLNode in loXML.childNodes)
	{
		if (loNode.nodeName == "all")
		{
			for each (var loItem:XMLNode in loNode.childNodes)
			{
				loData = new UFData(); 			                             	                                 
loData.doLoadFromXML(loItem);					                                    
this.FoList.addItem(loData);
			}
		}
	}			
	var loEvent:Event = new Event("OnExecute");
	this.dispatchEvent(loEvent);
}

E por fim criaremos o método que usa o arquivo load_uf.php.

Listagem 6: Método doLoadUf

public function doLoadUf():void
{
	var params:Object = {};// esta variável esta vazia, pois não iremos //passar parâmetros ao php para exibir as UF.	  			   
	this.srvUFRead.method="POST";
	this.srvUFRead.url=Util.GetBasePath()+ "load_uf.php" ;
	this.srvUFRead.send(params);
}

Agora criamos um combo no projeto e denominamos de cbxUF, arrastamos o componente criado wsUF, no modo design do flex, para dentro de nosso projeto, esse componente pode ser visualizado na pasta customs , na aba de componentes quando estamos visualizando no modo design do flex. Nomeamos o wsUF, como “webUF”.

Vamos até o cbxUf e informarmos a propriedade DataProvider como “{webUF.Folist}” e a propriedade labelField como “ds_uf_sigla”, isso fará o combo receber a sigla dos estados.

Para que o combo seja carregado, iremos criar um método e que será disparado quando o evento de carregar a aplicação se iniciar.A aplicação possui um evento creationcomplete, que é executado no instante final da aplicação, quando ela é construída no browser.Com a ajuda do método OncreationComplete () ,que possui o código a seguir:

Listagem 6: Mètodo OncreationComplete

private function OncreationComplete():void
{
webUf.doLoadUf();				
}

Colocamos o método OncreationComplete na propriedade CreationComplete da aplicação.Com isso ao ser carregada a aplicação o método será executado e a lista de UF’s será exibida no combo cbxUF.

Já possuímos as siglas dos estados sendo exibidas, o próximo passo é exibir as cidades correspondentes aos estados selecionados.Para isso criamos a classe cidades, com o campo que queremos que seja exibido, no caso ,o campo ds_cidade_nome (coluna do banco).Criamos um componente HTTPService, igual ao wsUF, com exceção que iremos passar parâmetros , para que o PHP vá ao banco e selecione a cidade de acordo com o cd_uf que é a chave estrangeira na coluna cidade .

O código no componente wsCidades , terá o método doLoadCidades(lccd_uf:String) que possui como parâmetro o cd_uf.Segue o método:

Listagem 7: Método doLoadCidades

public function doLoadCidades(lccd_uf:String):void
{
var params:Object = {};		  	
params["cd_uf"]         = lccd_uf ;		  			   
 	this.srvCidadesRead.method="POST";
 	this.srvCidadesRead.url=Util.GetBasePath()+ "load_cidades.php" ;
 	this.srvCidadesRead.send(params);
}

Os demais métodos serão iguais ao do wsUF, com exceção do nomes das classes de importação , que para o wsCidades será classes.cidades.CidadesData.

Feito o wsCidades, vamos a aplicação principal e no modo Design, vamos a paleta de componentes e na pasta Customs, arrastamos o wsCidades, para dentro de nossa aplicação principal.No componete combo colocamos o dataprovider com o nome do wsCidades, no meu caso nomeei de webCidades e adicionamos o ponto para pegar a variável Folist que retorna, o código ficaria assim: dataProvider="{webCidade.FoList}" e a propriedade labelfield do combo(propriedade labelfield exibe o que queremos que o usuário selecione ) ficará assim: labelField="ds_cidade_nome".

Agora precisamos criar um método na aplicação principal que irá controlar a execução do wsCidade, para isso chamei de OnChange, pois na troca de UF , o combo Cidades se atualiza pelo evento onChange do combo UF.Segue o código:

Listagem 8: Evento OnChange do combo UF

private function OnChange():void
{
	var lcuf:String = (cbxUF.selectedItem as UFData).cd_uf;
	webCidade.doLoadCidades(lcuf);
}

Na primeira linha entre parênteses do método OnChange, criei uma variável que recebe do combo UF ,do item selecionado que é do tipo da classe UFData a propriedade cd_uf que alimentara na segunda linha, o parâmetro do webCidade . isso fará o php receber o parâmetro cd_uf e realizar a carga do xml com os dados do banco referente ao UF Selecionado.

Por fim para executar tudo isso, informe dentro de classes, a biblioteca Util, o path da sua aplicação para que ao compilar ele localize os arquivos php e sua aplicação funcione. Dúvidas sobre o arquivo Utils, contacte-me por email: josedarci_rodrigues@msn.com.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?