- Topic: Flex Email Form
- Info: Though this won’t as extensive as other tutorials, I promise you, you will understand the way the Cairngorm works, and how easy it is to create applications with this design pattern.
- Description: We will create a Flex based email from, that uses Amfphp to send the email information to the recipients.
- Frameworks: Cairngorm 2.2
- Others: Amfphp
- Prerequisites:
- PHP enabled web server
- Some PHP background
- Some Flex background
Steps:
- Create Flex Application, add Cairngorm Framework, and create our Folders
- Implement the Model Locator and Service Locator
- Implement the Cairngorm Events
- Implement the Delegates
- Implement the Commands
- Implement the Front Controller
- Implement the Value Objects and Views
- Create services-config.xml, make changes to Views
- Wire up Application Controller, and Upload PHP Classes
- Let it run!
Let’s get to this already.
Step 1 – Flex, Cairngorm, Folders of My!
Open up Flex builder and Click File->New->Flex Project.
Enter in whatever name you would like as it does not matter. Make sure this is a basic application using no server-side language. Now open up Cairngorm folder after you have unzipped it (hopefully), then drag and drop the cairngorm.swc file into the libs folder in your flex application and we are ready to rock.
To create the folders just right click and select:
New->Folder
When the new folder box opens up I want you to type this:
“com/yourdomain/ProjectName"
Then click enter.
Now create the folders like the image below.
Step 2 – Model Locator
Ok here we are going to create our Model Locator file; this is where all of our data is going to be stored in a central place for access from any other view or screen. Make sure your ModelLocator.as file is as follows:
ModelLocator.as
1: package com.jonniespratley.tutorials.FlexibleEmail.model
2: {
3: import com.adobe.cairngorm.model.IModelLocator;
4: import com.jonniespratley.tutorials.FlexibleEmail.model.vo.EmailVO;
5:
6: [Bindable]
7: public class ModelLocator implements IModelLocator
8: {
9: //Instantiate the ModelLocator
10: private static var _instance:ModelLocator;
11:
12: //Get the instance of the ModelLocator
13: public static function getInstance():ModelLocator
14: {
15: if( _instance==null ) _instance = new ModelLocator();
16: return _instance;
17: }
18:
19: public function ModelLocator()
20: {
21: if( _instance != null )
22: throw new Error( "Error: Singletons can only be instantiated via getInstance() method!" );
23: ModelLocator._instance = this;
24: }
25:
26: ///////////////////////////DEFINE VARIABLES HERE\\\\\\\\
27: public var emailVO:EmailVO;
28: public var message:String;
29: }
30: }
Let’s go ahead and create our Services.mxml file inside of the business folder while we are at it.
Create a new Component
File->New->Component,
Name is Serivces.mxml, and it is based on Service Locator. Cairngorm’s service locator, make you’re your add in the correct namespace check my Services.mxml to see how to do it.
Serivces.mxml
1: <?xml version="1.0" encoding="utf-8"?>
2: <!--Service Locator-->
3: <cairngorm:ServiceLocator xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:cairngorm="com.adobe.cairngorm.business.*">
4:
5: <mx:RemoteObject id="flexMailService"
6: destination="amfphp"
7: source="FlexMail"
8: showBusyCursor="true"
9: makeObjectsBindable="true"/>
10:
11: </cairngorm:ServiceLocator>
Step 3 - Cairngorm Events
Now it’s go time to create our events, Create a new Action Script Class that extends Cairngorm Event, Name this file SendEmailEvent.as make sure this file is created in the event folder of your project. Also make sure your SendEmailEvent.as file is as follows:
SendEmailEvent.as
1: package com.jonniespratley.tutorials.FlexibleEmail.control.events
2: {
3: import com.adobe.cairngorm.control.CairngormEvent;
4: import com.jonniespratley.tutorials.FlexibleEmail.model.vo.EmailVO;
5:
6: public class SendEmailEvent extends CairngormEvent
7: {
8: public static const SEND_EMAIL:String = "sendEmailEvent";
9: public var email:EmailVO;
10:
11: public function SendEmailEvent( email:EmailVO )
12: {
13: super( SEND_EMAIL );
14: this.email = email;
15: }
16: }
17: }
Step 4 – Delegate
Create a new ActionScript file called EmailDelegate.as in the delegate folder, this class doesn’t extend anything it is just used to make the call to the server. Make sure your file looks as follows:
EmailDelegate.as
1: package com.jonniespratley.tutorials.FlexibleEmail.business.delegates
2: {
3: import com.adobe.cairngorm.business.ServiceLocator;
4: import com.jonniespratley.tutorials.FlexibleEmail.model.vo.EmailVO;
5:
6: import mx.rpc.IResponder;
7:
8: public class EmailDelegate
9: {
10: private var responder:IResponder;
11: private var service:Object;
12:
13: public function EmailDelegate( responder:IResponder )
14: {
15: this.service = ServiceLocator.getInstance().getRemoteObject( "flexMailService" );
16: this.responder = responder;
17: }
18:
19: ///////////////Email Service Calls\\\\\\\\\
20: public function sendEmail( email:EmailVO ):void
21: {
22: var call:Object = service.sendEmail( email );
23: call.addResponder( responder );
24: }
25: }
26: }
Step 5 - Commands
Now it is time to create our commands, this command is what is going to be called on when the user clicks the send button from the view. This command is going to call the EmailDelegate.as and execute a services call to amfphp sending our EmailVO (that we will create) along with it as arguments. Anyway’s this is how your file should look:
SendEmailCommand.as
1: package com.jonniespratley.tutorials.FlexibleEmail.control.commands
2: {
3: import com.adobe.cairngorm.commands.ICommand;
4: import com.adobe.cairngorm.control.CairngormEvent;
5: import com.jonniespratley.tutorials.FlexibleEmail.business.delegates.EmailDelegate;
6: import com.jonniespratley.tutorials.FlexibleEmail.control.events.SendEmailEvent;
7: import com.jonniespratley.tutorials.FlexibleEmail.model.ModelLocator;
8:
9: import mx.controls.Alert;
10: import mx.rpc.IResponder;
11: import mx.rpc.events.FaultEvent;
12:
13: public class SendEmailCommand implements ICommand, IResponder
14: {
15: //Get the ModelLocator in here so we
16: //can refresh the ArrayCollection
17: private var model:ModelLocator = ModelLocator.getInstance();
18:
19: //Execute the call once this command is called from the
20: //CreateLinkEvent, sent form the controller
21: public function execute( event:CairngormEvent ):void
22: {
23: var delegate:EmailDelegate = new EmailDelegate( this );
24: var sendEmailEvent:SendEmailEvent = SendEmailEvent( event );
25: delegate.sendEmail( sendEmailEvent.email );
26: }
27:
28: //Handle the result and add it to the linkAc on the model
29: public function result( event:Object ):void
30: {
31: model.message = "Email Sent, Thank You!";
32: }
33:
34: //Catch any faults that may happen
35: public function fault( event:Object ):void
36: {
37: var faultEvent:FaultEvent = FaultEvent( event );
38: Alert.show( faultEvent.fault.faultString, "Service Error" );
39: }
40: }
41: }
Step 6 – Front Controller
Now it is time to create the one thing that makes any Cairngorm Application work, and that is the Controller.
Right-Click your project and Create a new Action Script Class name it Application Controller be sure that it extends Front Controller.
Flex builder will import the necessary class for you, we are going to make this controller on called instantiate map our Events to Command. Make sure your ApplicationController.as looks as follows:
ApplicationController.as
1: package com.jonniespratley.tutorials.FlexibleEmail.control
2: {
3: import com.adobe.cairngorm.control.FrontController;
4: import com.jonniespratley.tutorials.FlexibleEmail.control.commands.SendEmailCommand;
5: import com.jonniespratley.tutorials.FlexibleEmail.control.events.SendEmailEvent;
6:
7: public class ApplicationController extends FrontController
8: {
9: public function ApplicationController()
10: {
11: //Add Commands
12: addCommand( SendEmailEvent.SEND_EMAIL, SendEmailCommand );
13: }
14: }
15: }
Step 7 – Value Object and Views
Next we need to create a new ActionScript class Called EmailVO.as this file will go in your model/vo folder, inside the EmailVO.as file, make sure you make the entire class Bindable, because we are going to use this in the model and elsewhere for data binding. Make sure your file is as follows:
LinkVO.as
1: package com.jonniespratley.tutorials.FlexibleEmail.model.vo
2: {
3: [Bindable]
4: public class EmailVO
5: {
6: public var emailTo:String;
7: public var emailFrom:String;
8: public var emailSubject:String;
9: public var emailMessage:String;
10:
11: public function EmailVO()
