Enviando e-mail com Flex e .net
[Atualizado em 05/04/2010]
Quando criei esse tutorial pela primeira vez, fiz apenas a parte de envio de e-mail não expliquei como se faz a integração com a aplicação .net pois não achei necessário explicar novamente sendo que já tinha postada links a respeito. Decidi adicionar a esse artigo essa parte da integração também para que não fique muito confuso.
Utilizarei para esse tutorial: Visual Studio 2008, Adobe Flex 3 e FluorineFx.dll.
Parte 1: Criando aplicação de envio de e-mail com o Visual Studio, e preparando a aplicação .net para a integração.
1.1 – Para fazer a integração de uma aplicação .net com uma aplicação Flex, utilizaremos o framework FluorineFx que é open source. Faça o download do FluorineFx aqui, não tem mistério a instalação é o básico de sempre: “Next, Next e Finish”.
1.2 – Após instalar o FlourineFx vamos criar nossa estrutura de pastas, crie uma pasta em um diretoria qualquer chamada “FlexEnviarEmail”, dentro dessa pasta crie outras três pastas chamadas: “FlexFonte”, “AspNetFonte” e “publicado”. As pastas “FlexFonte” e “AspNetFonte” serão os diretorias das aplicações do Flex e do AspNet, a pasta “publicado” será a pasta onde publicaremos a aplicação.
1.3 – Abra o VS e vá em File > New > Web Site…, escolha a pasta que você criou chamada “AspNetFonte” e “Language” C#. Renome-e o arquivo “Default.aspx” para “Gateway.aspx”. Ainda no projeto do .net, vamos agora adicionar a referencia ao framework FluorineFx, clique com o botão direito em cima da solução e em seguida clique em “Add reference…”.
Se você instalou corretamente o framework FlourineFx, você vai ver na lista de referencias na aba .Net o framework.
Selecione o “FlourineFx for .NET Framwork 2.0”, caso sua aplicação não tenha a pasta BIN, a mesma será criada para ser adicionada essas dll’s.
Precisamos também registrar o framework FluorineFx no web.config. Então abra o web.config e adicione o seguinte código dentro do nod “configSections”:
<sectionGroup name="fluorinefx">
<section name="settings" type="FluorineFx.Configuration.XmlConfigurator, FluorineFx"/>
</sectionGroup>
Agora dentro do nod “httpModules”:
<httpModules> <add name="FluorineGateway" type="FluorineFx.FluorineGateway, FluorineFx"/> </httpModules>
Muito bem, a parte de configuração do framework FluorineFx já está pronta, agora vamos fazer a aplicação para enviar o e-mail.
1.4 – Crie uma Classe chamada Email.cs (botão direito em cima do projeto > Add new item…), se o VS 2008 perguntar se você deseja criar a pasta App_Code e colocar a Classe dentro dela clique em sim. Adicione o código abaixo:
using FluorineFx;
using System.Net.Mail;
[RemotingService]
public class Email
{
#region --- ATRIBUTOS ---
private String nome;
public String Nome
{
get { return nome; }
set { nome = value; }
}
private String userMail;
public String UserMail
{
get { return userMail; }
set { userMail = value; }
}
private String assunto;
public String Assunto
{
get { return assunto; }
set { assunto = value; }
}
private String mensagem;
public String Mensagem
{
get { return mensagem; }
set { mensagem = value; }
}
#endregion
public Email()
{ }
#region --- MÉTODOS ---
/// <summary>
/// Envia o email.
/// </summary>
/// <returns>Retorna True caso dê tudo certo e false caso gere algum erro.</returns>
public void EnviarEmail(Email _email)
{
MailMessage message = new MailMessage();
SmtpClient client = new SmtpClient();
//E-mail do rementente
message.From = new MailAddress("email-remetente", "Remetente");
message.IsBodyHtml = true;
message.Body = "Nome: " + _email.nome + "<br />E-mail: " + _email.userMail + "<br />Assunto: " + _email.assunto + "<br />Mesagem: " + _email.mensagem;
message.Subject = _email.assunto;
//E-mail do destinatário
message.To.Add(new MailAddress("email-destinatario", "Destinatário"));
//E-mail e senha para enviar a mensagem
client.Credentials = new System.Net.NetworkCredential("email-remetente/envio", "senha-email");
//Número da porta:
client.Port = 25;
//Seu host para envio do e-mail
client.Host = "host";
client.Send(message);
message.Dispose();
message = null;
client = null;
}
#endregion
}
As configurações de para envio de e-mail (host, porta, e-mail de envio e senha) são configurações de cada um, então não quer dizer, por exemplo, que a porta é a 25 como está no código acima, isso depende das suas configurações. Precisamos importar a FluorineFx para usar o “[RemoteService]”. O [RemoteService] que se encontra em cima da declaração da classe, serve para dizermos para o FluorineFx que essa classe será acessada remotamente pelo Flex. Criamos as propriedades nome, mail, assunto e mensagem, que são informações que pegaremos no formulário da aplicação Flex e enviaremos por e-mail. O método EnviarEmail recebe um parâmetro que é um objeto da própria classe Email (Isso ficara mais claro na aplicação Flex) e envia o e-mail.
1.5 – Agora configure a pasta “AspNetFonte” no IIS, para isso basta você clicar com o botão direito na pasta “AspNetFonte” e na aba “Compartilhamento web” escolher a opção “Compartilhar essa pasta”, na opção “alias” (apelido) coloque flexmail. Caso não tenha a aba “Compartilhamento web”, significa que seu IIS não está instalado, veja como você pode instalá-lo por esse tutorial (aconselho a trabalhar com o IIS), se você não tiver o IIS instalado, pode fazer o seguinte: O VS tem tipo um IIS interno para rodar as suas aplicações, então quando você roda uma aplicação pelo VS (apertando o F5, por exemplo) ele gera um número de porta aleatório e roda aplicação nesse servidor próprio, então a url fica mais ou menos algo assim: “http://localhost:3845/AspNetFonte/Gateway.aspx”, então rode sua aplicação e anote a url gerado no browser pois vamos precisar dela na aplicação Flex.
Pronto, já criamos nossa classe que enviara o e-mail, agora vamos para o Flex.
Parte 2: Criando formulário para envio de e-mail no Flex.
2.1 – Abra o Flex, vá em File > New > Flex Project e selecione a pasta FlexFonte que você criou anteriormente, coloque um nome qualquer para o projeto (no caso eu coloquei o mesmo nome da pasta) e clique em finish. Crie uma pasta dentro da pasta src com o nome de classes, agora adicionamos uma arquivo ActionScript Class com o nome de Email dentro dessa pasta (botão direito na pasta classes > new > actionscript class). Essa classe precisa ter exatamente o mesmo nome da classe na aplicação .net (no caso Email), então ela deve se chamar “Email.as”. Adicione o código abaixo nessa classe:
package classes{
[RemoteClass(alias="Email")]
public class Email{
private var nome:String;
public function get Nome():String{
return nome;
}
public function set Nome(n:String):void{
this.nome = n;
}
private var mail:String;
public function get Mail():String{
return mail;
}
public function set Mail(m:String):void{
this.mail = m;
}
private var assunto:String;
public function get Assunto():String{
return assunto;
}
public function set Assunto(a:String):void{
this.assunto = a;
}
private var mensagem:String;
public function get Mensagem():String{
return mensagem;
}
public function set Mensagem(msg:String):void{
this.mensagem = msg;
}
public function Email(){
}
}
}
Assim como na classe da aplicação .net, no Flex também precisamos dizer qual é a classe remota que ele irá acessar, por isso inserimos o [RemoteClass(alias=”Email”)] no começo da classe. A classe “Email” que está setado no “alias=”, é a classe “Email.cs” da aplição .net. Note que até mesmo o nome das propriedades tem que ser o mesmo do que a classe “Email.cs”. O get e set do actionscript 3.0 é bem semelhando ao do .net como podemos reparar.
2.2 – Dentro do arquivo principal do Flex, adicione o código abaixo:
<mx:RemoteObject id="roMail" source="Email" destination="fluorine" showBusyCursor="true">
<mx:method name="EnviarEmail" result="{resultadoEnviar(event)}" fault="{falhaEnviar(event)}"/>
</mx:RemoteObject>
<mx:VBox height="384" width="300" horizontalCenter="0" verticalCenter="0">
<mx:TextInput id="txtNome" focusIn="removeTextoPadrao(this.txtNome)" focusOut="addTextoPadrao(this.txtNome)" text="Nome"/>
<mx:TextInput id="txtEmail" width="280" focusIn="removeTextoPadrao(this.txtEmail)" focusOut="addTextoPadrao(this.txtEmail)" text="E-mail"/>
<mx:ComboBox id="comboAssunto" creationComplete="preencheCombo()"></mx:ComboBox>
<mx:TextArea width="300" height="120" id="txtMensagem" focusIn="removeTextoPadraoTextArea(this.txtMensagem)" focusOut="addTextoPadraoTextArea(this.txtMensagem)" text="Mensagem"/>
<mx:Button label="Enviar" id="btnEnviar" click="enviarEmail(event)"/>
</mx:VBox>
O “mx:RemoteObject” serve para se conectar remotamente com a classe “Email.cs”, especificamos qual classe ele ira se conectar através da propriedade “source”. A propriedade “showBusyCursor=true” serve para que enquanto o RemoteObject estiver sendo executado será exibido um cursor de carregando (tipo a ampulheta do windows).
Na tag mx:Method dizemos qual o método iremos usar da classe “Email.cs” pela propriedade “name” (pode se ter varias tags mx:Method para os métodos da classe), a propriedade “result” indica qual função será executada caso dê tudo certo na execução do método da classe “Email.cs”, caso dê algo errado, será executada a função que está registrada na propriedade “fault” (criaremos essas funções mais a frente). Em alguns controles pode-se observar que existem funções ligadas aos eventos focusIn (evento disparado quando o focu está no controle) e focusOut (evento disparado quando o focu sai do controle), que veremos no próximo passo.
2.3 – Crie um bloco “mx:Script” logo acima do código que você adicionou anteriormente, depois adicione esse código ao script:
import mx.rpc.remoting.mxml.RemoteObject;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import classes.Email;
import mx.collections.ArrayCollection;
/********** EVENTOS DOS CONTROLES DO FORMULÁRIO **********/
//Preenche o combo box com as opções de assunto
private function preencheCombo():void{
var lista:ArrayCollection = new ArrayCollection();
lista.addItem("Selecione --");
lista.addItem("Dúvida");
lista.addItem("Sugestão");
lista.addItem("Reclamação");
comboAssunto.dataProvider = lista;
}
//Retira o texto padrão dos inputs nome e email
private function removeTextoPadrao(t:TextInput):void{
if (t.text == "Nome" || t.text == "E-mail")
t.text = "";
}
//Adiciona o texto padrão dos inputs nome e email
private function addTextoPadrao(t:TextInput):void{
if (t.id == "txtNome" && t.text == "")
t.text = "Nome";
else if (t.id == "txtEmail" && t.text == "")
t.text = "E-mail";
}
//Remove texto padrão do textarea
private function removeTextoPadraoTextArea(ta:TextArea):void{
if (ta.text == "Mensagem")
ta.text = "";
}
//Adiciona texto padrão do textarea
private function addTextoPadraoTextArea(ta:TextArea):void{
if (ta.text == "")
ta.text = "Mensagem";
}
//Volta com todos os textos padrões
private function textoPadrao():void{
txtNome.text = "Nome";
txtEmail.text = "E-mail";
txtMensagem.text = "Mensagem";
comboAssunto.selectedIndex = 0;
}
/********** FUNÇÕES DE CONECXÃO COM A APLICAÇÃO .NET **********/
//Função que é executada se ocorreu algum erro ao enviar o e-mail
private function falhaEnviar(evt:FaultEvent):void{
Alert.show("Ocorreu o seguinte erro ao tentar executar o método:\n" + evt.fault.message, "Erro");
}
//Função que é executada se não ocorreu erros no envio de e-mail
private function resultadoEnviar(evt:ResultEvent):void{
textoPadrao();
Alert.show("E-mail enviado com sucesso!");
}
//Função que é acionado com o clique do mouse
private function enviarEmail(evt:MouseEvent):void{
if (evt.type == MouseEvent.CLICK){
var email:Email = new Email;
email.Nome = txtNome.text;
email.Mail = txtEmail.text;
email.Assunto = comboAssunto.selectedLabel;
email.Mensagem = txtMensagem.text;
roMail.getOperation("EnviarEmail").send(email);
}
}
A função “preencheCombo” serve para preencher o comboBox assunto, com informações de um arrayCollection. As funções que seguem abaixo da função “preencheCombo” servem somente para retirar ou adicionar texto padrão nos inputs. A função “textoPadrao” serve para retornar os textos padrões para os inputs depois que o e-mail for enviado. A função “falhaEnviar” que recebe como parâmetro um “FaultEvet” é a função que será executada caso ocorra algum erro na execução do RemoteObject, e a função “resultadoEnviar” será disparada caso ocorra tudo bem, perceba que as duas funções simplesmente executam um “Alert” informando o que aconteceu.
A função “enviarEmail” é executada quando clicamos no botão “btnEnviar” (o evento clique chama a função enviarEmail) e dentro dessa função, criamos um objeto da classe “Email.as” e preenchemos os atributos com os valores do formulário. Para executar o método que está registrado no “roMail” (id do mx:RemoteObject), executamos o “getOperation” do “roMail” e passamos como parâmetro o nome do método registrado, em seguida executamos o send(). Como já sabemos, o método “EnviarEmail” da classe “Email.cs” espera um parâmetro do tipo “Email”, então no “send()” do “getOperation” passamos o objeto da classe “Email.as” que criamos com os dados do formulário(“.send(email)”). Caso o método “EnviarEmail” da classe “Email.cs” não esperasse nenhum parâmetro, bastava executar o “send()” sem parâmetros mesmo.
Parte 3: Configurando a aplicação Flex para se conectar com a aplicação .net.
3.1 – Clique com o botão direito na pasta src e selecione File > New > File, coloque o nome do arquivo de “services-config.xml”, é com esse arquivo que faremos o mapeamento das classes ActioScript com .Net/C#. Adicione o código abaixo nesse arquivo:
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="remoting-service"
class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="fluorine">
<channels>
<channel ref="my-amf"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="my-amf"
class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://localhost/flexmail/Gateway.aspx"
class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>
Se você configurou a aplicação .net no IIS, coloque a url da aplicação na opção “uri” do nod “endpoint” (como você pode observar, a url que está no código acima é uma url de uma aplicação que está configurada no IIS), caso você não esteja usando o IIS e sim o VS, então coloque a url gerada pelo VS (passo 1.5) e adicione no “uri” do nod “endpoint”. Agora clique com o botão direito em cima da aplicação Flex e clique em properties:
Na opção “Flex Compiler” adicione o texto “-services services-config.xml” no “Additional compiler arguments”:
Deixe um espaço em branco entre o “-locale en_US” e o “-services services-config.xml”. Agora já está tudo ok, já da para testar a aplicação, se você conseguiu configurar a aplicação no IIS, basta executar a aplicação no Flex e já estará tudo funcionando. Caso você tenha usado a url gerado pelo VS, você terá que executar a aplicação .net primeiro, e depois executar a aplicação Flex, é preciso fazer isso para que o VS inicie o seu servidor interno.
Parte 4: Publicando as aplicações.
4.1 – Para isso você precisara do IIS instalado, primeiro vamos publicar a aplicação .net, abra o VS e abra a aplicação que esta na pasta “AspNetFonte”, clique com o botão direito na solução e clique em “Publish Web Site”:
clique no botão “…” e selecione a pasta que você criou chamada “publicado”, deixe apenas a opção “Allow this precompiled site to be updatable” marcada e clique em ok.
Pronto, a aplicação .net está publicada, agora vamos publicar a aplicação Flex. Abra a aplicação Flex, depois abra o arquivo services-config.xml, e na opção “uri” do nod “endpoint”, deixe assim:
<endpoint uri="Gateway.aspx" class="flex.messaging.endpoints.AMFEndpoint"/>
Isso por que toda a pasta publicado será uma aplicação, e a aplicação Flex e .net estarão na mesma pasta, então não é preciso colocar o caminho completo da aplicação. Agora selecione o projeto Flex, clique no botão superior Project > Export Release Build…:
Na opção “Browser” selecione a pasta “publicado” e clique em Finish. Agora configure a pasta “publicado” no IIS, agora é só acessar a aplicação no seu localhost e pronto.
Baixe o projeto aqui, até a próxima!
