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.


← back

Most recent posts

  1. Flashcards Maker - the app the helps you learn in a flash
  2. Convert Font Suitcase to TTF in 3 Easy Steps
  3. Rain or Shine - Weather Forecast Available Now!
  4. Getting around Apple's silly rules for iOS 10
  5. Localising App Names for iOS and Android

Search site:

Apps by Ubacoda.com

Click the app icons to see more info


Archives

Categories