A Primer for Building Flex Applications

Understanding the Flex Class Library

There are three parts to understanding the Flex class library:

• Understanding what you are doing when you type <mx:Button /> or any other tag
• Understanding that the Flex class library parallels the meaning of all those tags
• Being able to read (and find) the ActionScript documentation

First, I'll dig into what it means when you declare a user interface (UI) component using a tag.

Everything Is a Class

The Button class is a great starting point. Take a moment and ask yourself: How do I declare a button in MXML? If you are like most developers, you probably read the documentation and start with something like <mx:Button label=”Hello” />. There is nothing wrong with that, but what did you do? You instantiated a Button object from the class library, and at the same time, you set the label property for the object to a value of “Hello”.

Everything in Flex is a class in the API. Ultimately, when you declare something using a tag, you create an instance of that class. There are two great ways to understand this at a deeper level. The first way is to set Flex up to save the ActionScript it generates that represents your application. The second way is to read specific parts of the documentation (which I will touch on momentarily).

You can enable this option in the flex-config.xml file by changing the property keep-generated-as from "false" to "true". When you enable this option and run your application, Flex will store the ActionScript file that represents your application in the same directory as the original MXML source file. If you open the generated ActionScript file and read it, you can see how Flex instantiates the button (and a lot more). This is not only an excellent way to understand your application at a much lower level but it also gives you an excellent way to debug your code.

ActionScript Class Documentation

Most beginning Flex developers are all too familiar with the Developing Flex Applications documentation, but did you know that there is another set of documentation that explains the class library? The Flex ActionScript and MXML API Reference is a great resource that should feel familiar for those of you familiar with JavaDoc.

In the Flex ActionScript and MXML API Reference, take a closer look at the Button class in the All Classes pane. Here, the docs list classes you can use in your Flex applications in alphabetical order. Find the Button class and click the provided link. The corresponding documentation appears in the main pane.

The first listing on this page is the class hierarchy. The Button class extends SimpleButton, which extends UIComponent, which extends UIObject. Each time a subclass is created, it adds more specifics to the behavior of the parent class. In this case you eventually end up with a full-fledged button and you can still leverage the classes that reside further up the tree for your own component needs. Try the following code example by creating an MXML file and running the application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application  
  xmlns:mx="http://www.macromedia.com/2003/mxml">
	<mx:SimpleButton />
</mx:Application>

This little application is not particularly useful, but now you should understand what it is that you are instantiating. If you scroll further down through the documentation, you will find a plethora of information about properties you may have never known existed. Keep in mind that the class at the bottom of the inheritance chain gets all the functionality of the previous classes. For example, you may have used the “width” property on your buttons before, and now you know that the property is actually implemented all the way back up the tree at UIObject.

If you expand your view and look at a potentially more complex UI component, you will find some interesting correlations between the classes and their MXML declarations. Most developers try the DataGrid control in one of their first projects (more on that later). A typical DataGrid declaration might look something like the following code listing:

<mx:DataGrid>
  <mx:columns>
    <mx:Array>
      <mx:DataGridColumn headerText=”Name” />
      <mx:DataGridColumn headerText=”Price” />
    </mx:Array>
  </mx:columns>
</mx:DataGrid>

Now that you know this code simply instantiates a class, what does the MXML do? If you reference the API documentation I mentioned above, you can see that “columns” is a property on the DataGrid class, and that it takes an Array of DataGridColumn objects. In turn, the DataGridColumn class has a “headerText” property that is displayed at the top of the column. Bringing this concept full circle, can you think of another way to declare a Button class with a label?

<mx:Button>
  <mx:label>Hello</mx:label>
  <mx:toolTip>Now I get it!</mx:toolTip>
</mx:Button>

To make this a little more interesting I added the toolTip property as well (found on UIObject). You can use this technique in a number of scenarios; more importantly, is that you now understand how the tags relate to the class library. Now you can read the MXML API and understand how to instantiate those classes, as necessary, in your Flex applications. It may seem that you are done, but you can take this quite a bit further.

Tip: The default layout of a Panel may look like it is a VBox container, but it is actually a Box with the direction property set to vertical. VBox and HBox layout containers are convenience classes that extend from Box. It turns out then that if you want to lay out controls inside of a Panel in a horizontal direction, you can set the direction property to horizontal. No need to nest another container!

Revisiting MXML Components

How does all this discussion on classes relate to making custom components? If MXML tags simply declare classes and set properties, shouldn’t you then be able to create a component subclass using MXML? You bet you can, and the good news is that if you have played with Flex at all, it is likely that you have already done this to some degree, probably using an <mx:HBox> container or <mx:VBox> container! It is easy enough to understand how to take a box and make a subclass of that box by adding components to it, but what if you wanted to create a Label control subclass?

Now that you understand the class structure and how you declare those classes in MXML, you can extend even the most basic component without having to resort to a pure ActionScript class. In this example, I wanted to create a Label subclass that would handle formatting of currency automatically. In short, I wanted to move the CurrencyFormatter that I might otherwise use in my main application, inside of the Label component itself.

In a new MXML file, start with the standard XML declaration. After the XML declaration, establish an instance of the Label class. You are creating a component, so don’t forget to specify the appropriate namespace. Once you have created an instance of the Label class, your code should look like the following code snippet:

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.macromedia.com/2003/mxml">

</mx:Label>

Since this Label subclass handles currency, the text property probably doesn’t make complete sense; add a property to the class that accepts a numeric value into a property called amount. Remember that Number is just another class, and that you can declare classes in MXML. You will likely also want to set the initial value of the new Label subclass to a numeric value (such as 0).

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.macromedia.com/2003/mxml">
  <mx:Number id=”amount”>0</mx:Number>
</mx:Label>

Lastly, format the text property that the label displays by default. There are formatter classes available in Flex, so it makes sense to use an instance of one of those formatters inside the new Label class. Add an instance of the CurrencyFormatter class as a property in your new subclass and set the values, formatting it as you prefer. Then, declare the text property and use the CurrencyFormatter.format() method to fine tune your display.

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.macromedia.com/2003/mxml">
  <mx:Number id="amount">0</mx:Number>
  <mx:CurrencyFormatter id="currency" precision="2" rounding="nearest" />
  <mx:text>{currency.format( amount )}</mx:text>
</mx:Label>

Congratulations, you have just created an MXML subclass for a simple control! Save your new MXML subclass as CurrencyLabel.mxml and reuse it. This is a very simple example, and probably one that’s not altogether useful, but it further illustrates that what you do in tags is what you might otherwise do using ActionScript. The principles of object-oriented programming really start to shine through and you can start finding ways to apply common design patterns to your applications.

Next steps: Think about how you might apply validation, and raise and handle runtime errors if your application passed an alphabetic value to your new CurrencyLabel class.

Page 2 of 4

Previous Page

Next Page