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 = " " ;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.
