Flex tags and AS classes (the simple version)

One of the most powerful aspects of Flex is that it creates a simple mapping between tags and ActionScript classes. It’s a simple concept, but time and time again, I find that people who don’t know Flex have trouble understanding how this works, or why it would be useful.

For those of you who are new to Flex, here are the rules, along with some simple examples to get started with this concept.

Example 1 — the first three rules

Rule 1 — Each tag corresponds to a new instance of class Tagname.
Rule 2 — Every attribute turns into a property on the object.
Rule 3 — Every tag with an id turns into a variable of that name.

Let’s say you have a class that looks like this:

public class Contact
    public var home : Location;
    public var work : Location;
    public var firstname : String;
    public var lastname : String;
    public var isFriend : Boolean = false;

You can create an instance of it through an MXML file that looks like this:

<Contact id="myContact" firstname="Susan" lastname="Smith" isfriend="true" />

Roughly speaking, the MXML above is equivalent to the following ActionScript:

var myContact : Contact = new Contact();
myContact.firstname = "Susan";

Simple, eh? Notice that the MXML compiler knows how to deal with all the built-in types. Strings stay as strings, but Booleans turn into true Boolean values, not the string “true”.

But what if you have types that are more complex? That is what rule 4 is for.


Example 2 — complex types

Rule 4 — (exception to rule 1) If a tag doesn’t correspond to a class, it is treated as a property of the enclosing tag, and the contents of the tag are the value for the property.

Look again at our class above. It refers to a Location class. Let’s say the Location class is defined this way:

public class Location
   public var address : String;
   public var state : String;
   public var zip : String;

We can use the following MXML to populate a Contact with a Location in it:

<Contact id="myContact" firstname="Henry" lastname="Smith">
        <Location address="555 Foo Drive" state="CA" zip="94131" />
        <Location address="111 Bar St" state="CA" zip="94102" />

Roughly speaking, this MXML is equivalent to:

var myContact : Contact  = new Contact();
myContact.firstname = "Henry";

var temp: Location = new Location();
temp.address = "555 Foo Drive";
temp.state = "CA";

myContact.home = temp;

temp = new Location();
temp.address = "111 Bar St";
temp.state = "CA";
temp.zip = "94102";

myContact.work = temp;

Example 3 — arrays

Rule 5 — Certain classes define “default properties”. This means that the property tag (rule 4) can be omitted for these properties.
Rule 6 — Array tags can almost always be omitted.

Let’s say we want to create a ContactList object that looks like so (ignore the metadata for now):

public class ContactList
    public var contacts : Array;

Without rules 5 and 6, you would have to do something like this (which is how Flex 1.5 works):

<ContactList id="myList">
            <Contact firstname="Henry" lastname="Smith" />
            <Contact firstname="Susan" lastname="Smith" />

Because we have added metadata to say that contacts is the default property, we can use rules 5 and 6 to compress this down to:

<ContactList id="myList">
    <Contact firstname="Henry" lastname="Smith" />
    <Contact firstname="Susan" lastname="Smith" />

Why is this good?

This allows you to do three things:

  1. If you have a certain set of tags that you want to add to MXML, it’s relatively straightforward. Just add the classes with the right properties and off you go.
  2. Conversely, if you already have a classes and you find yourself needing to represent them in XML, the mapping is already done for you.
  3. Stay sane. After you do this for a while, something weird happens to your brain and you will be able to stare at a block of MXML code and “see” the ActionScript that you would need to write to access any property. This makes it much easier to stay productive. Of course, now that I’ve said that it does something weird to your brain, I don’t know if “stay sane” is the right way to describe this….

Anyway, once you get the hang of it, the equivalence between MXML and ActionScript classes is pretty useful and pretty straightforward. The next post will include some of the gotchas…

