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.
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.
[as3]
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;
}
}
}
[/as3]
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.
[as3]
package com.kensodev.views.helpers
{
import com.kensodev.core.BaseViewHelper;
import com.kensodev.views.MyViewComponent;
public class MyViewComponentHelper extends BaseViewHelper
{
public function MyViewComponentHelper()
{
super();
}
public function get myView():MyViewComponent
{
return MyViewComponent(this.view);
}
public override function init():void
{
//TODO Auto-generated method stub
super.init();
}
public function myButton_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
}
}
[/as3]
This is a helper file for the MyViewComponent. Now, here’s the source code for implementing the helper inside each View component
[as3]
<mx:Canvas xmlns:mx=“http://www.adobe.com/2006/mxml"
width=“400”
height=“300”
creationComplete=“helper.init()”
xmlns:helper=“com.kensodev.views.helpers.*">
</mx:Script>
<helper:MyViewComponentHelper view="{this}” id=“helper” />
<mx:Button id=“myButton” click=“helper.myButton_clickHandler(event)”
</mx:Canvas>
[/as3]
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:
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.
**
update:
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