Creating Custom Component using MXML


 

Creating Custom Component using MXML

Creating custom components in flex can be performed by two ways. You can customize the component either uusing MXML only or Action Script only or using combination of both

Creating custom components in flex can be performed by two ways. You can customize the component either uusing MXML only or Action Script only or using combination of both

Creating Custom Component using MXML

 

Creating custom components in flex can be performed by two ways. You can customize the component either uusing MXML only or Action Script only or using combination of both. MXML can be used for simple custom components like combining multiple components and make a useful component whereas the action script can be used for complex components.

Below is the example of making custom textinput component. Create mxml file in mycomp package and write code like below:

MyMXMLCustomComponent.mxml

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">

 

      <mx:TextInput textAlign="left" color="green"/>

     

</mx:Canvas>


You can use the above component in another mxml file by setting the mxlns property to the custom component. Here MyComp refers to the any component in mycomp package.

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

      layout="absolute"

      xmlns:MyComp="mycomp.*">

     

      <MyComp:MyMXMLCustomComponent/>

     

</mx:Application>

 

See the output below. Type some text in the input box, you will see green text inside the box.


Ads