Programming Flex 3

MXML Component Basics

To understand MXML components it helps to understand that MXML files are just classes behind the scenes. When an MXML file is compiled, the compiler translates the file to ActionScript and then compiles it into native Flash Player bytecode. This means that everything you can build in MXML you can also build in ActionScript. MXML code usually is shorter and easier to read than the equivalent ActionScript code. This makes MXML more convenient to work with than ActionScript in many cases. At the same time, because MXML is ultimately compiled to the same bytecode as ActionScript is, there is no loss in performance or features. This makes MXML ideal for application layout.

Now that you understand the benefits of working with MXML over ActionScript, let’s discuss how to create a class, optimally implement its common features, and decouple application components written in MXML within an application.

Creating and Using a Component

To create a component in MXML, you create a new file with the root tag corresponding to the class you want to extend, and with a filename corresponding to the class name of the component. Typically when segmenting an application, the base class (root tag) will be a container component. In Figure 9-2, our contact details component example, the base class is the Canvas container. Example 9-1 provides the code for the Canvas container.

Example 9-1. ContactDetails.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> ...