Separating ActionScript from MXML: Approach 5

Christophe Coenraets posted an entry on his blog demonstrating four different techniques to write a simple temperature converter application.

The purpose of the entry was specifically to demonstrate four different ways to accomplish the same thing–showing how flexible Flex really is. The goal for this application was to separate the ActionScript out of the MXML files.

I’d like to follow up on this entry and demonstrate a fifth approach. This is something one of the Flex engineers proposed earlier and in my opinion is the cleanest method. Instead of using an <mx:Script> tag and including functions that get dropped into the current class, we can create a Controller class and link it through tags. This keeps tags in MXML, ActionScript in external files, promotes OOP programming, and simplifies reuse.

Here is the MXML file using this approach:

<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
initialize="appController.initialize();">

    <TempConverterController view="{this}" id="appController" />

    <mx:Label text="Temperature in Farenheit:" />
    <mx:TextInput id="farenheit" width="120" />
    <mx:Button id="myButton" label="Convert" />
    <mx:Label text="Temperature in Celsius:" />
    <mx:Label id="celsius" width="120" fontSize="18" />

</mx:Application>

Notice the TempConverterController class which. We bind the MXML generated class to the controller as the view and open initialization tell the controller to initialize itself. Here’s the ActionScript for
TempConverterController:


class TempConverterController {
   [Inspectable]

   public var view;
   function initialize() {

      view.myButton.addEventListener("click", this);

   }
   function click(event) {

      view.celsius.text=(view.farenheit.text-32)/1.8;

   }

}

This is a clean little class that stands by itself. This is a very simple example, but is easily expanded to implement a real MVC paradigm within Flex applications and keep MXML totally separate from ActionScript.

(I want to thank the Flex team for granting me permission to post this information).

12 thoughts on “Separating ActionScript from MXML: Approach 5”

Brian Burns on December 25, 2003 at 6:44 pm said:

What about using something similar to XML Events as defined in the W3C’s XForms spec (http://www.w3.org/TR/xml-events/), where event binding can be done with a seperate XML document containing Event binding tags? That way your UI markup has absolutely no event specific information in it. You already have something similar with the tag for binding data to the UI.
home loans on November 2, 2004 at 11:44 am said:

Hello there,

Iwas browsing the web and found this blog. Some interesting quotes. Keep them coming!

Alice
home loans
Bob Staple on November 16, 2004 at 5:38 pm said:

Guten Tag – Hier ist ein sehr schooner Site. Cheap Staples

Danke!
Bob Staple
Actaeus on October 15, 2006 at 9:44 am said:

diet pill phentermine
sfdgdf on January 25, 2007 at 11:11 am said:

dsfsdfsd sfgsf efgsf
fdgsfdg on January 25, 2007 at 1:11 pm said:

hi..good site..by..
Caiek on February 3, 2007 at 8:02 am said:

So much spam (
alex on April 12, 2007 at 8:41 pm said:

hi nice site.
network storage on November 17, 2011 at 1:50 am said:

Great blog here! Additionally your website so much up very fast! What host are you the usage of? Can I get your associate link in your host? I desire my site loaded up as fast as yours lol
WebDirectory Link bid on December 20, 2011 at 9:06 am said:

You already know thus considerably in relation to this topic, made me in my opinion consider it from so many numerous angles. Its like men and women don’t seem to be fascinated unless it’s one thing to accomplish with Woman gaga! Your personal stuffs outstanding. All the time deal with it up!
yerel haberler on January 3, 2012 at 4:58 pm said:

Nice blog here! Additionally your website a lot up very fast! What host are you using? Can I get your affiliate link to your host? I want my site loaded up as fast as yours lol
videos para rir on July 18, 2014 at 2:25 am said:

Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest
twitter updates. I’ve been looking for a plug-in like this for quite some time and
was hoping maybe you would have some experience with
something like this. Please let me know if you run into anything.
I truly enjoy reading your blog and I look forward to
your new updates.

rewindlife.com

Technical discussion of Flex, Flash, and RIA development

Separating ActionScript from MXML: Approach 5

12 thoughts on “Separating ActionScript from MXML: Approach 5”

Leave a Reply Cancel reply