I personally dont like hardcoding things like texts and labels inside any compiled code, reason being , when it needs to be changed for whatever reason, I have to go through the pain of loading the project and making the change and then compiling it again and deploying it again , all for one little change. Its always better to save as many as possible config’s in a separate file (XML being the more appropriate choice).

Each MXML component has loads of attributes. The most commonly used ones being toolTip, text, label and other strings like Validator error messages or some other hardcoded text. So how do we make our application so that we are able to change all these without a re-compile ? Well, one of my friends (must say, very good at Flex) and myself (not so good yet;)) came up with this solution.

I will try and explain the structure of the XML we ended up with. The idea is, whatever the name of your MXML file, the XML must have the same tags in it. e.g. if you have a file called LoadXML.mxml in your Flex application, you need to make a XML file and it should look like this :-

<LoadXML>
<label_btnClose>CLOSE ME</label_btnClose>
<label_btnPrint>PRINT ME</label_btnPrint>
</LoadXML>

These XML nodes you see, e.g. label_btnClose, the first part (“label”) is the actual property of a component which has an id called “btnClose” inside LoadXML.mxml . You can literally remove all the string properties and hardcoded stuff from your MXML file and put them all in here.

The idea here is to come up with a XML parser function that reads this XML file, looks for anything under MyPreview in XML and parses it in a way that it actually applies the underlying properties to the named components on the fly, in MyPreview.mxml. And that basically means that, once you have compiled your Flex app, you just need to modify your XML to manage how your application’s look n feel or text labels (remember you can actually use this for internationalization as well).

Now, lets create a simple MXML file to implement this.

<mx:Script>
<![CDATA[
import classes.PropertyHandler;
private function doInit():void
{
PropertyHandler.addEventListener("fileReady", this.fileLoaded);
PropertyHandler.init();
}
private function fileLoaded(e:Event):void
{
PropertyHandler.applyLangSet(this, this.className);
this.btnMisc.label = PropertyHandler.getControlLang(this.className).miscText;
}
]]>
</mx:Script>
<mx:VBox id="myVBox">
<mx:Button id="btnClose"  />
<mx:Button id="btnPrint" />
<mx:Button id="btnMisc" label=""/>
</mx:VBox>

As you can see, all it does is create 3 buttons with different ID’s and on initialization, it loads the XML file via a static class called propertyHandler which actually reads the XML files and applies the labels to the buttons. btnClose and btnPrint do have a label property in the XML whereas btnMisc gets its label via an individual property in the XML file. The code should explain it all. Few things to keep in mind though :-

1) PropertyHandler is the main class here which is doing the job, have a look at it.
2) This works only for string properties, not for anything else. So, labels, texts, validator messages would all work fine.
3) Each MXML file you want to use this on, must do a applyLangSet on creationComplete in order for this to work.
4) When you make any changes to XML, restart your browser to see the changes being reflected.

If I missed anything, let me know and I’ll be happy to assist.

Oh, the demo is here , right click to view source.