Apache Flex® - Simple MXML components

Applications for Flex typically consist of multiple MXML and ActionScript files, and each MXML file is a separate MXML component. MXML components let you encapsulate functionality in a reusable component, extend an existing Flex component by adding new functionality to it, and reference the MXML component by using an MXML tag.

For information on advanced techniques for creating MXML components, see Advanced MXML components.

About MXML components

In typical applications, you do not code the entire application within a single source code file. Such an implementation makes it difficult for multiple developers to work on the project simultaneously, makes it difficult to debug, and discourages code reuse.

Instead, you develop applications by using multiple MXML and ActionScript files. This architecture promotes a modular design, code reuse, and lets multiple developers contribute to the implementation.

MXML components are MXML files that you reference by using MXML tags from within other MXML files. One of the main uses of MXML components is to extend the functionality of an existing Flex component.

For example, Flex supplies a ComboBox control that you can use as part of a form that collects address information from a customer. You can use a ComboBox to let the user select the State portion of the address from a list of the 50 states in the U.S. In an application that has multiple locations where a user can enter an address, it would be tedious to create and initialize multiple ComboBox controls with the information about all 50 states.

Instead, you create an MXML component that contains a ComboBox control with all 50 states defined within it. Then, wherever you must add a state selector to your application, you use your custom MXML component.

Creating MXML components

An application that uses MXML components includes a main MXML application file, which contains the <s:Application> root tag, and references one or more components that are defined in separate MXML and ActionScript files. Each MXML component extends an existing Flex component, or another MXML component.

You create an MXML component in an MXML file where the component's filename becomes its MXML tag name. For example, a file named StateComboBox.mxml defines a component with the tag name of <StateComboBox>.

The root tag of an MXML component is a component tag, either a Flex component or another MXML component. The root tag specifies the namespace definitions for the component. For example, the following MXML component extends the standard Flex ComboBox control.

<?xml version="1.0"?> 
<!-- createcomps_mxml/StateComboBox.mxml --> 
<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"> 
 
    <s:dataProvider> 
        <s:ArrayList> 
            <fx:String>AK</fx:String> 
            <fx:String>AL</fx:String> 
            <!-- Add all other states. --> 
        </s:ArrayList> 
    </s:dataProvider> 
</s:ComboBox>

As part of its implementation, a custom MXML component can reference another custom MXML component.

The main application, or any other MXML component file, references the StateComboBox component, as the following example shows:

<?xml version="1.0"?> 
<!-- createcomps_mxml/MXMLMyApplication.mxml --> 
<s:Application 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:MyComp="*"> 
 
    <MyComp:StateComboBox/> 
</s:Application>

In this example, the main application file includes a new namespace definition of xmlns:MyComp="*" as part of the <s:Application> tag. This namespace definition specifies the location of the MXML component. In this case, it specifies that the component is in the same directory as the main application file.

As a best practice, store your components in a subdirectory. For example, you can write this file to the myComponents directory, a subdirectory of your main application directory. For more information on the namespace, see Developing applications in MXML.

The StateComboBox.mxml file specifies the ComboBox control as its root tag, so you can reference all of the properties of the ComboBox control within the MXML tag of your custom component, or in the ActionScript specified within an <fx:Script> tag. For example, the following code specifies the maxChars property and a listener for the close event for your custom control:

<?xml version="1.0"?> 
<!-- createcomps_mxml/MyApplicationProps.mxml--> 
<s:Application 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:local="*"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <fx:Script> 
        <![CDATA[ 
 
            import flash.events.Event; 
 
            private function handleCloseEvent(eventObj:Event):void { 
                myTA.text="foo"; 
            }   
        ]]> 
    </fx:Script> 
 
    <local:StateComboBox maxChars="25" 
        close="handleCloseEvent(event);"/> 
    <mx:TextArea id="myTA" /> 
</s:Application>

Limitation on the default property of the root tag

Many Flex components define a single default property. The default property is the MXML tag property that is implicit for content inside of the MXML tag if you do not explicitly specify a property. For example, consider the following MXML tag definition:

 <s:SomeTag> 
 	anything here 
 </s:SomeTag>

