Join David Gassner for an in-depth discussion in this video Defining MXML components, part of Flash Builder 4 and Flex 4 Essential Training.
When you build a large-scale Flex application, you want to break it down into small pieces known as components. While it's possible to create complete applications in a single MXML file, they quickly become difficult to maintain. These are sometimes called monolithic applications, that mix up the application file, all of the individual visual components, and any ActionScript logic. In this chapter of the video series, I'm going to describe how to create MXML components, reusable bits of code written in MXML as MXML files that can then be instantiated or used in your applications.
For all of the demonstrations in this chapter, I'll use a project that's included with the Exercise Files. Go to the menu and choose File > Import Flex Project, Browse, then select and import a file called Components.fxp. Open the new project's source folder and it's default package and then open the application file HanselAndPetal.mxml. In this application, there is a BorderContainer, which contains an image tag which in turn embeds a SWF file. I am going to run the application and show that it displays that graphic and another one in the lower right-hand corner.
This application has a nice beginning visual appearance, but already we can see there's quite a bit of MXML code at the top level of the application. You might want to take that code and convert it into a reusable component that can then be used in other parts of the application as necessary. So I am going to start by creating a component that encapsulates the presentation of the logo. When you create your own custom components, it's strongly recommended that you place them in sub-folders or packages within the application, rather than in the source code root folder.
This really improves your ability to maintain the application over the long-term. I've already created a folder called components and I am going to place my new component there. I'll right-click on the components folder or Ctrl+click on Mac and choose New > MXML Component. In this dialog, I'm asked for the component name. A component name is the same thing as a class name. You have to follow ActionScript naming conventions. The name can include letters, numbers and the underscore characters. But in a component definition, it should always start with an initial uppercase alphabetical character.
I'm going to name my first component SimpleComp. Then I'm going to indicate which existing component I want to base it on. This relationship will be that of a superclass and a subclass or of inheritance. When you create your own custom component, you can extend any visual component in the Flex SDK. Now, my goal is to replace all of this longer code with a single component call. So I'm going to base my first component on the BorderContainer. I'll click the Browse button and in the dialog that pops up, I'll type the beginning of the name of the component that I want to extend, BorderContainer, and then I'll select it.
The Based on value now indicates the fully qualified name of the component, spark.components.BorderContainer. The BorderContainer component supports absolute widths and heights, but if you want it to just resize itself automatically based on its nested contents, delete the width and height from this dialog and then click Finish. This is what a basic component looks like. It's just like an MXML application but the root element, instead of being Application, is the component that this component extends or subclasses.
Now, to replicate the functionality at the top level of the application, I'll go back to the application. I'll start by selecting and copying all of the nested content within the BorderContainer. I'll take the layout setting and the image and I'll copy it to the clipboard. Then I'll go back to the component, I'll make a little bit of space between the tags and I'll paste the copied code into place. There are other important settings in the original code that I'm going to need. I'll go back to HanselAndPetal.mxml and I'll select all of the styles that are creating the BorderContainer's appearance.
Notice that I'm not taking the x and y properties, which determine the position of the BorderContainer. Those will be set from the application level eventually. I'll copy those settings to the clipboard and return to my component. Then I'll paste those settings in the place and now my component is complete. I can look at it in Design view, completely isolated from the rest of the application, and see that it successfully presents the BorderContainer and its nested image. I'll return to HanselAndPetal.mxml.
So that's how you create a very basic MXML component. Once you have defined an MXML component, you can use it in any part of the application. You can instantiate it. That is, create an instance of the component using MXML or ActionScript code. I'll show you how to do those steps in separate 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)?