Adobe Flex 3 Help

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.

You can use your custom component in the following Flex application:

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

   <MyComps:MyPanelComponent id="myP"/>

   <mx:Button label="Copy" click="myP.xfer();"/>

</mx:Application>

The executing SWF file for the previous example is shown below:

If the value of the id property of a TextInput control does not match an inherited property name, Flex creates a property of the component, where the id property defines the name of the new property.

To support initialization from MXML, an inherited property must have the following characteristics:

  • The inherited property must be public.

    If you try to initialize a nonpublic inherited property, the Flex compiler issues an error.

  • The inherited property must be writable.

    If you try to initialize a constant, or a property defined by a getter method without a corresponding setter method, the Flex compiler issues an error.

  • The data type of the value that you specify to the inherited property must by compatible with the data type of the property.

    If you try to initialize a property with a value of an incompatible data type, the Flex compiler issues an error.