Enviando e-mail com Flex e ColdFusion
Salve galera!
Enviar e-mail com CF é muito simples, até banal! Com Flex não é diferente.
Vamos utilizar a integração simples do Flex com o CF para montar um formulário de contato!
Utilizaremos o Remote Object Services para realizar a conexão entre o Flex e o CF, através do FlashRemoting que já é padrão no CF 7 em diante.
Neste exemplo estou utilizando o Flex Builder 3 beta 2, que pode ser obtido através do link http://labs.adobe.com/technologies/flex/flexbuilder3/, para testes.
1. Com o Flex Builder aberto, selecione a perspectiva Flex Development.
2. Através do menu File selecione, File > New > Flex Project.
3. Dê o nome ao seu projeto (eu coloquei exemplos).
4. Valide a localização de sua app no CF.
5. em Application Type, selecione Web Application.
6. Em Server Tecnology, Application Server Type, escolha ColdFusion. Marque a caixa Use Remote Object Access Service e marque logo abaixo, ColdFusion FlashRemoting. Dê Next
7. Na próxima tela apenas valide a localização do servidor e dê Next.
8. Na próxima tela se quizer manter o nome apenas, de Finish, caso contrário de um nome, defina a pasta de exibição e Finish
Pronto. Agora vamos a nossa app.
O layout é bem simples e será baseado neste aqui:
Os itens em vermelho são os nomes de cada componente.
Abaixo o código:
<mx:Label y="50" text="Nome do Remetente:" id="txt_nome_remetente" left="10" width="200" fontWeight="bold"/>
<mx:TextInput id="remetente" y="65" left="10" width="200"/>
<mx:Label y="50" text="E-mail do Remetente:" id="txt_email_remetente" left="240" width="200" fontWeight="bold"/>
<mx:TextInput id="remetente_email" y="65" left="240" width="200"/>
<mx:Label y="95" text="Nome do Destinatário:" id="txt_nome_destinatario" left="10" width="200" fontWeight="bold"/>
<mx:TextInput id="destinatario" y="110" left="10" width="200"/>
<mx:Label y="95" text="E-mail do Destinatário:" id="txt_email_destinatario" left="240" width="200" fontWeight="bold"/>
<mx:TextInput id="destinatario_email" y="110" left="240" width="200"/>
<mx:Label y="140" text="Assunto:" id="txt_assunto" left="10" width="200" fontWeight="bold"/>
<mx:TextInput id="assunto" y="155" left="10" width="430"/>
<mx:Label y="185" text="Mensagem:" id="txt_mensagem" left="10" width="200" fontWeight="bold"/>
<mx:TextArea height="60" id="mensagem" y="201" left="10" width="430"/>
<mx:Button label="Enviar E-mail" id="enviar_btn" left="240" height="26" width="200" y="279"/>
Feito isso vamos ao código.
No modo Source do Flex Builder, dentro da tag
<![CDATA[
Çspan style='color: #808080'ÈÇemÈ
//fazendo imports dos pacotes de alerta e do RPC
Ç/emÈÇ/spanÈimport mx.controls.Alert;
import mx.rpc.events.ResultEvent;
/*definindo uma função onde iremos chamar o método em nosso componente, que
faz o envio do e-mail, passando os valores dos campos do formulário*/
public function enviaEmail():void{
meuCFC.enviarEmail(
remetente.text,
remetente_email.text,
destinatario.text,
destinatario_email.text,
assunto.text,
mensagem.text
);
}
/*definindo uma Result onde damos uma alerta confirmando o envio da
mensagem e em seguida limpando os campos do fomrulário para nova postagem*/
private function onResult(e:ResultEvent):void{
Alert.show("Mensagem enviada com sucesso para " + destinatario_email.text,
"Informação", mx.controls.Alert.OK);
remetente.text = "";
remetente_email.text = "";
destinatario.text = "";
destinatario_email.text = "";
assunto.text = "";
mensagem.text = "";
}
]]>
</mx:Script>
É um código bem simples, está comentado e creio que não terão problemas em entendê-lo.
Agora vamos fazer uso da tag
<mx:method name="enviarEmail" result="onResult(event)" fault="Alert.show(event.fault.message, 'Erro')"/>
</mx:RemoteObject>
Bem simples também. Defini um nome para o serviço, chamado aqui de meuCFC, o destino, ColdFusion e o source do componente utilziado. Sem seguida defini o método a ser utilziado através da tag
Para fazer uso da funçãoque criamos acima, enviaEmail, definimos ela no click do botão ficando:
Agora nosso CFC.
Crie a seguinte estrutura de pastas para o nosso CFC. Dependendo das configurações de seu projeto elas podem variar.
estudosflex.exemplos.src.br.com.zellen.model
Dentro da pasta Model vamos criar o CFC componentes com o seguinte código:
<!--- funcao para enviar e-mails --->
<cffunction name="enviarEmail" access="remote" returntype="void">
<cfargument name="remetente" type="string" required="yes">
<cfargument name="remetente_email" type="string" required="yes">
<cfargument name="destinatario" type="string" required="yes">
<cfargument name="destinatario_email" type="string" required="yes">
<cfargument name="assunto" type="string" required="yes">
<cfargument name="mensagem" type="string" required="no">
<cfloop list="#arguments.destinatario_email#" delimiters=";" index="email">
<cfmail server="localhost" from="#arguments.remetente_email#" to="#Trim(email)#" subject="[TOFINHA] #arguments.assunto#" type="text/html" charset="iso-8859-1">
Olá #arguments.destinatario# [#arguments.remetente_email#],<br />
#arguments.remetente#, enviou essa mensagem a você:<br />
Assunto: #arguments.assunto#<br />
Mensagem: #arguments.mensagem#<br />
Em #dateFormat(now(), 'dd/mm/yyyy')#
</cfmail>
</cfloop>
</cffunction>
</cfcomponent>
Bem simples também, apenas uma função para enviar e-mail
Bom, agora é só compilar o projeto e fazer seus testes. Você pode agregar mais funcionalidades como validações, anexos, etc!
Para visualiza a aplicação clique aqui. Para obter os arquivos fontes, basta clicar com o botão direito e selecionar View Source!
Sucesso e até a próxima!
Tem como vc postar algo sobre CRUD?
To com dificuldade de realizar essas ações com o Flex, na verdade nem sei por onde começar. pelo exemplod e e-mail parece bem simples!
valeus aí
se puder postar tb usando login, inserts, updates, seria banaca. de reppente uma aplicação completa usando flex e cf, com listagem, insert, update e exclusão.
ajuda a gente aí!!hehehehehe
sucesso com a Zellen!
Realizar as operações de CRUD integrando CF e Flex não é difícil.
Vou estar preparando algo nos próximos dias e no próximo post começamos a nossa pequena app!
obrigado pelas dicas!
Sucesso!
Excelente post, espero pelos demais!
já add seu feed!
abs