Artigos PHP Populando um combobox com Adobe Flex Builder 3.0, PHP e 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.