Join David Gassner for an in-depth discussion in this video Understanding MXML, part of Flash Builder 4 and Flex 4 Essential Training.
You build Flex 4 applications with two programming languages: MXML and ActionScript. MXML is a pure XML-based language, also known as a Markup Language, which is actually a facade or a convenience language for ActionScript, which means that when you code in MXML, it gets compiled into ActionScript in the background. For the demonstrations in this chapter, I'll work on a new project. I have a number of starting files that are included with the Exercise Files. I'll first start by closing any existing projects.
In the Package Explorer, if you have a project open, such as HelloWorld, right-click on it, or Ctrl+Click on Mac, and choose Close Project. Then follow these steps to import an existing project. Go to the menu and choose File > Import Flex Project. Navigate to the Exercise Files folder, which I've placed on my Desktop. Go to the 03_Languages to the begin folder and then select and import the file Languages.fxp.
Open the project, open its source code root folder named src, open its default package, and then double-click and open the file HelloWorld.mxml. This is the simplest of Flex applications, displaying a simple string on the screen. I am going to use this application to describe the nature of MXML and its component parts. Every Flex main application file is built as an MXML file. That means two things. Number one, that it has a .mxml extension, as this one does, HelloWorld.mxml, but also that its root element uses a tag name, or an element name, that's a part of the MXML language.
Every main application starts with a root element of Application. The Application element in MXML represents an ActionScript Class named spark.components.Application. You can find out what the equivalent ActionScript Class is for any MXML tag by just hovering the cursor over the tag name. You'll see a little bit of help pop-up. It shows you right away the name and package in which the class is stored. But then if you press the F2 key, and that's the same keyboard shortcut on either Mac or Windows, you'll get an expandable window, and you'll be able to open it and scroll it to see more documentation.
Press Escape to make the help go away. In the root element of each MXML file, you'll find a number of XML namespaces declared. When you create a brand-new application, or component, in Flash Builder these three namespaces are included automatically. The first is associated with a namespace prefix of fx. This new namespace represents the MXML language itself, and it tells us that we're working with a version of MXML that was created in 2009. The second namespace is associated with the prefix 's,' and it stands for Spark.
This namespace is associated with all components that are members of the new Spark framework that includes the application tag itself. And finally, the third namespace is associated with the namespace prefix mx. This namespace is associated with the older components, the components that were part of Flex 3 but which we still use in the Flex 4 SDK. When you declare an object using MXML in a Flex application, you start off with the XML prefix - in this case, the letter s which means the Spark framework - and then the name of the tag.
This tag, in turn, is associated with what's called an XML Manifest. An XML Manifest, which is stored in the flex SDK folder, is a mapping of the MXML tags to their equivalent ActionScript Classes. Some classes are associated with the mx prefix, some with the s prefix and some with fx. Here is an example of a prefix that's associated with fx. I'll place the cursor inside the Declarations block. This is where you place non-visual elements, such as simple variable declarations, value objects, class instances and instances of what are known as RPC components, or Remote Procedure Call components.
I'm going to declare a simple string. I'll type in a less than character to start the tag, and then type the word 'string.' The list that pops up is called the Code Assist List, and it shows me a list of all known tags that I can place in this position. I can either press Enter or Return to select an item from the list, or I can use the mouse and double-click. Notice that the Code Assist tool automatically fills in both the tag name and its correct prefix. I'll assign the string an id, which is the equivalent of a variable name, and I'll name it myString.
And then I'll type in the less than character and Flash Builder automatically adds the required end tag. And I'll type in a value of a simple string. So, that's one way of declaring a variable in Flex. When you declare a variable like this in the Declarations block, it makes it persistent for the lifetime of this application, or if you're working in a custom component, for the lifetime of the component. It also makes it public to the rest of the application, meaning that any other part of the application can access that variable, myString, using simple dot notation.
So, now we have examples of the Application component, the string and the label. Now, let's take a look at an example of an mx component, a component from the Flex 3 framework that has not been replaced by a new version. I'll place the cursor after the label tag. I'll type in a less than character and start off with data. There are a number of components that start with the word 'data.' Notice that some are members of the Spark Component Group and others of the MX Component Group. I'll choose the DataGrid. A DataGrid is a component that displays data in rows and columns.
I'll complete the tag by just typing in a slash and greater than character, and then I'll look at the application in Design mode by clicking the Design button, and I'll show you that the DataGrid tag results in creating this component, the DataGrid component. Now, I'm not going to fill it in with complex data right now. The purpose of this lesson is to understand the nature of MXML. When you use MXML, you are declaring instances of classes. There are some MXML tags that don't represent classes. For example, the fx declaration tag is used to wrap instances of non-visual classes, and there are a number of these types of tags as well.
When you build a Flex application, the main application file, again, always is in an MXML file, and then the rest of the application will be made up of a combination of MXML and ActionScript files. And I'll describe the use of ActionScript Code in other videos.
- Understanding the history of Adobe Flex
- Installing the Flash Builder components
- Using Eclipse views and editors
- Programming with MXML and integrating MXML and ActionScript
- Debugging Flex applications
- Adding visual controls to a Flex application interface
- Displaying images and dynamic data
- Formatting with CSS
- Skinning Spark components with MXML graphics
- Creating data entry form components
- Integrating with Apache, PHP and MySQL
Skill Level Beginner
Q: After importing the Debugging.fxp file following the steps outlined in the “Importing and exporting projects as FXP files” video, several of the applications will not run.
When I attempt to debug or run the Variables.mxml or Watchpoints.mxml applications, I am unsuccessful. Pressing F11 to debug causes Flex to look for an application it CAN run, and runs that one. If I Right-Click one of the aforementioned applications and then click Run Application, an error appears that says “This file cannot be launched.”
What is causing this problem?
A: This is a common issue with Flash Builder. Before pressing F11 (or right-clicking and choosing Run Application), set the current MXML application file as the "default" by right-clicking it and choosing "Set as default application".
This should ensure that the application you want to preview opens in the browser when you press F11.
Q: When trying to specify the fontStyle as italic in both ways described in the first and second videos of the “Using Cascading Style Sheets (CSS)” chapter, only the literal string "italic" seems to work. If I use the constant for the same value like this:
I get a warning that reads:
"Design mode: Error during component layout. Choose Design > Refresh to refresh design mode."
Even if I try to refresh, design mode will not work until I change it back to the literal string. I made sure the import for this namespace was there by pressing Ctrl+spacebar, refreshed design mode several times, and even restarted Flash Builder. However, the only solution seems to be to use the literal. Is there a fix for this?
A: The use of constants and bindings in MXML style attributes results in unpredictable results in Design View, as evidenced by this error. Unfortunately, the best you can expect is that design view will render the presentation, but won't show the results of the style setting, because Design View isn't capable of evaluating MXML bindings without the benefit of Flash Player's runtime capabilities.
Q: Is Flash Builder compatible with Mac OS X 10.7 (Lion)?