Creating Custom Flex Components Using MXML

Creating custom components allows you to modularize your code, and also make it more reusable. Also, you can extend the functionality of pre-defined components using this concept. So now, lets dive straight into the creation of our own custom component.

Creating custom component involves the use of MXML and some amount of Actionscript too. Now, let us create a ComboBox component that allows the user to choose from True or False. Lets name it BooleanComboBox.

<?xml version="1.0"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:dataProvider>
     <mx:String>TRUE</mx:String>
     <mx:String>FALSE</mx:String>
 </mx:dataProvider>
</mx:ComboBox>

Save this file as BooleanComboBox.mxml. This completes the creation of your custom component using just MXML. As you can see, creating a custom component is not very different from creating an application. The only difference is, the root tag, is not Application, but its ComboBox here. You can change this to the other components to extend them in a similar manner.

Now, to use it in your application, use the following code,

<?xml version="1.0"?>
<mx:application mx="http://www.adobe.com/2006/mxml" cc="*">
 <!-- Use the filename as the MXML tag name. -->
 <cc:BooleanComboBox/>
</mx:Application>

Here, you see that, 'cc' is the namespace to reference your custom component. This is defined in the application tag itself. Then, by using the MXML file's name as the tag name, you are using your custom component in your application.

As simple as that :-)
Next, I will be teaching you, how to create your own custom component using ActionScript. So hang in there !