redredred

When you look around at all the postings with Flex code examples and advice, it seems clear that the Flex community is largely made up of graphic artists and refugees from the last popular drag and drop programming framework (probably .NET). There are definitely some people out there coding high quality Flex applications but if the code snippets on the web are anything to go by then they are in a tiny minority.

I come from a structured programming background and have been writing Java/J2EE applications almost exclusively for the past 5 or 6 years, I love user interface programming and have done a lot of work on web based UIs, mostly with Javascript, Ajax and HTML. When I first saw the Flex 3 beta and heard that Adobe was going to open source Flex I was blown away, I immediately downloaded the beta Flex Builder 3 and jumped in.

Of course I started Googling for solutions to the problems I was having and pretty soon I realized that most of the code examples, although functional, were a pile of pants. It seems like most of the flex community has never heard of separation of concerns. People just seem to open up a script block and go for it right there in the middle of a presentation page, sometimes they don’t even bother to do that, they just inline it inside the event they are interested in. I must admit that I initially thought this was some kind of joke. A club of deviant bloggers trying to see how successful they could be in encouraging newbies to write rubbish code.

Strangely the problem when you are coding Flex is exactly the opposite to when you are coding Java web applications. In Java structure is easy to find and you want an MVC framework which will make things quicker. In Flex writing applications is quite quick but you desperately need some structure since you know that a couple of months down the track you are going to be supporting your application or building new modules for it and you can quickly see that what you are writing is a no holds barred mess.

When you google for Flex best practice you get very little and what there is is mostly very general and stolen from the last Agile, TDD slide set the presenter watched… There are exceptions and there are some people out there doing really nice code. Some guys at Adobe had a misguided attempt to develop an MVC framework, presumably with the intention of trying to correct the horror code that was beginning to be associated with the Flex brand. Cairngorm was born. Cairngorm is basically a Singleton-fest who’s only redeeming feature, IMHO, is the ServiceLocator class.

Nobody was thinking too deeply the day Cairngorm was born. They have few ideas and no structural assistance for separating plumbing code from the view. Most likely coders who go to the trouble of implementing a Cairngorm application will at least try to work out some type of mediator or code behind implementation of their own since core separation of view and controllers has to constantly be wired in manually in Cairngorm. Of course using Cairngorm is considerably better than using no structure at all, but all in all it is pretty lame.

After some time spent suffering and becoming seriously tempted to write my own MVC framework I came across PureMVC. The guys at PureMVC have a very nice ActionScript 3 implementation of their MVC framework which finally provides some proper structure for separating concerns. They provide a Mediator base class for extending to do your plumbing code. PureMVC also uses a more registry based approach rather than just encouraging you to conjure up singletons whenever you get to lazy too sort out your code properly. It is by no means a perfect framework, I do find myself using quite a bit of boiler plate code but with care, this can largely be factored out into factories or utility classes.

There definitely needs to be more work in the Flex community on application structure and separation of concerns. There is still a lot of work to do in developing a best practice for binding form fields. The Flex Binding framework seems to verge on Voodoo and behaves very unpredictably for anyone who is not aware of what is really going on under the covers. i don’t think that a really good MVC framework has been written for Flex but at least there are some options starting to spring up.

Out of the box the MenuBar control kind of insists that you have children for every top level menu item in order to navigate. If you don’t have any children for a MenuBarItem you don’t get an ITEM_CLICK event when it is clicked. Fixing this is pretty simple but can be a little annoying since you need to listen for MouseEvent.CLICK as well as MenuEvent.ITEM_CLICK.

Putting another listener on the menu bar is pretty simple but you need to look out for the user clicking on the menu bar but not on a menu item. My click listener looks simething like this:

public function handleMenuClick(event : MouseEvent) : void {

if(event.target is MenuBarItem) {

var menuItem : MenuItem = event.target.data as MenuItem;

if(menuItem.children == null) {

app.views.selectedIndex = menuItem.navIndex;

}

}

}

In the above example i am using a very basic custom MenuItem for the data structure of my menu. It just contains the Label, Icon and a navigation index which I apply to my ViewSstacks (in the above case the ViewStack is ‘app.views’) as the selectedIndex the class looks like this:

public class MenuItem {

public var label : String;

public var icon : String;

public var navIndex: int;

public var children : Array;

public function MenuItem(label : String, navIndex : int, icon : String) {

this.label = label;

this.icon = icon;

this.navIndex = navIndex;

}

}

If the children Array is null, I know that it is a navigation target.

It’s just a small thing but it can be quite annoying when you have to use the mouse in order to submit a form, particularly something like a login form where you just want to quickly type in your details and get into the application. HTML web forms have this behaviour by default, however in Flex you have to ask for it. i have not yet found a way to do it for the whole form but you simply add a listener to the FlexEvent.ENTER event for each field on the form.

It will look something like this:

<form field>.addEventListener(FlexEvent.ENTER, doLogin);

Where doLogin, obviously, is your login function and <form field> is a field on your form.