2007

Flex to CFC - Contact Form

Posted By : Shaun McCran
Related Categories: Flex Remoting, Coldfusion, RIA, Flex

Whilst first looking at flex as a means to connect up my coldfusion back end, to an RIA front all the tutorials etc were aimed at database integration and manipulation.

Quite a common tag for coldfusion if the tag. It allows a developer to construct emails, and send them using a variety of options. So I asked myself, 'how could we get our flex front end talking to a Coldfusion back end?'. Pretty easily as you'll see here. First off lets look at the Coldfusion cfc.

view plain print about

1<cfcomponent>
2
3 <cffunction name="sendMail" access="public" returntype="string">
4 <cfargument name="to" type="string" required="yes">
5 <cfargument name="from" type="string" required="yes">
6 <cfargument name="subject" type="string" required="no">
7 <cfargument name="title" type="string" required="no">
8 <cfargument name="comments" type="string" required="no">
9 <cfargument name="tel" type="string" required="no">
10 <cfargument name="name" type="string" required="no">
11
12<cfset variables.mailServer = "mail.domain">
13
14 <cfmail to="#arguments.to#" from="#arguments.from#" subject="#arguments.subject#" type="html" server="#variables.mailServer#">
15 Dear Admin,
16
17 A user has submitted the form on #cgi.server#
18 
19 From: #arguments.title# #arguments.name# 
20 Email: #arguments.from# 
21 Subject: #arguments.subject# 
22 Tel: #arguments.tel# 
23
24 Comments: 
25 #arguments.comments#
26 
27
28 Email Automatically Generated on #DateFormat(NOW(), "dd/mm/yyyy")# at #TimeFormat(NOW(), "HH:mm:ss")#
29 </cfmail>
30
31 <cfset myResult="Your Contact has been sent, Thank You">
32 <cfreturn myResult>
33 </cffunction>
34</cfcomponent>

Looking through the code, its a pretty straight forward function. It requires a set of parameters, all of which are used to populate the cfmail. Nothing fancy really. Next we will construct the flex form. We will start the form, and build the model for the 'title' types.

view plain print about

1<?xml version="1.0" encoding="utf-8"?>
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderColor="#ffffff" backgroundGradientColors="[#ffffff, #ffffff]">
3
4 
5 <mx:Model id="DT">
6 <obj>
7 <item>
8 <label>Mr</label>
9 <data>Mr</data>
10 </item>
11 <item>
12 <label>Ms</label>
13 <data>Ms</data>
14 </item>
15 <item>
16 <label>Miss</label>
17 <data>Miss</data>
18 </item>
19 <item>
20 <label>Mrs</label>
21 <data>Mrs</data>
22 </item>
23 <item>
24 <label>Dr</label>
25 <data>Dr</data>
26 </item>
27 <item>
28 <label>Rev</label>
29 <data>Rev</data>
30 </item>
31 </obj>
32 </mx:Model>
33
34 <mx:ArrayCollection id="peopleTitles" source="{DT.item}" />
35

We'll add validators for the fields that we require.

view plain print about

1
2<mx:StringValidator id="subValName" source="{subName}" required="true" property="text" trigger="{submitButton}" triggerEvent="click"/>
3<mx:StringValidator id="subValComments" source="{subComments}" required="true" property="text" trigger="{submitButton}" triggerEvent="click"/>
4<mx:EmailValidator id="subValEmail" source="{subEmail}" required="true" property="text" trigger="{submitButton}" triggerEvent="click"/>

Next the call to the cfc. I tend to try and use the Coldfusion AMF gateway as much as possible, I find it much more reliable, and far easier to integrate with.

view plain print about

1
2<mx:RemoteObject id="SendMail" destination="ColdFusion" source="mail" showBusyCursor="true" fault="Alert.show(event.fault.message)" />

If your not sure of exactly what this is doing, check here. Next we will include an ActionScript file 'contact.as', and build the form itself.

view plain print about

1<mx:Canvas label="Contact" width="100%" height="100%">
2
3 <mx:Script>source="contact.as" />
4
5 <mx:Form x="10" y="39" width="490" height="100%">
6 <mx:FormItem label="Name" fontFamily="Arial" required="true">
7 <mx:TextInput id="subName"/>
8 </mx:FormItem>
9 <mx:FormItem label="Email" fontFamily="Arial" required="true">
10 <mx:TextInput id="subEmail"/>
11 </mx:FormItem>
12 <mx:FormItem label="Telephone No." fontFamily="Arial">
13 <mx:TextInput id="subTel"/>
14 </mx:FormItem>
15 <mx:FormItem label="Title" fontFamily="Arial">
16 <mx:ComboBox id="subReason" dataProvider="{peopleTitles}"></mx:ComboBox>
17 </mx:FormItem>
18 <mx:FormItem label="Comments" fontFamily="Arial" required="true">
19 <mx:TextArea id="subComments" height="107"/>
20 </mx:FormItem>
21 <mx:FormItem width="100%" labelWidth="0">
22 </mx:FormItem>
23 <mx:HBox width="100%" horizontalAlign="center" verticalAlign="middle" height="25">
24
25 <mx:Button label="Submit" id="submitButton" enabled="true" fontFamily="Arial" fontSize="12" mouseOver="changeColour()" click="submitForm();"/>
26 <mx:Button label="Reset" id="resetButton" enabled="true" fontFamily="Arial" fontSize="12" mouseOver="changeColour()" click="resetForm();"/>
27 </mx:HBox>
28 </mx:Form>
29 <mx:Text x="10" y="10" text="Please enter your details below to contact me." fontFamily="Arial" fontSize="12"/>
30
31 </mx:Canvas>
32
33</mx:Application>

The 'contact.as' file looks like this:

view plain print about

1// ActionScript file
2    import mx.controls.Alert;
3 import mx.events.*;
4 import mx.validators.*;
5
6    // change button colour
7    public function changeColour():void
8        {
9            //submitButton.setStyle("borderColor", '#FF0000');
10 submitButton.setStyle("themeColor", '#99CCFF');
11            resetButton.setStyle("themeColor", '#99CCFF')
12        }
13
14 // Called to validate form items
15 // This validates the form results as true or false
16 private function validateContactForm():Boolean
17 {
18 var booValid:Boolean = true;
19 var arrVals:Array = [subValName, subValEmail];
20 var arrResults:Array = Validator.validateAll(arrVals);
21 for each (var result:ValidationResultEvent in arrResults) {
22 if (result.type == ValidationResultEvent.INVALID) booValid = false;
23 }
24
25 return booValid;
26
27 }
28
29 // Called to submit form
30 private function submitForm():void {
31 if (validateContactForm())
32
33     {
34     SendMail.sendMail('EmailAddressToGoTo.co.uk',subEmail.text,'Subject',subReason.selectedLabel,subComments.text,subTel.text,subName.text)
35      mx.controls.Alert.show("Your contact has been sent, thank you!", "Contact Sent");
36      subName.text = "";
37      subEmail.text = "";
38      subTel.text = "";
39      subReason.selectedIndex = 0;
40      subComments.text = "";
41     }
42 }
43
44
45    // do reset
46    public function resetForm():void
47        {
48            subName.text = "";
49            subEmail.text = "";
50            subTel.text = "";
51            subReason.selectedIndex = 0;
52            subComments.text = "";
53        }

It has a few simple functions in it;