20 Responses to “Flex tags and AS classes (the simple version)”

  1. Jorge Tejada

    Excellent! I thought I understand tags, But now, I “really” understand tags :-)

  2. Ben

    Something I found a bit counter intuitive is how you define a subclass in MXML. As I understand it, you simply use the name of the super class as the base tag of your file. I would have expected something closer to Is there another ‘rule’ that would help explain why this is not the case?

    Thanks for another informative article.


  3. Ben

    Woops, that should read “something closer to <mySubClass extends=”mySuperClass” … >

  4. Wheeler Street » MXML Tags and Attributes as they relate to AS classes

    […] http://kuwamoto.org/2006/07/14/flex-tags-and-as-classes-the-simple-version/  […]

  5. Will

    Excellent, helpful post. Will you be explaining how to access class methods via MXML? I’m assuming it’s possible?

  6. michaud

    The thing that got me thrilled is the fact that you can create an mxml control, place it in the folder of your actionscript namespace, and then let an AS control inherit from the mxml control. That means you can create the visual part of a new and complex layed out control and add the functionality on inheriting class. The cool thing of using that AS control as an element in the mxml application realy made me chear :) That gives a realy good separation of xml and AS.

    The only problem is that, in the beta version of flex 2, the designer view doesn’t show a preview of your control.

  7. sho

    Hi folks. Thanks for the feedback.

    I’ll add a followup post in which I talk about how subclassing works.

    Michaud – that’s a great method for separating code from design. Usually, people go the other way (using MXML to subclass the AS, not vice versa) and in fact, there is special compiler support to make that possible.

  8. Ben

    Hi Sho, looking forward to part 2. Something else I found a bit counter-intuitive is that when writing simple AS statements inside MXML attributes, the scope is that of the tag’s parent, not the tag whose attribute you’re editing. I would imagine this is somehow related to the subclassing methodology I mentioned above.

    Thanks again,

  9. sho

    Ok. I’ve addressed some of the issues here : http://kuwamoto.org/2006/07/18/flex-tags-and-as-classes-continued/

  10. Flexed » kuwamoto.org » Flex tags and AS classes (the simple version)

    […] [ Read more… ] […]

  11. joeflash

    If I understand your logic correctly, shouldn’t the code in the third code window under Rule #4 above read:

    myContact.home = temp;

    work = new Location();
    work.address = “111 Bar St”;
    work.state = “CA”;
    work.zip = “94102”;

    myContact.work = temp;

    Great tutorial, BTW. I always wondered how MXML tags related to classes, and now it’s crystal clear, kudos.

  12. joeflash

    Actually, never mind, strike my last post, I got it now.

  13. kuwamoto.org » Blog Archive » Flex tags and AS classes (the exceptions)

    […] Here is the long overdue continuation of this topic. If you haven’t read the first two, you will probably want to at least skim this and this. Go ahead. I’ll wait. […]

  14. Etiquetas Flex y Clases AS (versión simple) at mx:bicherele

    […] (Esta es la traducción del artículo Flex tags and AS classes (the simple version) de Kuwamoto.) […]

  15. Etiquetas Flex y clases AS (versión simple) : Bicherele

    […] AS classes (the simple version) de Kuwamoto.)  tag this | permalink | trackback url Leave aComment […]

  16. Bicherele » Archives » Etiquetas Flex y clases AS (versión simple)

    […] De todas formas, una vez asimiles el concepto, la equivalencia entre MXML y las clases ActionScript son bastantes útiles y directas. (Esta es la traducción del artículo Flex tags and AS classes (the simple version) de Kuwamoto.) […]

  17. watry

    Actually, never mind, strike my last post, I got it now.

  18. mactive » Flex 标签与 AS 类的理解

    […] Flex tags and AS classes (the simple version) […]

  19. Suhaimi

    Thank you. Now my journey to find out how to get TextArea “alwaysShowSelection” is getting closer and closer.

  20. THE EYE OF RIA » Flex 标签和 AS 类(简单版)

    […] 英文原文:《Flex tags and AS classes (the simple version)》 原文地址:http://kuwamoto.org/2006/07/14/flex-tags-and-as-classes-the-simple-version/ […]

Leave a Reply