Keep your mxml files neat with View Helpers

I have been working with flex and consulting about flex development for quite some time now. I guess about 3 years of consulting and 4 years of hands-on development.

I have seen flex applications written in many ways: mxml files, as files, namespaces and more. I guess there is no “right” way to do so, or at least not just one “right” way.

These past few months, I have started working with mxml files in a way I think is very convenient. It keeps my mxml file very lean and clean, all of the view code is in a separate action-script file which inherits from a base class.

I want to show you this, first. This is the sample project, this is what it looks like in flash builder: Screen shot 2010-08-19 at 5.26.08 PM

As you can see, there is the main application, an mxml component, the BaseViewHelper class and that is just about it.

Now, let’s have a look at the BaseViewHelper class. note: this is a stripped down version of the class, it has many additions in my project, like a way to add validations, clean and dirty modes for the model and more, this is just to see the way I work, you can add your own additions to it.

package com.kensodev.core
	import mx.core.UIComponent;

	public class BaseViewHelper
		private var _view:UIComponent;

		public function BaseViewHelper()


		public function init():void


		public function set view(v:UIComponent):void
			_view = v;

		public function get view():UIComponent
			return _view;

As you can see, I kept it very simple. It has a view getter and setter to set the view it handles, and an init function (for creation complete events).

Now, let’s see an mxml component and how does the helper fits, but first let’s see a view helper which inherits from the BaseViewHelper class.

package com.kensodev.views.helpers
	import com.kensodev.core.BaseViewHelper;
	import com.kensodev.views.MyViewComponent;

	public class MyViewComponentHelper extends BaseViewHelper
		public function MyViewComponentHelper()

		public function get myView():MyViewComponent
			return MyViewComponent(this.view);

		public override function init():void
			//TODO Auto-generated method stub

		public function myButton_clickHandler(event:MouseEvent):void
			// TODO Auto-generated method stub

This is a helper file for the MyViewComponent. Now, here’s the source code for implementing the helper inside each View component

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx=""



	<helper:MyViewComponentHelper view="{this}" id="helper" />

	<mx:Button id="myButton" click="helper.myButton_clickHandler(event)"


As you can see, the file is very clean, it has only data relevant to understand the structure of the component (which is all you need in mxml), all of the logic files “seats” behind the scenes.

There is a naming conventions for views and view helpers its view_name view_nameHelper This way, when you navigate your way through the code, you can always see what you are looking for with ease like so:

Screen shot 2010-08-19 at 5.36.53 PM

I hope you take inspiration with this way, I assure you I did, it’s a very useful way to manage large projects with many views and view helpers.

The source code of the example project is on git.


After a discussion with @douglasknudsen I want to make things clear, this is not the ViewHelper implementation of cairngorm Mvc framework, it’s something you should (or can) write on your own just to make things organized and clean.

I am using it regardless to the MVC framework I am using which is RobotLegs B.T.W

<img src="" height="1" width="1"/>