If this tag defines a default property named default_property, the preceding tag definition is equivalent to the following code:

 <s:SomeTag> 
 	<s:default_property> 
 		anything here 
 	</s:default_property> 
 </s:SomeTag>

However, the default property mechanism does not work for root tags of MXML components. In this situation, you must use child tags to define the default property, as the following example shows:

 <?xml version="1.0"?> 
 <s:SomeTag xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/halo"> 
 	<s:default_property> 
 		anything here 
 	</s:default_property> 
 </s:SomeTag>

MXML components and ActionScript classes

When you create a custom MXML component, you define a new ActionScript class where the class name corresponds to the filename of the MXML component. Your new class is a subclass of the component's root tag, and therefore inherits all of the properties and methods of the root tag. However, because you are defining the component in MXML, many of the intricacies of creating an ActionScript class are hidden from you.

For example, in Creating MXML components, you defined the component StateComboBox.mxml by using the <s:ComboBox> tag as its root tag. Therefore, StateComboBox.mxml defines a subclass of the ComboBox class.

Creating composite MXML components

A composite MXML component is a component that contains multiple component definitions within it. To create a composite component, you specify a container as its root tag, and then add components as children of the container.

For example, the following component contains an address form created by specifying a Form container as the root tag of the component, and then defining several children of the Form container. One of the <mx:FormItem> tags contains a reference to the <MyComp:StateComboBox> tag that you created in Creating MXML components:

<?xml version="1.0"?> 
<!-- createcomps_mxml/AddressForm.mxml --> 
<s:Form 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:MyComp="*"> 
 
    <s:FormItem label="NameField"> 
        <s:TextInput/> 
    </s:FormItem> 
 
    <s:FormItem label="Street"> 
        <s:TextInput/> 
    </s:FormItem> 
 
    <s:FormItem label="City" > 
        <s:TextInput/> 
    </s:FormItem> 
 
    <s:FormItem label="State" > 
        <MyComp:StateComboBox/> 
    </s:FormItem> 
</s:Form>

The following application file references the AddressForm component in the <AddressForm> tag:

<?xml version="1.0"?> 
<!-- createcomps_mxml/MyApplicationAddressForm.mxml--> 
<s:Application 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:MyComp="*" > 
 
    <MyComp:AddressForm/> 
</s:Application>

If you include child tags of the root container tag in an MXML component file, you cannot add child tags when you use the component as a custom tag in another MXML file. If you define an empty container in an MXML file, you can add child tags when you use the component as a custom tag.

Note: The restriction on child tags refers to the child tags that correspond to visual components. Visual components are subclasses of the UIComponent component. You can always insert tags for nonvisual components, such as ActionScript blocks, styles, effects, formatters, validators, and other types of nonvisual components, regardless of how you define your custom component.

The following example defines an empty Form container in an MXML component:

<?xml version="1.0"?> 
<!-- createcomps_mxml/EmptyForm.mxml --> 
<s:Form xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
/>

This component defines no children of the Form container; therefore, you can add children when you use it in another MXML file, as the following example shows:

<?xml version="1.0"?> 
<!-- mxml/MainEmptyForm.mxml--> 
<s:Application 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:MyComp="*"> 
 
    <MyComp:EmptyForm>    
        <s:FormItem label="Name"> 
            <s:TextInput/> 
        </s:FormItem> 
    </MyComp:EmptyForm> 
</s:Application>

The AddressForm.mxml file specifies the Form container as its root tag. Because you define a container as the root tag of the MXML component, you are creating a subclass of that container, and you can reference all of the properties and methods of the root tag when using your MXML component. Therefore, in the main application, you can reference all of the properties of the Form container in the MXML tag that corresponds to your custom component, or in any ActionScript code in the main application. However, you cannot reference properties of the children of the Form container.

For example, the following example sets the fontSize property and a listener for the creationComplete event for your custom control, but you cannot specify properties for the child CheckBox or TextInput controls of the Form container:

