Help
Posted 17 December 2007 - 12:11 PM
Fiz um post no meu Blog e como tem este espaço aberto aos usuários para postarem seus tutoriais/artigos, trouxe para o Fórum do MXStudio afim de compartilhar com mais interessados na integração do Flex com o ColdFusion!
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 forme 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 Servre Type, escolha ColdFusion. Marque a caixa Use Remote Objecta 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 nomeapenas, 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:
CÓDIGO
<mx:Label x="10" y="10" text="Formulário de Contato - ColdFusion com Flex" fontWeight="bold" fontSize="16" color="#000000"/>
<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"/>
<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 <mx:Application> vamos inserir o seguinte código:
CÓDIGO
<mx:Script>
<![CDATA[
//fazendo imports dos pacotes de alerta e do RPC
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>
<![CDATA[
//fazendo imports dos pacotes de alerta e do RPC
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:RemoteObject> para conectar ao Server do CF e nosso componente:
CÓDIGO
<mx:RemoteObject id="meuCFC" destination="ColdFusion" source="estudosflex.exemplos.src.br.com.zellen.model.componentes" showBusyCursor="true">
<mx:method name="enviarEmail" result="onResult(event)" fault="Alert.show(event.fault.message, 'Erro')"/>
</mx:RemoteObject>
<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 utilizado. Sem seguida defini o método a ser utilziado através da tag <mx:method>, chamado do result lá em cima e do fault exebindo a mensagem caso ocorra algum erro.
Para fazer uso da funçãoque criamos acima, enviaEmail, definimos ela no click do botão ficando:
CÓDIGO
<mx:Button label="Enviar E-mail" id="enviar_btn" click="enviaEmail()" left="240" height="26" width="200" y="279"/>
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:
CÓDIGO
<cfcomponent hint="componente para estudos">
<!--- 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="[ZELLEN] #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>
<!--- 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="[ZELLEN] #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 funcionando clique aqui
Para obter os arquivos fontes, basta clicar com o botão direito e selecionar View Source!
