Modules are classes just like application files. You can create them either in ActionScript or by extending a Flex class by using MXML tags. You can create modules in MXML and in ActionScript.

Creating MXML-based modules

To create a module in MXML, you extend the mx.modules.Module class by creating a file whose root tag is <mx:Module>. In that tag, ensure that you add any namespaces that are used in that module. You must also include an XML type declaration tag at the beginning of the file, such as the following:

<?xml version="1.0"?>

The following example is a module that includes a Chart control:

<?xml version="1.0"?>
<!-- modules/ColumnChartModule.mxml -->
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" >
    <mx:Script><![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable]
        public var expenses:ArrayCollection = new ArrayCollection([
            {Month:"Jan", Profit:2000, Expenses:1500},
            {Month:"Feb", Profit:1000, Expenses:200},
            {Month:"Mar", Profit:1500, Expenses:500}
        ]);
    ]]></mx:Script>
    <mx:ColumnChart id="myChart" dataProvider="{expenses}">
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries 
                xField="Month" 
                yField="Profit" 
                displayName="Profit"
           />
           <mx:ColumnSeries 
                xField="Month" 
                yField="Expenses" 
                displayName="Expenses"
            />
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
</mx:Module>

After you create a module, you compile it as if it were an application. For more information on compiling modules, see Compiling modules.

After you compile a module, you can load it into an application or another module. Typically, you use one of the following techniques to load MXML-based modules:

• ModuleLoader -- The ModuleLoader class provides the highest-level API for handling modules. For more information, see Using the ModuleLoader class to load modules.
• ModuleManager -- The ModuleManager class provides a lower-level API for handling modules than the ModuleLoader class does. For more information, see Using the ModuleManager class to load modules.

Creating ActionScript-based modules

To create a module in ActionScript, you can create a file that extends either the mx.modules.Module class or the mx.modules.ModuleBase class.

Extending the Module class is the same as using the <mx:Module> tag in an MXML file. You should extend this class if your module interacts with the framework; this typically means that it adds objects to the display list or otherwise interacts with visible objects.

To see an example of an ActionScript class that extends the Module class, create an MXML file with the root tag of <mx:Module>. When you compile this file, set the value of the keep-generated-actionscript compiler property to true. The Flex compiler stores the generated ActionScript class in a directory called generated. You will notice that this generated class contains code that you probably will not understand. As a result, you should not write ActionScript-based modules that extend the Module class; instead, you should use MXML to write such modules.

If your module does not include any framework code, you can create a class that extends ModuleBase. If you use the ModuleBase class, your module will typically be smaller than if you use a module based on the Module class because it does not have any framework class dependencies.

The following example creates a simple module that does not contain any framework code and therefore extends the ModuleBase class:

// modules/asmodules/SimpleModule.as
package {
    import mx.modules.ModuleBase;

    public class SimpleModule extends ModuleBase {
        public function SimpleModule() {
            trace("SimpleModule created");
        }
    
        public function computeAnswer(a:Number, b:Number):Number {
            return a + b;
        }
    }
}

To call the computeAnswer() method on the ActionScript module, you can use one of the techniques shown in Accessing modules from the parent application.