<?xml version="1.0"?> 
<!-- createcomps_mxml/MainEmptyFormProps.mxml--> 
<s:Application 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:MyComp="*"> 
 
    <fx:Script> 
        <![CDATA[ 
            import mx.events.FlexEvent; 
 
            private function handleCreationCompleteEvent(event:FlexEvent):void { 
                // Handle creationComplete event. 
            }   
        ]]> 
    </fx:Script> 
 
    <MyComp:AddressForm fontSize="15" 
        creationComplete="handleCreationCompleteEvent(event);"/> 
</s:Application>

To configure the children of a custom MXML component, you define new properties in the MXML component, and then use those new properties to pass configuration information to the component children. For more information, see Advanced MXML components.

Scoping in custom components

Scoping is mostly a description of what the this keyword refers to at any given point in your application. In an <fx:Script> tag in an MXML file, the this keyword always refers to the current scope. In the main application file, the file that contains the <s:Application> tag, the current scope is the Application object; therefore, the this keyword refers to the Application object.

In an MXML component, Flex executes in the context of the custom component. The current scope is defined by the root tag of the file. So, the this keyword refers not to the Application object, but to the object defined by the root tag of the MXML file.

For more information on scoping, see Using ActionScript.

The root tag of an MXML component cannot contain an id property. Therefore, if you refer to the object defined by the root tag in the body of the component, you must use the this keyword, as the following example shows:

<?xml version="1.0"?> 
<!-- createcomps_mxml/myComponents/StateComboBoxThis.mxml --> 
<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    close="handleCloseEvent(event);"> 
 
    <fx:Script> 
        <![CDATA[ 
 
            import flash.events.Event; 
 
            // Define a property to hold the current index. 
            public var stateIndex:Number;               
            private function handleCloseEvent(eventObj:Event):void { 
                stateIndex = this.selectedIndex; 
            }   
        ]]> 
    </fx:Script> 
 
    <s:dataProvider>   
        <s:ArrayList> 
            <fx:String>AK</fx:String> 
            <fx:String>AL</fx:String> 
        </s:ArrayList> 
    </s:dataProvider> 
</s:ComboBox>

This example defines an event listener for the ComboBox control that updates the stateIndex property when the ComboBox control closes.

Applying styles to your custom component

Along with skins, styles define the look and feel of your Flex applications. You can use styles to change the appearance of a single component, or apply them across all components.

When working with custom components, you have several options for how you use styles. You can define your custom components so that they contain no style information at all. That design allows the application developer who is using your component to apply styles to match the rest of their application. For example, if you define a custom component to display text, the application developer can style it to ensure that the font, font size, and font style of your component match the rest of the application.

Alternatively, you might develop a component that you want to deploy with a built-in look so that it is not necessary for application developers to apply any additional styles to it. This type of component might be useful for applications that require a header or footer with a fixed look, while the body of the application has more flexibility in its look.

Or you might develop a custom component by using a combination of these approaches. This type of design lets application developers set some styles, but not others.

For general information on Flex styles, see Styles and themes. For information on creating custom styles, see Custom style properties.

Applying styles from the custom component

You can choose to define styles within your MXML component so that the component has the same appearance whenever it is used, and application developers do not have to worry about applying styles to it.

In the definition of your custom component, you define styles by using one or both of the following mechanisms:

Tag properties
Class selectors

The following custom component defines a style by using a tag property of the ComboBox control:

<?xml version="1.0"?> 
<!-- createcomps_mxml/myComponents/StateComboBoxWithStyleProps.mxml --> 
<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
 
    fontWeight="bold" 
    fontSize="15"> 
 
    <s:dataProvider>   
        <s:ArrayList> 
            <fx:String>AK</fx:String> 
            <fx:String>AL</fx:String> 
        </s:ArrayList> 
    </s:dataProvider> 
</s:ComboBox>

Alternatively, you can define these styles by using a class selector style declaration, as the following example shows:

