Sending e-mail with Flex and ColdFusion

Posted At : April 19, 2008 4:04 PM | Posted By : Tofinha
Related Categories: ColdFusion 8, Flex, Samples, Tutorials, 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, that can be obtained through the link http://www.adobe.com/products/flex/, 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 SendingEmail).
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 maintain the name just, of Finish, otherwise of a name, define the exibition paste and Finish

Ready. Now we are going our app.

The application is very simple, without validation use and it is based on this example: SendingEmail.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" label="Send Emails with ColdFusion and Flex"
    layout="absolute" backgroundColor="#e5e5e5" width="100%" height="100%" viewSourceURL="srcview/index.html">

    <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 sendEmail():void
            {
                myCFC.sendEmail(
                ctr_your_name.text,
                ctr_your_email.text,
                ctr_name_friend.text,
                ctr_email_friend.text,
                ctr_subject.text,
                ctr_message.text
                );
                btn_send.enabled = false;
            }

            /* 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 " + ctr_email_friend.text,
                "Information", mx.controls.Alert.OK);
                ctr_your_name.text = "";
                ctr_your_email.text = "";
                ctr_name_friend.text = "";
                ctr_email_friend.text = "";
                ctr_subject.text = "";
                ctr_message.text = "";
            }

        ]]>
    </mx:Script>

    
    <mx:RemoteObject id="myCFC" destination="ColdFusion" source="exemplos.sendingemail.components.cfcApp" showBusyCursor="true">
        <mx:method name="sendEmail" result="onResult(event)" fault="Alert.show(event.fault.message, 'Erro')"/>
    </mx:RemoteObject>

    <mx:Panel id="pn_Form" title="Contatc Form - ColdFusion with Flex" horizontalCenter="-121" verticalCenter="-98">
        
        <mx:Form x="177.5" y="152" width="494" height="291">
            <mx:FormItem label="Your Name" id="txt_your_name" fontWeight="bold" width="450">
                <mx:TextInput id="ctr_your_name" width="250"/>
            </mx:FormItem>

            <mx:FormItem label="Your Email Address" id="txt_your_email" fontWeight="bold" width="450">
                <mx:TextInput id="ctr_your_email" width="250"/>
            </mx:FormItem>

            <mx:FormItem label="Name of Friend" id="txt_name_friend" fontWeight="bold" width="450">
                <mx:TextInput id="ctr_name_friend" width="250"/>
            </mx:FormItem>

            <mx:FormItem label="Email Address of Friend" id="txt_email_friend" fontWeight="bold" width="450">
                <mx:TextInput id="ctr_email_friend" width="250"/>
            </mx:FormItem>

            <mx:FormItem label="Subject" id="txt_subject" fontWeight="bold" width="450">
                <mx:TextInput id="ctr_subject" width="250"/>
            </mx:FormItem>

            <mx:FormItem label="Message" id="txt_message" fontWeight="bold" width="450">
                <mx:TextArea height="60" id="ctr_message" width="250"/>
            </mx:FormItem>
        </mx:Form>
        <mx:ControlBar horizontalAlign="center">
            
            <mx:Button label="Send Email" id="btn_send"
                enabled="{(ctr_your_name.text.length == 0 || ctr_your_email.text.length == 0 || ctr_name_friend.text.length == 0 || ctr_email_friend.text.length == 0) ? false : true}"
                toolTip="{btn_send.enabled == true ? 'Send Message' : 'Your name, your email, name your friend and email your friend is required '}"
click="sendEmail()" height="26" width="150"/>
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

Very simple also. I defined a name for the service, called here myCFC, 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, sendEmail, we defined her in the click of the button.

Now your CFC. Save the code lower inside of the paste components in the root of the project cfcApp.cfc

<cfcomponent hint="component for Send Email">

    
    <cffunction name="sendEmail" access="remote" returntype="void">

        <cfargument name="ctr_your_name" type="string" required="yes">
        <cfargument name="ctr_your_email" type="string" required="yes">
        <cfargument name="ctr_name_friend" type="string" required="yes">
        <cfargument name="ctr_email_friend" type="string" required="yes">
        <cfargument name="ctr_subject" type="string" required="yes">
        <cfargument name="ctr_message" type="string" required="no">
        
<cfloop list="#arguments.ctr_email_friend#" delimiters=";" index="email">
            <cfmail server="localhost" from="#arguments.ctr_your_email#" to="#Trim(email)#" subject="[CFTofinha] #arguments.ctr_subject#" type="text/html" charset="UTF-8">
                Hi #arguments.ctr_name_friend# [#arguments.ctr_email_friend#],<br />
                #arguments.ctr_your_name#, sending the message below:<br />
                Subject: #arguments.ctr_subject#<br />
                Message: #arguments.ctr_message#<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!