The example in this section uses a custom formatter component that is defined as an ActionScript file. The name of the formatter is MySimpleFormatter, and it is defined in the file MySimpleFormatter.as. For more information on creating customer formatter components, see Custom Formatters.

The process for compiling an MXML file is the same as for an ActionScript file. For an example of deploying an MXML file, see Simple MXML Components.

Distributing a component as an ActionScript file

When you distribute a component defined as an ActionScript file, you can store it within the same directory structure as your application files or in a directory specified in the ActionScript source path.

The MXML tag name for a custom component consists of two parts: the namespace prefix and the tag name. The namespace prefix tells Flex where to look for the file that implements the custom component. The tag name corresponds to the filename of the component, in this case MySimpleFormatter.as. Therefore, the file MySimpleFormatter.as defines a component with the tag name of <namespace:MySimpleFormatter>.

The main application MXML file defines the namespace prefix used to reference the component in the <mx:Application> tag. When you deploy your formatter as an ActionScript file, you refer to it in one of the following ways:

1. If you store the formatter component in the same directory as the application file, or in a directory that the ActionScript source path (not a subdirectory) specifies, you define the formatter by using an empty package statement, as the following example shows:

   package
   {
       //Import base Formatter class.
       import mx.formatters.Formatter
   
       public class MySimpleFormatter extends Formatter {
           ...
       }
   }
   
   

   You can refer to it as the following example shows. In the following code, the local namespace (*) is mapped to the prefix MyComp.

   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
       xmlns:MyComp="*">
   
       <MyComp:MySimpleFormatter/>
   
   </mx:Application>
   
   

   If the same file exists in the ActionScript source path directory and the application directory, Flex uses the file in the application directory.

2. If you store the formatter component in a subdirectory of the directory that contains the application file, you specify that directory as part of the package statement, as the following example shows:

   package myComponents.formatters
   {
       //Import base Formatter class
       import mx.formatters.Formatter
   
       public class MySimpleFormatter extends Formatter {
           ...
       }
   }
   
   

   In this example, the MySimpleFormatter.as file is located in the myComponents/formatter subdirectory of the main application directory. You map the myComponents.formatters namespace to the MyComp prefix, as the following example shows:

   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="myComponents.formatters.*">
   
       <MyComp:MySimpleFormatter/>
   
   </mx:Application>
   
   

   If multiple files with the same name exist under an ActionScript source path subdirectory and the application subdirectory, Flex uses the file under the application subdirectory.

3. If you store the formatter component in a subdirectory of the ActionScript source path directory, you specify that subdirectory as part of the package statement, as the following example shows:

   package flexSharedRoot.custom.components
   {
       //Import base Formatter class.
       import mx.formatters.Formatter
   
       public class MySimpleFormatter extends Formatter {
           ...
       }
   }
   
   

   You then use a namespace that specifies the subdirectory. The following code declares a component that is in the flexSharedRoot/custom/components directory:

   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns:MyComp="flexSharedRoot.custom.components.*"/>
   
       <MyComp:MySimpleFormatter/>
   
   </mx:Application>
   
   

   If the same file exists in the ActionScript source path directory and the application directory, Flex uses the file in the application file directory.

Distributing a component as a SWC file

To create a SWC file, use the compc compiler in the flex_install_dir/bin directory. The compc compiler generates a SWC file from MXML component source files and/or ActionScript component source files.

In this example, you create a SWC file for a custom formatter component that you defined by using the following package and class definition:

package myComponents.formatters
{
    //Import base Formatter class.
    import mx.formatters.Formatter

    public class MySimpleFormatter extends Formatter {
        ...
    }
}

In this example, the MySimpleFormatter.as file is in the directory c:\flex\myComponentsForSWCs\myComponents\formatters.

You use the following compc command from the flex_install_dir/bin directory to create the SWC file for this component:

.\compc -source-path c:\flex\myComponentsForSWCs\
    -include-classes myComponents.formatters.MySimpleFormatter
    -o c:\flex\mainApp\MyFormatterSWC.swc

In this example, you use the following options of the compc compiler:

In your main application file, you specify the component's namespace, as the following example shows:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="myComponents.formatters.*">

    <MyComp:MyFormatter/>

</mx:Application>

When you distribute SWC files, ensure that the corresponding ActionScript file is not in the directory structure of the application or in the ActionScript source path. Otherwise, Flex might use the ActionScript file, rather than the SWC file.

When you use mxmlc to compile the main application, ensure that the c:\flex\mainApp directory is included in the library path; otherwise, mxmlc cannot locate the SWC file.

For more information about SWC files, see Using the Flex Compilers, and Building Projects.

Distributing a component as an RSL file

You create an RSL by using the compc tool, and then pass the library's location to the compiler when you compile your application. For more information, including an example, see Using Runtime Shared Libraries.