<?xml version="1.0"?> 
<!-- createcomps_mxml/myComponents/StateComboBoxWithStyleClassSel.mxml --> 
<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    styleName="myCBStyle"> 
 
    <fx:Style> 
        .myCBStyle { 
            fontWeight : bold; 
            fontSize : 15; 
            } 
    </fx:Style> 
 
    <s:dataProvider>   
        <s:ArrayList> 
            <fx:String>AK</fx:String> 
            <fx:String>AL</fx:String> 
        </s:ArrayList> 
    </s:dataProvider> 
</s:ComboBox>

Note: You cannot define a type selector in an MXML component. If you define a type selector, a compiler error occurs.

Application developers can apply additional styles to the component. For example, if your component defines styles for the open duration and font size, application developers can still specify font color or other styles. The following example uses StateComboBoxWithStyleProps.mxml in an application and specifies the font color style for the control:

<?xml version="1.0"?> 
<!-- mxml/MainStyleWithPropsAddColor.mxml --> 
<s:Application 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:MyComp="myComponents.*"> 
 
    <MyComp:StateComboBoxWithStyleProps color="red"/> 
    
</s:Application>

Applying styles from the referencing file

When you reference an MXML component, the referencing file can specify style definitions to the MXML component by using the following mechanisms:

Tag properties
Class selectors
Type selectors

The styles that application developers can apply correspond to the styles supported by the root tag of the MXML component. The following example uses a tag property to set a style for the custom MXML component:

<?xml version="1.0"?> 
<!-- createcomps_mxml/MainStyleWithPropsOverrideOpenDur.mxml --> 
<s:Application 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:MyComp="myComponents.*"> 
 
    <MyComp:StateComboBoxWithStyleProps 
        fontSize="12"/> 
</s:Application>

When you specify styles as tag attributes, those styles override any conflicting styles set in the definition of the MXML component.

You can use a class selector to define styles. Often you use a class selector to apply styles to specific instances of a control, as the following example shows:

<?xml version="1.0"?> 
<!-- createcomps_mxml/MainStyleOverrideUsingClassSel.mxml --> 
<s:Application 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:MyComp="myComponents.*"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <fx:Style> 
        .myStateComboBox { 
            color : green; 
        } 
    </fx:Style> 
    <MyComp:StateComboBoxWithStyleProps 
        styleName="myStateComboBox"/> 
    <s:ComboBox> 
        <s:dataProvider>   
            <s:ArrayList> 
                <fx:String>AK</fx:String> 
                <fx:String>AL</fx:String> 
            </s:ArrayList> 
        </s:dataProvider> 
    </s:ComboBox> 
</s:Application>

In this example, you use the styleName property in the tag definition of an MXML component to apply styles to a specific instance of the MXML component. However, those styles are not applied to the ComboBox control defined in the main application file, nor would they be applied to any other instances of StateComboBox.mxml unless you also specify the styleName property as part of defining those instances of the MXML component.

When you specify any styles by using a class selector, those styles override all styles that you set by using a class selector in the MXML file. Those styles do not override styles that you set by using tag properties in the MXML file.

You can also use a type selector to define styles. A type selector applies styles to all instances of a component, as the following example shows:

<?xml version="1.0"?> 
<!-- createcomps_mxml/MainStyleOverrideUsingTypeSel.mxml --> 
<s:Application 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:MyComp="myComponents.*"> 
 
    <fx:Style> 
        @namespace "myComponents.*"; 
        StateComboBoxWithStyleProps { 
            color : red; 
        } 
    </fx:Style> 
    <MyComp:StateComboBoxWithStyleProps/> 
</s:Application>

In this example, the type selector specifies the color style for all instances of the StateComboBox control in the application. Notice that with type selectors, you also have to include a namespace definition for the component in the <fx:Style> tag.

When you specify any styles by using a type selector, those styles override all styles that you set by using a class selector in the MXML file. Those styles do not override styles that you set by using tag properties in the MXML file.

Applying a type selector to the root tag of a custom component

