Macromedia flex 2 Manual

Adding properties and methods to a component

139

Initializing inherited properties with tag attributes in 
MXML

In an MXML component, you can initialize the value of any inherited public, writable 
property by defining a child tag of the MXML component with an 

id

 property that matches 

the name of the inherited property. For example, you define a custom Panel component based 
on the Flex Panel container, named MyPanel.as, as the following example shows:

package myComponents
{
    import mx.containers.Panel;
    import mx.controls.Text;
    import mx.controls.TextInput;

    public class MyPanel extends Panel {

        // Define public variables for two child components.    
        public var myInput:TextInput;
        public var myOutput:TextInput;

        public function MyPanel() {
            super();
        }

        // Copy the text from one child component to another.    
        public function xfer():void {
            myOutput.text = myInput.text;
        }
    }
}

In this example, the MyPanel component defines two variables corresponding to TextInput 
controls. You then create a custom MXML component, named MyPanelComponent.mxml, 
based on MyPanel.as, as the following example shows:

<?xml version="1.0"?>
<!-- myPanelComponent.mxml -->
<MyComps:MyPanel xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComps="myComponents.*">

      <mx:TextInput id="myInput"/>
      <mx:TextInput id="myOutput"/>

</MyComps:MyPanel>

Notice that the value of the 

id

 property for the two TextInput controls matches the variable 

names of the properties defined in the MyPanel component. Therefore, Flex initializes the 
inherited properties with the TextInput controls that you defined in MXML. This technique 
for initializing properties can be referred to as code behind.