Artigos PHP Como enviar email com Flex e PHP

Neste artigo será explicado de forma bem simples, como enviar email em uma aplicação Flex, com uso de um arquivo PHP.

Em primeiríssimo lugar iremos criar um arquivo php para testar o envio de email, segue o script comentado:

Listagem 1: Arquivo PHP utilizado


<?php
 //Esta função serve para adicionar aspas duplas quando não existir
 function Param($loParam)
  {
    if (isset($loParam))
    {
      return $loParam;
    }
    else
    {
      return "";
    }
  }

  // variáveis nome, email e mensagem sendo decodificadas para utf-8 e // recebidas o seu valor pelo método POST que o flex irá utilizar.
  $v_nome               = utf8_decode(Param($_POST["nome"]));
  $v_email              = utf8_decode(Param($_POST["email"]));
  $v_mensagem           = utf8_decode(Param($_POST["mensagem"]));
// pequena validação do conteúdo para não enviar nada vazio.
  if(empty($v_nome)) {
	echo "Informe seu nome";
	}
  if(empty($v_email)) {
	echo "Informe seu email";
	}
	if(empty($v_mensagem)) {
	echo "Digite sua mensagem";
	}
	else { // se não tiver nada vazio tudo vai sendo reunido para 
// envio .
			$adicional = "Mensagem enviada por um visitante do site:\n\n";
			$adicional .= "Nome: $v_nome \n";
			$adicional .= "Email: $v_email\n";
			$adicional .= "Mensagem: $v_mensagem\n";
// a função ‘mail’ do php é a que realiza o envio, para isso ela //necessita de 3 parâmetros como email destinatário, titulo e a //mensagem que foi concatenada na variável $adicional. 
			mail("jose.rodrigues@jdcondominios.com.br", "Email de visitante", $adicional);
			echo "Mensagem enviada!";
		}

?>

Podemos criar um pequeno formulário em HTML para teste do arquivo php:

Listagem 2: Arquivo HTML para testar o envio do email


<html>
<head><title>Formulário de envio de email</title></head>
<body>
	<form action="enviaMail.php" method="POST">
	Nome:<input type="text" name="nome"><br>
	Email:<input type="text" name="email"><br>
	Mensagem:<input type="text" name="mensagem"><br>
	<input type="submit" name="enviar" value="Enviar!">
	</form>
</body>
</html>

Após verificarmos que o php realmente envia o email e também valida o envio, partiremos para a parte do Flex propriamente dita.

Criaremos inicialmente uma aplicação chamada Mail, no Flex, iniciando um novo projeto. O caminho para isso é File > New > Flex Project.

Na caixa de seleção que surge, nomeie o seu projeto e pronto.

Para melhorar a organização, criaremos pastas dentro da pasta “src”, clicando com o botão direito do mouse sobre esta pasta e escolhendo: “src” > New > Folder. Criamos a pasta ‘Classes’, a pasta ‘ws’ e a pasta ‘Componentes’.

Dentro da pasta Classes, iremos criar algumas classes que são bastante úteis nos projetos: MyEventTypes, MySession, StringHelper, Util e WindowEvent.

Segue o fonte comentado da Classe Util:

Listagem 3: Classe Util