All custom components contain a root tag that specifies the superclass of the component. In the case of StateComboBox.mxml, the root tag is <s:ComboBox>. If you define a type selector for the ComboBox control, or for a superclass of the ComboBox control, in your main application file, that style definition is also applied to any custom component that uses a ComboBox control as its root tag, as the following example shows:

<?xml version="1.0"?> 
<!-- createcomps_mxml/MainStyleOverrideUsingCBTypeSel.mxml --> 
<s:Application 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:MyComp="myComponents.*"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|ComboBox { 
            fontSize: 15; 
            color: red; 
        } 
    </fx:Style> 
    <MyComp:StateComboBoxWithStyleProps/> 
    <s:ComboBox> 
        <s:dataProvider>   
            <s:ArrayList> 
                <fx:String>AK</fx:String> 
                <fx:String>AL</fx:String> 
            </s:ArrayList> 
        </s:dataProvider> 
    </s:ComboBox> 
</s:Application>

In this example, all ComboBox controls and all StateComboBox.mxml controls have a fontSize of 15 points and red text.

If you define a type selector for a superclass of the custom control and for the custom control itself, Flex ignores any conflicting settings from the type selector for the superclass, as the following example shows:

<?xml version="1.0"?> 
<!-- mxml/MainStyleOverrideUsingCBTypeSelConflict.mxml --> 
<s:Application 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:MyComp="myComponents.*"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        @namespace "myComponents.*"; 
        s|ComboBox { 
            color: red; 
            fontSize: 15; 
        } 
        StateComboBoxWithStyleProps { 
            color: green; 
        } 
    </fx:Style> 
    <MyComp:StateComboBoxWithStyleProps/> 
    <s:ComboBox> 
        <s:dataProvider>   
            <s:ArrayList> 
                <fx:String>AK</fx:String> 
                <fx:String>AL</fx:String> 
            </s:ArrayList> 
        </s:dataProvider> 
    </s:ComboBox> 
</s:Application>

In this example, the StateComboBox control uses green text, and the values for the fontSize style specified in the type selector for the ComboBox control.

Applying styles from a defaults.css file

Flex includes a global style sheet, named defaults.css, inside the framework.swc file in the /frameworks/libs directory. This global style sheet contains style definitions for the global class selector and type selectors for most Flex components. Flex implicitly loads the defaults.css file and applies it to all Flex applications during compilation.

One of the most common ways for you to distribute your custom MXML and ActionScript components is to create a SWC file. A SWC file is an archive file of Flex components that make it easy to exchange components among Flex developers. You need to exchange only a single file, rather than the MXML or ActionScript files, images, and other resource files. The SWF file inside a SWC file is compiled, which means that the code is hidden from casual view.

For more information about SWC files, see Flex compilers.

A SWC file can contain a local style sheet, named defaults.css, that contains the default style settings for the custom components defined within the SWC file. When Flex compiles your application, it automatically applies the local defaults.css to the components in your SWC file. In this way, you can override the global defaults.css style sheet with the local version in your SWC file.

The only requirements on the local version are:

You can include only a single style sheet in the SWC file.
The file must be named defaults.css.
The file must be in the top-most directory of the SWC file.

For example, you define a custom ComboBox control, named StateComboBox.mxml, as the following example shows:

<?xml version="1.0"?> 
<!-- createcomps_mxml/StateComboBox.mxml --> 
<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"> 
 
    <s:dataProvider> 
        <s:ArrayList> 
            <fx:String>AK</fx:String> 
            <fx:String>AL</fx:String> 
            <!-- Add all other states. --> 
        </s:ArrayList> 
    </s:dataProvider> 
</s:ComboBox>

Notice that this control does not define any style settings.

Then you create a defaults.css file in the same directory to define the default style settings for the custom component, as the following example shows:

@namespace "*"; 
StateComboBox 
{ 
    arrowButtonWidth: 40; 
    cornerRadius: 10; 
    fontSize: "14"; 
    fontWeight: "bold"; 
    color: red; 
    leading: 0; 
    paddingLeft: 10; 
    paddingRight: 10; 
}

