Download de arquivos com Flex e PHP

Em uma situação hipotética, uma aplicação Flex recebe currículos de usuários que se cadastram e fazem o upload de seus currículos para uma pasta específica e previamente com permissão a receber estes arquivos.

No formulário de upload, além do envio do arquivo em si, o usuário faz um pequeno cadastro, com os seguintes campos:Nome, cpf, email,telefone que garante algumas informações para consulta dos dados deste candidato.

Para receber os dados de cadastro de um candidato que submete seu currículo a esta aplicação, será criado um banco de dados com a tabela candidatos, com os seguintes campos:nome, cpf, e-mail,telefone e currículo.

O campo currículo é o campo responsável por armazenar no banco de dados o nome do arquivo que esta sendo submetido via upload pelo candidato através da aplicação.Em artigo anterior foi explicado como realizar o upload de arquivos com Flex e PHP, portanto avançaremos este passo.

Os próximos passos são:

1. Criação do script em PHP que traz os dados dos candidatos do nosso banco de dados;
2. Teste do script para verificar se os dados estão retornando no formato XML, para que esta aplicação possa consumi-los.
3. Criação do projeto Flex, com construção das classes necessárias para o funcionamento do projeto.

<?php

  include "conn.php";
  $link = getConnDB();

     $sql = 'select ca.idcandidato,
       ca.nome,
       ca.cpf,
       ca.curriculo,
       ca.data_envio,
       ca.email
       from candidatos ca      
       order by data_envio DESC ';	   
	   
	   // Perform Query
  $result = mysql_query($sql, $link);

  if ($result)
  {
     /* xml result */
     $xml = XMLHeader() . "<all>";

     while ($row = mysql_fetch_assoc($result))
     {
       $idcandidato           	 =    $row['idcandidato'];
	   $nome           	 =    utf8_decode($row['nome']);
	   $cpf           		 =    $row['cpf'];	  
	   $curriculo            	 =    $row['curriculo'];
	   $data_envio           =    $row['data_envio'];
	   $email            	 =    $row['email'];   
	   
	   $data_envio = date("d/m/Y H:i:s", strtotime($data_envio));	 
       
       $node = "<row" .
                       " idcandidato         = ".   QuotedStr( $idcandidato  ).
		   " nome                 = ".   QuotedStr( $nome         ).
		   " cpf                     = ".   QuotedStr( $cpf          ).
		   " curriculo             = ".   QuotedStr( $curriculo    ).
		   " data_envio          = ".   QuotedStr( $data_envio   ).
		   " email                  = ".   QuotedStr( $email        ).				   
                       "/>" ;
                       
                        $xml = $xml . $node;
     }

    $xml = $xml . "</all>" ;

    /* close statement */
    mysql_free_result($result);

    /* return result */
    echo $xml ;
  }

?>

O que o script load_curriculos.php faz é uma consulta no banco de dados para trazer os dados do candidatos ,ordenados por data de envio da atual para a mais antiga.Um XML é montado com cada linha retornada após a execução do script.

Teste do XML

O XML é construído da seguinte forma, neste caso é exibido os dados de um banco de dados com alguns currículos já cadastrados:

Após a checagem do script php e o retorno dos dados no formato xml o passo seguinte é a construção do projeto em Flex.

Novo projeto no Flex Builder

O projeto criado recebeu o nome de Novo, com a seguinte arquitetura em sua construção:

• Pasta assets – Pasta que contêm imagens relacionadas aos botões e ícones.
• Pasta classes – Pasta que armazena a classe candidatos do projeto.Algumas classes utilizadas em exemplos anteriores que são utilidades para diversos projetos estão neste local.
• Pasta ws - Pasta que acondiciona o componente que faz a troca de dados entre a aplicação e o servidor via script php.
• Pasta Componentes – Pasta que reúne os componentes criados para uso na aplicação.

A classe CandidatoData.as é a classe que armazena os dados do objeto candidato.