package classes
{
	import flash.display.DisplayObject;	
	import mx.controls.Alert;
	import mx.core.IFlexDisplayObject;
	import mx.managers.PopUpManager;
	import mx.rpc.http.HTTPService;
	import mx.formatters.DateFormatter;
	import mx.formatters.NumberFormatter;	



	
	public class Util
	{
		
		
		public function Util()
		{
		}
		// Este método emite uma mensagem na tela
		static public function ShowMessage(lcMsg:String): void
		{
			Alert.show(lcMsg);
		}
		// Este método fecha uma janela modal
		static public function CloseWindow(Obj:IFlexDisplayObject): void
		{
			PopUpManager.removePopUp(Obj);
		}
		//Metodo desenha uma janela modal na tela.
		public function ShowModal(loWindow:IFlexDisplayObject, loParent: DisplayObject): void
		{
			PopUpManager.addPopUp(loWindow, loParent, true);
			PopUpManager.centerPopUp(loWindow);
		}
		
		public function Show(loWindow:IFlexDisplayObject, loParent: DisplayObject): void
		{
			PopUpManager.addPopUp(loWindow, loParent, false);
			PopUpManager.centerPopUp(loWindow);
		}
		
// O método GetBasePath se refere ao caminho ou url do meu projeto 
// onde irei colocar o arquivo php;
		static public function GetBasePath():String
		{
			return "http://www.jdcondominios.com.br/ ";
		}
		
		static public function doRefresh(loService:HTTPService):void
		{
			loService.disconnect();
			loService.logout();
		}
		
				
		
		public static function StringReplaceAll( source:String, find:String, replacement:String ) : String
		{
    		return source.split( find ).join( replacement );
		}
		
			}
		
	
	}

A classe Util possui métodos importantes na aplicação para fechar uma janela, informar o path e também emitir um alerta na tela e abrir uma janela modal.

Vamos criar dentro da pasta ws o componente wsEmail, segue o código:

Listagem 4: Componente wsEmail


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="10" height="10">
// a tag Metadata possui o evento do tipo Event nomeado com OnExecute
	<mx:Metadata>
		[Event(name="OnExecute")]
	</mx:Metadata>
	// a tag HttpService realiza o trabalho de envio ao php
	<mx:HTTPService id="srvEmailSend"
		fault="OnFaultEvent(event)"
		resultFormat="xml">
	</mx:HTTPService>
	
	<mx:Script>
		<![CDATA[
			
			import classes.Util;

			import mx.rpc.events.FaultEvent;
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;
			
		
	// Se recebermos um erro, sera emitido com ajuda desse método
		
		private function OnFaultEvent(event:FaultEvent): void
		{
			Util.ShowMessage("Erro! " + event.message);
		}  
	// Este método envia o email com uso dos parametros
		public function doSendEmail(lcnome:String, lcemail:String, lcmensagem:String):void
		{
			var params:Object = {};
		  	
		  // devemos colocar o mesmo nome que o php ira receber!
		  	params["nome"]          = lcnome ;
		  	params["email"]         = lcemail ;
		  	params["mensagem"]      = lcmensagem ;
// informamos o método, a url e enviamos os parametros ao serviço
		  	this.srvEmailSend.method="POST";
		  	this.srvEmailSend.url=Util.GetBasePath()+ "enviaMail.php" ;
		  	this.srvEmailSend.send(params);
		}
		
		
		
		]]>
	</mx:Script>
	
</mx:Canvas>

Agora vamos à pasta Componentes e criamos um novo componente: Componentes > New > MXML Component. Daremos um nome para este componente, neste caso será FormEmail, uma alusão ao formulário de email, que será a janela modal que será aberta na tela do usuário, onde ele digitará sua mensagem para enviar via email com a ajuda do PHP.

Iremos colocar o tamanho de 800 x 600 para esta janela, dentro iremos colocar um componente nativo do Flex, o panel e iremos maximizar a altura e largura deste panel para o valor de 100% e as cordenadas x e y para 0, fazendo com que o panel fique similar ao componente criado e perfeitamente maximizado dentro de nosso FormEmail.

O próximo passo é incluirmos dois labels: Nome e Email e os botões: Sair, Enviar e Limpar na nossa interface de envio de mensagens.

Arrastamos também dois componentes TextInput para o nome e email e um componente RichText que será a caixa onde o usuário irá digitar sua mensagem.

Feitos estes passos iremos programar dentro de nosso componente FormEmail, segue o código fonte:

