Question

I have some common code in my MXML files that I’d like to move to the MXML equivalent of a base class, then have various MXML components subclass from that. What is the syntax for doing this in MXML?

Answer 1

MXML is viewed as an ActionScript generation language; and the current version of the Flex Compiler will translate MXML into ActionScript.

So, for all intents and purposes, an MXML class is no different than an ActionScript class. For inheritance purposes, an MXML Class can extend an ActionScript class–you do this every time you create a new Application file. An MXML Class can also extend another MXML class; and the approach is no different than extending an ActionScript class.

First, create your base class in whatever way you prefer. This is a sample class structure which extends a group:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            // shared ActionScript Code here
        ]]>
    </fx:Script>
<!-- shared MXML code here -->
</s:Group>

Let’s assume that you named that file BaseClass.mxml and put it in the directory com.flextras . Your new class that extends the previous class will be something like this:

<?xml version="1.0" encoding="utf-8"?>
<flextras:BaseClass xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:flextras="com.flextras.*" width="400" height="300">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
</flextras:BaseClass>

In Flash Builder, this is pretty easy just by doing “new –> MXML Component” inside a Flash project.