Segue seu escopo:

package classes.candidatos
{
	import flash.xml.XMLNode;
	public class CandidatoData
	{
		public var idcandidato:String;
		public var nome:String;
		public var cpf:String;
		public var curriculo:String;
		public var data_envio:String;
		public var email:String;
		
		public function CandidatoData()
		{
		}
		public function doLoadFromXML(loNode:XMLNode):void
		{
			this.idcandidato	= loNode.attributes.idcandidato;
			this.nome			= loNode.attributes.nome;
			this.cpf			= loNode.attributes.cpf;
			this.curriculo		= loNode.attributes.curriculo;
			this.data_envio		= loNode.attributes.data_envio;
			this.email			= loNode.attributes.email;
		}
		public function doLoadFormGrid(loItem:Object):void
		{
			this.idcandidato	= loItem["idcandidato"];
			this.nome			= loItem["nome"];
			this.cpf			= loItem["cpf"];
			this.curriculo		= loItem["curriculo"];
			this.data_envio		= loItem["data_envio"];
			this.email			= loItem["email"];
			
		}

	}
}

Os métodos doLoadFromXML() é o método que atribui o conteúdo do nó Xml a variável específica. Já o método doLoadFormGrid() é o método responsável para atribuir as propriedades do objeto candidato a suas respectivas variáveis.

Após a construção da classe que reúne as propriedades do objeto candidato, a aplicação necessita do componente responsável pela comunicação com o seu domínio/servidor para retornar os dados Xml que a aplicação vai consumir.

Antes de criarmos o componente ws, porém é necessário configurar o path , na classe Util:

static public function GetBasePath():String

{
	return "http://www.seudominio.com.br/";
}

Na função GetBasePath(), do tipo static, é inserido no formato string todo o caminho do domínio que vai armazenar o arquivo load_curriculos.php, se necessário um diretório basta acrescentá-lo, por exemplo se for organizar o servidor com uma pasta 'Scripts', o caminho completo deverá ser http://www.seudominio.com.br/Scripts/.

O componente wsCandidato é criado clicando com o botão direito na pasta ws e escolhendo New MXML Component.

Você pode usar um componente HTTPService Flex em conjunto com PHP e um sistema de gerenciamento de banco de dados SQL para exibir os resultados de uma consulta de banco de dados em um aplicativo Flex e inserir dados em um banco de dados.Você pode chamar uma página PHP com GET ou POST para realizar uma consulta de banco de dados. Você pode então formatar os dados do resultado da consulta em uma estrutura XML e retornar a estrutura XML para a aplicação Flex na resposta HTTP. Quando o resultado foi retornado para o aplicativo Flex, você pode exibir em um ou mais controles de interface do usuário conforme lhe convier.

No componente criado é inserido a variável Folist , que nada mais é que um array com uma coleção de dados retornados. Ao adicionar a metatag Bindable o compilador flex força a atualização desta variável, atualizando o seu valor a cada evento que lhe é solicitado.

[Bindable]

public var FoList:ArrayCollection = new ArrayCollection();

Ainda no componente wsCandidato o método doLoadCurriculos() é criado para carregar todos os currículos que retornam da execução do script load_curriculos.php.

public function doLoadCurriculos():void
{
	var params:Object = {};
	this.srvCandidatosRead.method="POST";
	this.srvCandidatosRead.url=Util.GetBasePath()+"load_curriculos.php";
	this.srvCandidatosRead.send(params);
}

Neste método que não necessita de parâmetros, ele faz uso do serviço criado srvCandidatosRead, com o método POST, para envio até o script da ação que faz executar o script php.

Finalizado o componente ws, o passo seguinte é a criação de uma grid que exibirá os dados retornados via HTTPService, no formato XML.

A grid possui a coluna Candidato, e-mail e CPF apenas, para facilitar a exibição.

