Flash Blog by Jon Danao

Using Custom Events and DTOs are a way to move data around the application. With Flex’s event-driven architecture, a component can trigger an event and have it carry some data. This data will be encapsulated in a Data Transfer Object which most of these programmers consider as “dumb object” simply because it only serves as a data holder and does nothing more… no functionalities, no extra processing.

I would like to make this explanation and the accompanying codes AS SIMPLE AS POSSIBLE. I won’t be concerned with the aesthetics of the sample application, I’d like you to see it in barebones. So don’t complain if the app is ugly. For this discussion, let’s try to make a basic contact/email form. It should have fields for the recipient, sender, subject and body. This will not send the actual email but for purposes of demonstration, we’ll just populate the gathered data into another component.

What we need:

• MainApp.mxml - this is always required. Place this at the root of your source folder.
• EmailForm.mxml - this a component and contains all the text fields and submit button. Place this under the “views” folder.
• EmailEvent.as - this is our custom event. Place this under the “events” folder.
• EmailDTO.as - this is our data transfer object which holds all data gathered from the email form. Place this under the “dto” folder.

EmaiDTO.as

This is the easiest to write… very straightforward. We know that in our email form we have the typical fields for sender, recipient, subject and body. These will be the basis for our DTO’s properties. Assign a public access modifier to all these properties. Make this class bindable.

//EmailDTO.as
package dto
{
	[Bindable]
	public class EmailDTO
	{
		public var sender:String;
		public var recipient:String;
		public var subject:String;
		public var body:String;

		public function EmailDTO(sender:String, recipient:String, subject:String, body:String)
		{
			this.sender = sender;
			this.recipient = recipient;
			this.subject = subject
			this.body = body;
		}
	}
}

EmailEvent.as

Another straightforward coding. When instantiating this event class, you need to supply the data which is the DTO itself and the type which you can define with anything you like. Invoke the clone() method to allow event bubbling.

//EmailEvent.as
package events
{
	import dto.EmailDTO;
	import flash.events.Event;

	public class EmailEvent extends Event
	{
		public var data:EmailDTO;

		public function EmailEvent(data:EmailDTO, type:String)
		{
			super(type);
			this.data = data;
		}

		override public function clone():Event
		{
			return new EmailEvent(data, type);
		}
	}
}

EmailForm.mxml

This is where you build your form with UI elements. At the top of the code, define a new event name in the Metadata for this component - in my case I wrote “onSendEmail”. I’m still used to the old style events - onPress, onClick, onLoad - anything with the “on” prefix.

In the event handler submitForm(), instantiate a new DTO with the data inside the form elements. Instantiate a new event supplying the DTO and the new event name (defined in the Metadata). Dispatch this event.

	
		[Event(name="onSendEmail", type="events.EmailEvent")]
	

	
		

	
		
	

	
		
	

	
		
	

	
		
	

	
		
	

MainApp.mxml
Lay your components down. To be able to use your EmailForm component in the views folder, define a namespace the application - xmlns:view=”views.*”. You can now use the onSendEmail event. This event will be the carrier of the form data.

	
		From: " + event.data.sender + "\\n";
				taEmailOutput.htmlText += "To: " + event.data.recipient + "\\n";
				taEmailOutput.htmlText += "Subject: " + event.data.subject + "\\n";
				taEmailOutput.htmlText += "Message: " + event.data.body + "\\n";
			}
		]]>
	

	
	
	

Note:
You might think that it’s a lot harder to create DTOs and Custom Events for such a simple application like this. But when you integrate your Flex app with a database, you can take advantage of class mapping or do reflection between the client and the server. The DTO can have properties same as the database’s column definition in a particular table.

For advanced reading, try Yakov Fain’s discussion in using a Single Event Class approach.

Demos & Downloads
http://danao.org/demo-apps/custom-events/MainApp.html