Sending e-mail with Flex and ColdFusion

To send e-mail with CF is very simple! With Flex it is not different.

We will use the simple integration of Flex with CF to set up a contact form!

We will use Remote Object Services to accomplish the connection between Flex and CF, through FlashRemoting that is already standard in CF 7 in before.
In this example I am using Flex Builder 3 beta 2, that can be obtained through the link http://labs.adobe.com/technologies/flex/flexbuilder3/, for tests.

1. With Flex open Builder, select the perspective Flex Development.
2. Through the menu it Cribs selects, File > New > Flex Project.
3. Give the name to his project (I put examples).
4. Validate the location of his app in CF.
5. In Application Type, select Web Application.
6. In Server Tecnology, Application Server Type, choose ColdFusion. Mark the box Uses Remote Object Access Service and mark soon lower, ColdFusion FlashRemoting. Give Next
7. In the next screen it just validates the location of the server and give Next.
8. In the next screen if quizer to maintain the name just, of Finish, otherwise of a name, define the exibition paste and Finish

Ready. Now we are going our app.
The layout is very simple and it will be based on this here:

The items in red are the names of each component. I lower the code:
<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"/>

Made that are going to the code. In the way Source of Flex Builder, inside of the tag we will insert the following code:

<mx:Script>
<![CDATA[

//making imports of the alert packages and of RPC
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;

/*defining a function where we will call the method in our component, that he makes the sending of the e-mail, passing the values of the fields of the form*/
public function enviaEmail():void{
    meuCFC.enviarEmail(
        remetente.text,
        remetente_email.text,
        destinatario.text,
        destinatario_email.text,
        assunto.text,
        mensagem.text
    );
}

/* defining a Result where we give an alert confirming the sending of the message and soon afterwards cleaning the fields of the form for new postage */
private function onResult(e:ResultEvent):void{
    Alert.show("Message sent with success for" + destinatario_email.text,
    "Information", mx.controls.Alert.OK);
    remetente.text = "";
    remetente_email.text = "";
    destinatario.text = "";
    destinatario_email.text = "";
    assunto.text = "";
    mensagem.text = "";
}

]]>
</mx:Script>

It is a very simple code, it is commented on and I believe that you/they won't have problems in understanding it. Now we will make use of the tag to connect to Server of CF and our component:
<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>

Very simple also. I defined a name for the service, called here meuCFC, the destiny, ColdFusion and the source of the used component. Soon afterwards I defined the method to be used through the tag, call of the result up there and of the fault exhibiting the message in case it happens some mistake.

To do use of the function that we created above, enviaEmail, we defined her in the click of the button being:
<mx:Button label="Enviar E-mail" id="enviar_btn" click="enviaEmail()" left="240" height="26" width="200" y="279" />
Now our CFC. Create the following structure of pastes for our CFC. Depending on the configurations of his/her project they can vary.

estudosflex.exemplos.src.br.com.zellen.model
Inside of the paste Model will create component CFC with the following code:

<cfcomponent hint="componente para estudos">

    <!--- function to send 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">
                Hi #arguments.destinatario# [#arguments.remetente_email#],<br />
                    #arguments.remetente#, sent that message to you:<br />
                Subject: #arguments.assunto#<br />
                Message: #arguments.mensagem#<br />
                In #dateFormat(now(), 'mm/dd/yyyy')#
            </cfmail>
        </cfloop>

    </cffunction>

</cfcomponent>
Very simple also, just a function to send Good e-mail, now is only to compile the project and to do their tests. You can join more functionalities as validations, enclosures, etc!
For it visualizes the application clicks here. To obtain the files sources, it is enough to click with the right button and to select View Source!

Francisco Paulino [Tofinha]
http://blog.zellen.com.br/
tofinha@gmail.com