Flex 2 Developer's Guide > Using Flex Programming Languages > Developing Applications in MXML > Developing applications > Defining custom MXML components

Defining custom MXML components

Custom MXML components are MXML files that you create and use as custom MXML tags in other MXML files. They encapsulate and extend the functionality of existing Flex components. Just like MXML application files, MXML component files can contain a mix of MXML tags and ActionScript code. The name of the MXML file becomes the class name with which you refer to the component in another MXML file.

The following example shows a custom ComboBox control that is prepopulated with list items:

<?xml version="1.0"?>

<!-- MyComboBox.mxml -->

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:ComboBox >
        <mx:dataProvider>
            <mx:String>Dogs</mx:String>
              <mx:String>Cats</mx:String>
            <mx:String>Mice</mx:String>
        </mx:dataProvider>
    </mx:ComboBox>
   
</mx:VBox>

The following example shows an application that uses the MyComboBox component as a custom tag. The value * assigns the local namespace to the current directory.

<?xml version="1.0"?>
<!-- MyApplication.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComps="containers.boxes.*">

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >

        <MyComps:MyComboBox/>

    </mx:Panel>
</mx:Application>

The following image shows the application rendered in a web browser window:

For more information about MXML components, see Creating Simple MXML Components in Creating and Extending Flex 2 Components.

You can also define custom Flex components in ActionScript. For more information, see Creating Simple Visual Components in ActionScript in Creating and Extending Flex 2 Components.

Flex 2.01

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/201/html/mxml_051_19.html

Add Comment