To create the SWC file, you run the compc command-line compiler from the directory that contains the defaults.css and StateComboBox.mxml files. Use the include-file option to specify the style sheet, as the following example shows:

 flex_install_dir\bin\compc -source-path .  
 	-include-classes StateComboBox  
 	-include-file defaults.css defaults.css  
 	-o MyComponentsSWC.swc

This example creates a SWC file named MyComponentsSWC.swc.

Note: You can also use the include-stylesheet option to include the style sheet if the style sheet references assets that must be compiled, such as programmatic skins or other class files. For more information, see Flex compilers.

Then you write an application, named CreateCompsDefaultCSSApplication.mxml, that uses the StateComboBox control, as the following example shows:

<?xml version="1.0"?> 
<!-- defaultCSS_app/CreateCompsDefaultCSSApplication.mxml --> 
<s:Application 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:MyComp="*"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <s:Label text="Custom MXML component using defaults.css from SWC file."/> 
    <MyComp:StateComboBox/> 
 
    <s:Label text="Default ComboBox control using the default defaults.css file."/> 
    <s:ComboBox> 
        <s:dataProvider> 
            <s:ArrayList> 
                <fx:String>AK</fx:String> 
                <fx:String>AL</fx:String> 
            </s:ArrayList> 
        </s:dataProvider> 
    </s:ComboBox> 
</s:Application>

Notice that you include a namespace definition for the StateComboBox control in CreateCompsDefaultCSSApplication.mxml to reference the component. Because the MXML component is in the top-most directory of the SWC file, its package name is blank, and you reference it by using a namespace definition of xmlns:MyComp="*".

To compile an application that uses MyComponentsSWC.swc, copy MyComponentsSWC.swc to the directory that contains the application. Then use the -library-path option to the mxmlc command-line compiler, as the following example shows:

 flex_install_dir\bin\mxmlc  
 	-file-specs CreateCompsDefaultCSSApplication.mxml  
 	--library-path+=.

In the previous example, the defaults.css file and the component file were in the same directory. Typically, you place components in a directory structure, where the package name of the component reflects the directory location of the component in the SWC file.

In the next example, you put the StateComboBox.mxml file in the myComponents subdirectory of the SWC file, where the subdirectory corresponds to the package name of the component. However, defaults.css must still be in the top-level directory of the SWC file, regardless of the directory structure of the SWC file. You compile this SWC file by using the following command line:

 flex_install_dir\bin\compc -source-path .  
 	-include-classes myComponents.StateComboBox 
 	-include-file defaults.css defaults.css  
 	-o MyComponentsSWC.swc

To use the StateComboBox.mxml component in your application, you define CreateCompsDefaultCSSApplication.mxml as the following example shows:

<?xml version="1.0"?> 
<!-- defaultCSS_app/CreateCompsDefaultCSSApplicationSubDir.mxml --> 
<s:Application 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:MyComp="myComponents.*"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
  
    <s:Label text="Custom MXML component using defaults.css from SWC file."/> 
    <MyComp:StateComboBox/> 
 
    <s:Label text="Default ComboBox control using the default defaults.css file."/> 
    <s:ComboBox> 
        <s:dataProvider> 
            <s:ArrayList> 
                <fx:String>AK</fx:String> 
                <fx:String>AL</fx:String> 
            </s:ArrayList> 
        </s:dataProvider> 
    </s:ComboBox> 
</s:Application>

Notice that the namespace definition for the StateComboBox control in CreateCompsDefaultCSSApplication.mxml includes myComponents.* to match the directory structure, and package name, of the component in the SWC file.

You can modify and test your defaults.css file without having to recreate the SWC file by using the ‑defaultscssfiles‑‑ option to the compiler. The CSS files added by the -defaults-css-files option have a higher precedence than those in SWC files, so that they can override a corresponding definition in a SWC file.

When you are done modifying the defaults.css file, recreate the SWC file with the updated defaults.css file.

Navigation

Using Flex » Custom components

Adobe and Adobe Flash Platform are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries and are used by permission from Adobe. No other license to the Adobe trademarks are granted.

Simple MXML components