Use the Flex Framework with the Least MXML Possible
Mon Feb 15 00:54:09 2010
Using the Flex Framework is great tool to have if you know what you're doing. Sadly, not everyone has the time to put in the extra man hours to learn it, although I would thoroughly recommend trying to do so if you had the chance, as it can speed up your workflow immensely and there are so many pre-made components out there that you are really spoiled for choice.
In any regard, this post is mainly for those people who want to know how they can import components such as the ComboBox, Button, and the infamous DataGrid, and all with the minimum amount of MXML possible. However, I would just like to say before I go any further that it is probably a lot faster and easier in most cases just to learn that little bit of MXML than by doing it all in ActionScript alone... and believe me, being a big ActionScript fan, I was one of the ones who just didn't want to let go either. Anyhow, with all that said, let's get coding.
To my current knowledge, there are a few ways of getting this to work. In this post I will run through what I think is the best way of doing it. First off, you will need to create an MXML file. All files after this one can be ActionScript files, but the main project file must be a MXML file. Inside that file, you will need to place the following code.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:classLocation="*"> <classLocation:myClassName/> </mx:Application>I have set the layout to
absolute
since this will enable you to put your objects anywhere on the screen. Note that there are two more properties that you can play with; vertical
and horizontal
, which I won't go into now, but Flash coders for example will probably feel most at home with absolute
layout.
The important thing to remember for this file is that when importing you own classes, you have to set the location so that flex can find it. I have used xmlns:classLocation="*"
, the * [hash] of which simply denotes 'root level', or the place where the MXML file exists. Alot of flex coders put their custom classes or components inside a folder called components and so they would use xmlns:classLocation="components.*"
. Finally on line 5 we call out custom class/component using classLocation:myClassName/>
. The actual class name is determined in place of 'myClassName'.
Next create an ActionScript file as you would normally. The code below can be used for quick reference.
package{ import mx.core.*; import mx.controls.*; public class Main { public function Main(){ var app:Object = FlexGlobals.topLevelApplication; var l:Label = new Label(); app.addChild(l); l.text = "Minimum MXML"; } } }The code above simply places a label on the stage and sets the text to "Minimum MXML". The important thing to remember here is that in most cases you will need to set a reference to the
FlexGlobals.toplevelapplication
in order to add things to the display list, which is something I discovered recently after the move from Flex 3 to the Flex 4 SDK. On line 9 of the code above, I have created a variable called app, datatyped it to an Object
and set it to FlexGlobals.toplevelapplication
. Now each time I add something to the stage, I use app
as a reference as seen on line 11.
And that's it. Compile the MXML file and you should see the words "Minimum MXML". If you aren't sure on how to compile MXML and ActionScript, take a look at one of my previous posts Compile AS files with Flex SDK
If you would like to download the example files for this post, you can get them from the link below.
Download Minimum MXML files
**Remember though, I do recommend learning a little MXML if that's why you are looking for this information. Don't fight it! You know that you want it really.
Tweet← back