Alex Uhlmann: Best Practice: Code Behind versus MXML Script Blocks versus View Helper

« Download Distortion Effects – From MAX 2006 | Main | Creating a Popup in a Cairngorm Architecture »

February 04, 2007

Best Practice: Code Behind versus MXML Script Blocks versus View Helper

Often I see the question coming up on whether to use MXML Script blocks, Code Behind or Helper classes.

I think the question behind the question we're addressing here is not whether to use Code Behind, MXML Script blocks or View Helpers, but is actually where is it best to place functionality in a Flex application.

But first of all, let’s have a quick rundown on what Code Behind, View Helper and MXML Script blocks actually are:

If you come from the ASP world you might be familiar with Code Behind, if not more information about Code Behind can be found at the livedocs and at the devnet.

The Script block is the part of an MXML file dedicated to ActionScript methods and properties.

For example:

<mx:Script>
	private function doSomething() : void
{
		blah…
}
</mx:Script>

For a View Helper, people might have different definitions. Personally, I’d define a View Helper as an ActionScript class that a MXML can call and listen to directly. Typically it contains the code related to the accompanying MXML and might even simply contain the functionality that developers otherwise would put in MXML Script blocks. It can have references to the view, such as the Cairngorm View Helper (which are not a recommended approach). I’d call ActionScript classes that help the view with more defined and fewer responsibilities utility classes. Utility classes usually don’t have references to views. They could i.e. be formatters.

Personally I find Code Behind is indeed a nice and quick way to organize functionality. However, I’d argue that if you would move code from a MXML Script block into a Code Behind class, you’re just changing the location and potentially rough syntax of that code. After this “refactoring”, your code still lives in the same context.

In a middle and larger scale application i.e. using Cairngorm, I’d advocate extracting functionality from views into unit-testable model and utility classes. IMHO such classes are best created when they don’t contain any references to views and few responsibilities. They should be simple ActionScript classes without dependencies on other contexts such as view components.

I’m not saying you couldn’t unit-test Code Behind classes. It is like unit-testing Cairngorm View Helpers, people have done this and are doing it successfully. However, I just find it easier to unit-test and also reuse classes that contain defined functionality adhering to OOP rules. If you keep your functionality in view code, this functionality often has much more responsibilities to keep track of.

Once you're focusing on extracting the right functionality from your views and commands into unit testable utility classes and an application model deciding if you'd rather have Code Behind, View Helper or an MXML script block becomes less of an important decision to take. Once you've extracted functionality out of views, the view code left, isn't usually that big. Just converting this view code into a different syntax (Code Behind, View Helper or MXML script block) doesn't necessarily make it much better.

Posted by auhlmann at February 4, 2007 10:56 AM

Comments

Any chance you'd be willing to post a small before and after code example, to illustrate your methodology?

Thanks,

-Scott

Posted by: Scott at February 8, 2007 02:55 PM

A small example would be really helpful. I'm trying my hardest to use best practices when writing Flex applications.

I'm not entirely sure what you mean by "I’d advocate extracting functionality from views into unit-testable model and utility classes".

Do you mean creating several models, one for each view?

Posted by: Ed Brocklebank at February 19, 2007 05:40 AM

Hi Ed and Scott,

I hear you and I plan on making this a focus on this blog in future. For now however, you can read this series of blog entries
http://cairngormdocs.org/blog/?p=20

Best,
Alex

Posted by: AlexU at February 22, 2007 08:48 AM

Hi, we are new to Flex development so the separation of MXML and ActionScript code is an important issue for us now. I have some experience with ASP.NET (not ASP as you suggest) so code-behind looked familiar to me but then I asked - what's the real advantage of code behind when compared to mx:Script source='...'? I was able to come up with this:

* The same for both approaches is that ActionScript now lives outside of MXML which is a good thing

* Disadvantage of code behind is that you are creating 2 classes instead of one. You do so only to separate code from MXML, not for any other "valid" OOP reason.

Surprisingly, I was not able to find any advantage to code behind so we deprecated this approach as smart but nor really useful or adding any value. What do you think?

Posted by: Borek at May 25, 2007 04:53 AM

Thanks for your sharing!

Posted by: Biometric at August 15, 2007 02:41 AM

"I’d advocate extracting functionality from views into unit-testable model and utility classes. IMHO such classes are best created when they don’t contain any references to views and few responsibilities. They should be simple ActionScript classes without dependencies on other contexts such as view components."

With that said why not just use the source property of a script tag and external AS files not classes. I know you don't go into implementing code-behind here but Adobe officially suggests inheritence, and because of this it seems the standard way Flex developers are now approaching it.

This fails in seperating logic from view. An AS file containing all logic, bindable properties an no references to the view is a much tidier approach IMO.

Posted by: Tink at August 19, 2007 05:48 PM

Thanks for this very good article ... Can i translate this and insert on my site in Poland? ... Thanks and Greetings

Posted by: Buy photo at September 8, 2007 05:08 AM

Thanks a lot for this article.

Posted by: najlepsze tapety at November 6, 2007 04:01 AM

A small example would be really helpful. I'm trying my hardest to use best practices when writing Flex applications.

Posted by: sharp aquos at December 19, 2007 01:21 PM

Many thanks for share us the Code-Link on Livedocs and devnet. Very usefully!

thanks from Germany, Werbeagentur

Posted by: Webdesign at February 4, 2008 11:52 PM

Post a comment




Remember Me?