Home > Development > blogs

LFFS - 8: MXML Concepts

Adam Flater and Scott Sheridan
April 15, 2008 | Permalink | Comments (2)

Let's continue our focus on the languages of Flex with a little discussion of MXML. We've learned that rich internet applications by their nature have more advanced functionality than say, a typical web page laid out with just HTML. We've also learned that the way a Flex application achieves this advanced functionality is by using ActionScript to provide the "logic" for its applications. Lucky for developers, there's a way to quickly employ the power of ActionScript to create applications that also have the look and feel of anything web based. Flex developers can use MXML.

MXML is a markup language, based on XML and created by Adobe to be used within the Flex platform. Those of you familiar with HTML know that markup languages can be used to control the visual layout of information. If you see markup such as "<p>", you know that what follows that tag is a paragraph. HTML has around a hundred or so specific tags that you use to control a page's visual layout; "<str>", "<body>", "<head>", etc. XML, on the other hand, contains no such specific tags. The "X" in XML stands for extensible, meaning that it's up to you to create your own tags to use in your document. XML is not a language, but rather a sort of "template" for which to create the elements of a language. MXML uses this XML template to provide certain built- in language elements for use within Flex. In this sense, MXML is a true language, the purpose of which is to carry the data of a Flex application.

So why exactly do we use MXML in our Flex applications? First, it helps to understand that all MXML tags refer to ActionScript code. Also, unlike HTML, MXML isn't limited to a set number of tags. Because it's extensible, you can create your own custom tags for use within an application. Just as you can create custom classes in ActionScript, you can use custom tags in MXML to reference those classes. Of course, just as easily, you can use MXML tags to reference built-in ActionScript classes. Consider the following MXML code that creates a Button control in a user interface:

<mx: Button/>

Pretty simple. What's interesting is that very small amount of code refers to some ActionScript code that is a bit more verbose. By simply using the MXML code above, we are telling the compiler to generate all of the ActionScript necessary for the creation of a Button object. The Adobe Developer Connection has a nice representation of what the difference between coding something in MXML, and coding the same thing in ActionScript looks like.

It should be noted that it's possible to code an entire application using just ActionScript, but, as you can see from the example at Adobe, it would take quite a bit more time and effort. MXML always refers to ActionScript code, so by utilizing the brevity of this markup language developers can more efficiently create rich internet applications.

Next, we'll be exploring the syntax of MXML. We'll see how it's similar to other markup languages, and we'll discuss further the roll it plays in Flex applications.

Next: LFFS - 9: MXML Continued... And A Sample Application For You To Work With!