Some recent comments by a JavaScript developer made me consider Flex programming in a new light. Many web developers follow a best practice of always separating their content, styles, and scripts into distinct parts. An HTML document should contain only the structured content of the document. CSS and JavaScript files should be loaded from external sources. As a Flex developer, you have similar building blocks at your disposal. MXML contains the structure of your application, stylesheets modify the application’s appearance, and ActionScript 3 lets you interact with the application’s components. Style and Script elements can load their respective content from other sources when you compile your application. Certainly, Flex developers can benefit from the practice of separating these three parts.
Let’s start out by defining a very simple Flex application. It contains a Button component with blue text that traces some text to the console when a user clicks it with their mouse. Nothing special, but it should help us explore the possibilities.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button label="Click Me!" click="trace('You clicked the button!');" color="#0000ff"/>
</mx:Application>
It’s only three lines of code, and that’s pretty cool. On the other hand, everything appears all mixed together in the MXML. There’s nothing wrong with that code, but let’s explore some possibilities for separation. Consider this more complex version that puts the ActionScript and a styles into their own tags.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button label="Click Me!" click="clickHandler(event)"/>
<mx:Script>
import flash.events.MouseEvent;
private function clickHandler(event:MouseEvent):void
{
trace("You clicked the button!");
}
</mx:Script>
<mx:Style>
Button {color: #0000ff;}
</mx:Style>
</mx:Application>
The majority of MXML files in complex Flex applications will probably look like that. Events will be sent to ActionScript functions and styles will all be defined in one central location. These two items could easily be loaded from external files:
<mx:Script source="myApplicationCode.as"/>
<mx:Style source="myApplicationStyles.css"/>
Surely, that’s separation nirvana… or is it? 😉
The JavaScript developer that I spoke with wondered why you need to call an ActionScript function within the MXML when listening for the click event. That’s a bad thing to do when working with HTML. Visitors with browsers that don’t have JavaScript, or users that turn it off, have trouble when a webpage calls JavaScript functions directly in hyperlinks. Can Flex achieve a stronger separation? Yes, actually it can. Should it? Probably not, but it’s a fun exercise. Consider the following revisions:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button id="myButton" label="Click Me!"/>
<mx:Script>
import flash.events.MouseEvent;
override protected function initializationComplete():void
{
super.initializationComplete();
this.myButton.addEventListener(MouseEvent.CLICK, clickHandler);
}
private function buttonClickHandler(event:MouseEvent):void
{
trace("You clicked the button!");
}
</mx:Script>
<mx:Style>
Button {color: #0000ff;}
</mx:Style>
</mx:Application>
As you can see, we’ve overridden the initializationComplete function to listen for the button’s click event. Now, every line of ActionScript appears inside the Script element. Pretty cool, don’t you think?
Remember, I’m not advocating that everyone go to these lengths to keep scripting, style, and structure apart. It’s far more important in the JavaScript world, but I believe that any developer can learn and grow by studying how other programmers do things–especially those that use different languages. You also shouldn’t over-architect your applications. I’d say that the first example with three lines of code would be the right way to build the example, but such a simple example lets us explore interesting concepts without needing to think about what the code is meant to do.