Listagem 5: Componente FormEmail


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="800" height="600" backgroundColor="#FFFDFD" xmlns:ns1="ws.*">
	<mx:Panel x="0" y="0" width="100%" height="100%" layout="absolute" id="pnlEmail">
		<mx:Button x="722" y="10" label="Sair" click="Sair()" id="btnSair"/>
		<mx:Label x="10" y="71" text="Nome:"/>
		<mx:Label x="10" y="125" text="Email:"/>
		<mx:TextInput x="60" y="69" width="450" id="edtNome"/>
		<mx:TextInput x="58" y="123" width="452" id="edtEmail"/>
		<mx:RichTextEditor x="10" y="183" title="Mensagem:" width="760" id="edtMensagem">
		</mx:RichTextEditor>
		<mx:Button x="698" y="505" label="ENVIAR" id="btnSendMail" click="SendEmail()"/>
		<mx:Button x="618" y="505" label="LIMPAR" id="btnClear" click="ClearMail()"/>
		<ns1:wsEmail x="670" y="155" id="webEmail">
		</ns1:wsEmail>
	</mx:Panel>
// na tagf Script colocamos as nossas funções
	<mx:Script>
		<![CDATA[
			import classes.Util;
			import classes.StringHelper;
// Sair é responsável por fechar a janela, colocamos o nome do método // no botão Sair , no evento click
			private function Sair():void
			{
				Util.CloseWindow(this);
			}
// Aqui criamos a validação para não mandarmos nada vazio para o php			
		private function doValidaEnvio():Boolean
			{
			if(StringHelper.IsEmpty(edtNome.text)){
				Util.ShowMessage("Informe o seu nome!");
				return false;
			}
			if(StringHelper.IsEmpty(edtEmail.text)) {
				Util.ShowMessage("informe seu email!");
				return false;
			}
			if(StringHelper.IsEmpty(edtMensagem.text)) {
				Util.ShowMessage("Escreva sua mensagem !!!");
				return false;
			}
			return true;
		}
		// esta função realiza o envio se passer pela validação
		private function SendEmail(): void
			{
				if (!doValidaEnvio())
				{
					return;
				}
				else
				{
					EnviaEmail();
				}
			}
			//Esta função consome o service que criamos , antes //temos que arrasta-lo para qualquer parte do formulário(wsEmail)e //nomeamos o mesmo para webEmail.
			private function EnviaEmail():void
			{
				webEmail.doSendEmail(edtNome.text, edtEmail.text, edtMensagem.text);
				OnAfterSend();
			}
//ClearMail realiza a limpeza dos campos digitados.Sua chama é no //click do botão Limpar			
			private function ClearMail():void
			{
				edtNome.text = "";
				edtEmail.text = ""; 
				edtMensagem.text = "";
				
			}
		// OnAfterSend é colocado no evento OnExecute do webEmail	
		private function OnAfterSend():void
		{
			ClearMail();
			Util.ShowMessage("Email enviado com sucesso!");
			Sair();
		}
		]]>
	</mx:Script>
</mx:Canvas>
Selecionando o componente arrastado para nomeá-lo de webEmail

Figura 1: Selecionando o componente arrastado para nomeá-lo de webEmail

Componente wsEmail arrastado para dentro do Panel

Figura 2: Componente wsEmail arrastado para dentro do Panell

Por fim, iremos criar um botão “Fale Conosco” e iremos programar o evento Click do botão para chamar a janela modal que exibe o formulário de email criado.

O código para executar a chamada do formulário de email é:

Listagem 6: Código para chamar o formulário de email


private function EnviaEmail():void
{

// Criamos uma variavel que é um novo Formulário
var loMail = new FormEmail();
// invocamos dentro da classe util, o método ShowModal para //referenciar o objeto criado.
new Util().ShowModal(loMail, this);
}

No botão, colocamos o método no evento click: EnviaEmail() e o botão ao ser clicado irá chamar o formulário de email.

Com estes passos finalizamos o envio de email pelo Flex com o auxilio do PHP. Podemos ver este exemplo funcionando em http://www.jdcondominios.com.br/index.html clicando em Fale Conosco.