Arrastamos no modo Design do Flex o componente wsCandidato e o colocamos em alguma área da aplicação, conforme a imagem:

Agora que o componente esta dentro da aplicação, o nomeamos na aba Flex Properties para o identificá-lo: webCandidatos.

Na sequência, em modo Source, é escrito o código que fará o carregamento dos dados:

<mx:Script>
	<![CDATA[
		import classes.Util;
		
		
		private function doAppComplete():void
		{
			webCandidatos.doLoadCurriculos();
		}
	]]>
</mx:Script>

O método doAppComplete() é void por não retornar nada em sua execução, onde sua função é de utilizar o componente wsCandidato, seu método doLoadCurriculos para consumir seus dados na Grid de currículos.

Seguindo com a aplicação, o datagrid de candidatos precisa consumir esses dados, sua propriedade DataProvider precisa ser configurada desta forma:

<mx:DataGrid width="780" id="dgCandidatos"dataProvider="{webCandidatos.FoList}">

As colunas da grid devem receber os campos que são retornados respectivamente:

<mx:columns>
	<mx:DataGridColumn headerText="Candidato" dataField="candidato"/>
	<mx:DataGridColumn headerText="Email" dataField="email"/>
	<mx:DataGridColumn headerText="CPF" dataField="cpf"/>
</mx:columns>

Após esta etapa, no início da aplicação deve-se definir o evento creation complete com a função doAppComplete(), isso fará com que a aplicação execute esta função, assim que for inicializada.

Já existe:

• Um arquivo PHP com uma consulta que retorna os dados em xml;
• Um projeto flex com a classe principal e seu componente ws e uma grid para exibir o retorno dos dados do componente.

Agora é necessário outro componente que quando o usuário realizar um clique na grid, ele será exibido com os dados do candidato selecionado, em uma janela Modal. Esse componente recebe o nome de downloadArquivo. Este componente é o responsável por realizar o donwload do arquivo(currículo do candidato). Para enviar os dados selecionados na grid:

<?xml version="1.0" encoding="utf-8"?>
<Contatos xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns:xsd="http://www.w3.org/2001/XMLSchema" />
private function SelecionaCv():void
{
	if(dgCandidatos.selectedItem == null)
	{
		Util.ShowMessage("Clique em um candidato para visualizar !");
		return;	
	}
	var locandi:CandidatoData = new CandidatoData();
	locandi.doLoadFormGrid(dgCandidatos.selectedItem);
	
	var loexibe:dowloadArquivo = new dowloadArquivo();
	loexibe.Fcidcandidato = locandi.idcandidato;
	loexibe.Fccpf = locandi.cpf;
	loexibe.Fccurriculo = locandi.curriculo;
	loexibe.Fcemail = locandi.email;
	loexibe.Fcnome	= locandi.nome;
	loexibe.FcData = locandi.data_envio;
	new Util().ShowModal(loexibe,this);
}

A função SelecionaCv() vai checar se um item foi selecionado, senão ele emite um alerta.

Uma variável nomeada de locandi é do tipo do componente criado e instanciado um novo componente. O método doLoadFormGrid da classe candidato é executado com o item selecionado da grid.

Após esse processo o objeto é construído e passado para variáveis Bindable no componente as propriedades do objeto selecionado na Grid. Isso fará com que as variáveis que estão no componente recebam essas propriedades do objeto candidato selecionado na Grid de candidatos.

Retornando ao datagrid, deve-se definir a propriedade doubleclickenabled="true" e doubleclick="SelecionaCv()".

Com este último passo, ao receber o duplo click na grid, em um objeto candidato selecionado, a janela modal é mostrada.

O botão Download Currículo realiza ao clicar, o download do arquivo que foi selecionado.

O arquivo retorna com seu nome original e basta salva-lo em um diretório específico.

Todo o progresso do download é monitorado e exibido:

Por enquanto é só, até o próximo artigo e bons estudos!