All public properties defined in your component are accessible in MXML by using MXML tag properties. For example, you might allow the user to pass a value to your component, as the following example shows:

 <MyComp:MyCustomComponent prop1="3"/>

To create a component that takes tag attributes in MXML, you define a public variable with the same name as the tag attribute in your class definition:

 public class MyCustomComponent extends TextArea { 
 	 
 	// Define an uninitialized variable. 
 	public var prop1:Number; 
  
 	// Define and initialize a variable. 
 	public var prop2:Number=5; 
 	... 
 }

You can also use public getter and setter methods to define a property, as the following example shows:

 public class MyCustomComponent extends TextArea { 
 	 
 	private var _prop1:Number; 
  
 	public function get prop1():Number { 
 		// Method body. 
 		// Typically the last line returns the value of the private variable.  
 		return _prop1; 
 	} 
 	 
 	public function set prop1(value:Number):void { 
 		// Typically sets the private variable to the argument.  
 		_prop1=value; 
 		// Define any other logic, such as dispatching an event. 
 	} 
 }

You can define and initialize a private variable, as the following example shows:

 private var _prop2:Number=5;

When you specify a value to the property in MXML, Flex automatically calls the setter method. If you do not set the property in MXML, Flex sets it to its initial value, if you specified one, or to the type's default value, which is NaN for a variable of type Number.

In the following example, you use the Control+Alt+I key combination to extend the TextArea control to let the user increase the font size by one point, or use the Control+Alt+M key combination to decrease the font size by one point:

package myComponents 
{ 
    // createcomps_as/myComponents/TextAreaFontControl.as    
    import spark.components.TextArea; 
    import flash.events.KeyboardEvent; 
    import flash.events.Event; 
    
    public class TextAreaFontControl extends TextArea 
    { 
        // Constructor  
        public function TextAreaFontControl() { 
            super(); 
 
            // Add event listeners. 
            addEventListener("keyDown", myKeyDown);     
            addEventListener("creationComplete", myCreationComplete);       
        }       
        // Define private var for current font size. 
        private var currentFontSize:Number; 
 
        // Define a public property for the minimum font size. 
        public var minFontSize:Number = 5;      
        // Define a public property for the maximum font size. 
        public var maxFontSize:Number = 15; 
        
        // Initialization event handler for getting default font size. 
        private function myCreationComplete(eventObj:Event):void {           
            // Get current font size 
             currentFontSize = getStyle('fontSize'); 
        } 
 
        // keyDown event handler. 
        private function myKeyDown(eventObj:KeyboardEvent):void {   
            // Was Ctrl key pressed? 
            if (eventObj.ctrlKey) 
            {                       
                switch (eventObj.keyCode) { 
                    // Was Ctrl+Alt+I pressed?  
                    case 73 : 
                        if (currentFontSize < maxFontSize) { 
                            currentFontSize = currentFontSize + 1; 
                            setStyle('fontSize', currentFontSize); 
                        } 
                        break; 
                    // Was Ctrl+Alt+ pressed?  
                    case 77 : 
                        if (currentFontSize > minFontSize) { 
                            currentFontSize = currentFontSize - 1; 
                            setStyle('fontSize', currentFontSize); 
                        } 
                        break; 
                    default : 
                        break; 
                }           
            } 
        } 
    } 
}

Notice that the call to the getStyle() method is in the event listener for the creationComplete event. You must wait until component creation is complete before calling getStyle() to ensure that Flex has set all inherited styles. However, you can call setStyle() in the component constructor to set styles.

This example uses variables to define public properties to control the maximum font size, maxFontSize, and minimum font size, minFontSize, of the control. Users can set these properties in MXML, as the following example shows:

<?xml version="1.0"?> 
<!-- createcomps_as/MainTextAreaFontControl.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:MyComp="myComponents.*"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <MyComp:TextAreaFontControl id="myTAFS" 
        minFontSize="8" 
        maxFontSize="50"/> 
    
    <s:Button 
        label="Get Font Size" 
        click="myTA.text=String(myTAFS.getStyle('fontSize'));"/> 
    <s:TextArea id="myTA"/>      
</s:Application>

There are no restrictions on using public variables to define public properties, However, it's best to use getter and setter methods so that you can control user interaction with your component, as described in Defining properties as getters and setters.

The following example code defines a component named TextAreaFontControlGetSet that replaces the public property definition for the maxFontSize property shown in Defining public properties as variables:

package myComponents 
{ 
    // createcomps_as/myComponents/TextAreaFontControlGetSet.as    
    import spark.components.TextArea; 
    import flash.events.KeyboardEvent; 
    import flash.events.Event; 
    
    public class TextAreaFontControlGetSet extends TextArea 
    { 
        public function TextAreaFontControlGetSet() 
        { 
            super(); 
            addEventListener("keyDown", myKeyDown);     
            addEventListener("creationComplete", myCreationComplete);       
        }       
        private var currentFontSize:Number; 
        public var minFontSize:Number = 5;      
        // Define private variable for maxFontSize. 
        private var _maxFontSize:Number = 15; 
            
        // Define public getter method. 
        public function get maxFontSize():Number { 
            return _maxFontSize; 
        } 
                
        // Define public setter method. 
        public function set maxFontSize(value:Number):void { 
            if (value <= 30) { 
                _maxFontSize = value; 
            } else _maxFontSize = 30; 
        } 
        
        private function myCreationComplete(eventObj:Event):void {           
            // Get current font size 
             currentFontSize = getStyle('fontSize'); 
        } 
 
        // keyDown event handler. 
        private function myKeyDown(eventObj:KeyboardEvent):void {   
            // Was Ctrl key pressed? 
            if (eventObj.ctrlKey) 
            {                       
                switch (eventObj.keyCode) { 
                    // Was Ctrl+Alt+I pressed?  
                    case 73 : 
                        if (currentFontSize < maxFontSize) { 
                            currentFontSize = currentFontSize + 1; 
                            setStyle('fontSize', currentFontSize); 
                        } 
                        break; 
                    // Was Ctrl+Alt+M pressed?  
                    case 77 : 
                        if (currentFontSize > minFontSize) { 
                            currentFontSize = currentFontSize - 1; 
                            setStyle('fontSize', currentFontSize); 
                        } 
                        break; 
                    default : 
                        break; 
                }           
            } 
        } 
    } 
}

In this example, the setter method checks that the specified font size is less than the predefined limit of 30 pixels. If the font size is greater than the limit, it sets it to the limit.

You can define a default property for your ActionScript components by using the [DefaultProperty] metadata tag. You can then use the default property in MXML as the child tag of the component tag without specifying the property name. For more information on using the default property, including an example, see Defining public properties as variables.

You can use the [DefaultProperty] metadata tag in your ActionScript component to define a single default property, as the following example shows:

package myComponents 
{ 
    // createcomps_as/myComponents/TextAreaDefaultProp.as 
    import spark.components.TextArea; 
 
    // Define the default property. 
    [DefaultProperty("defaultText")] 
 
    public class TextAreaDefaultProp extends TextArea { 
    
        public function TextAreaDefaultProp() 
        { 
            super(); 
        }       
        // Define a setter method to set the text property 
        // to the value of the default property. 
        public function set defaultText(value:String):void { 
            if (value!=null) 
            text=value; 
        } 
 
        public function get defaultText():String { 
            return text; 
        } 
    }    
}

In this example, you add a new property to the TextArea control, called defaultText, and specify it as the default property of the control. The setter method for defaultText just sets the value of the text property of the control. You can then use the default property in MXML, as the following example shows:

<?xml version="1.0"?> 
<!-- createcomps_as/MainTextAreaDefaultProp.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:MyComp="myComponents.*"> 
 
    <MyComp:TextAreaDefaultProp>Hello</MyComp:TextAreaDefaultProp> 
</s:Application>

The one place where Flex prohibits the use of a default property is when you use the ActionScript class as the root tag of an MXML component. In this situation, you must use child tags to define the property, as the following example shows:

<?xml version="1.0"?> 
<!-- as/myComponents/TextAreaDefaultPropMXML.mxml --> 
<MyComp:TextAreaDefaultProp xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:MyComp="myComponents.*"> 
 
        <MyComp:defaultText>Hello</MyComp:defaultText> 
        
</MyComp:TextAreaDefaultProp>

Properties in your custom components can take advantage of data binding. Any property defined as a variable or defined by using a setter and getter method can automatically be used as the destination of a binding expression.

For example, in the section Defining public properties in ActionScript, you created a class with the public property maxFontSize. You can use the maxFontSize property as the destination of a binding expression, as the following example shows:

<?xml version="1.0"?> 
<!-- createcomps_as/MainTextAreaFontControlBindingDest.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:MyComp="myComponents.*" > 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <MyComp:TextAreaFontControl id="myTA" 
        maxFontSize="{Number(myTI.text)}"/> 
 
    <s:Label text="Enter max font size."/> 
    <s:TextInput id="myTI" text="25"/> 
</s:Application>

In this example, any value that the user enters into the TextInput control is automatically copied to the maxFontSize property.

When a property is the source of a data binding expression, Flex automatically copies the value of the source property to any destination property when the source property changes. However, in order to signal to Flex to perform the copy, you must register the property with Flex and the source property must dispatch an event.

To register a property as a source for data bindings, you use the [Bindable] metadata tag. You can use this tag in three places:

• Before a class definition, in order to make all public properties defined as variables usable as the source of a binding expression. You can also do this by using setter and getter methods, in which case you use the [Bindable] tag before the getter method.

• Before a property that a variable defines, in order to make that specific property support binding

• Before a getter method for a property implemented by using setter and getter methods

For more information on the [Bindable] metadata tag, see Metadata tags in custom components.

The following example modifies the component in the section Defining public properties in ActionScript to make the maxFontSize and minFontSize properties usable as the source for data bindings:

	// Define public properties for tracking font size. 
	[Bindable] 
	public var maxFontSize:Number = 15; 
	[Bindable] 
	public var minFontSize:Number = 5;

If you omit the event name from the [Bindable] metadata tag, Flex automatically dispatches an event named propertyChange when the property changes to trigger the data binding. If the property value remains the same on a write operation, Flex does not dispatch the event or update the property.

When you define a property by using getter and setter methods so that the property is usable as the source for data binding, you include the [Bindable] metadata tag before the getter method, and optionally include the name of the event dispatched by the setter method when the property changes, as the following example shows:

package myComponents 
{ 
    // createcomps_as/myComponents/TextAreaFontControlBinding.as    
    import spark.components.TextArea; 
    import flash.events.KeyboardEvent; 
    import flash.events.Event; 
    
    public class TextAreaFontControlBinding extends TextArea 
    { 
        public function TextAreaFontControlBinding() 
        { 
            super(); 
            addEventListener("keyDown", myKeyDown);     
            addEventListener("creationComplete", myCreationComplete);       
        }       
        private var currentFontSize:Number; 
        public var minFontSize:Number = 5;      
        // Define private variable for maxFontSize. 
        public var _maxFontSize:Number = 15; 
            
        // Define public getter method, mark the property 
        // as usable for the source of data binding, 
        // and specify the name of the binding event. 
        [Bindable("maxFontSizeChanged")] 
        public function get maxFontSize():Number { 
            return _maxFontSize; 
        } 
 
        // Define public setter method. 
        public function set maxFontSize(value:Number):void { 
            if (value <= 30) { 
                _maxFontSize = value; 
            } else _maxFontSize = 30; 
 
            // Dispatch the event to trigger data binding. 
            dispatchEvent(new Event("maxFontSizeChanged")); 
        }        
        
        private function myCreationComplete(eventObj:Event):void {           
            // Get current font size 
             currentFontSize = getStyle('fontSize'); 
        } 
 
        // keyDown event handler. 
        private function myKeyDown(eventObj:KeyboardEvent):void {   
            // Was Ctrl key pressed? 
            if (eventObj.ctrlKey) 
            {                       
                switch (eventObj.keyCode) { 
                    // Was Ctrl+Alt+I pressed?  
                    case 73 : 
                        if (currentFontSize < maxFontSize) { 
                            currentFontSize = currentFontSize + 1; 
                            setStyle('fontSize', currentFontSize); 
                        } 
                        break; 
                    // Was Ctrl+Alt+M pressed?  
                    case 77 : 
                        if (currentFontSize > minFontSize) { 
                            currentFontSize = currentFontSize - 1; 
                            setStyle('fontSize', currentFontSize); 
                        } 
                        break; 
                    default : 
                        break; 
                }           
            } 
        } 
    
    } 
}

In this example, the setter updates the value of the property, and then dispatches an event to trigger an update of any data binding destination. The name of the event is not restricted. You can use this component in an application, as the following example shows:

<?xml version="1.0"?> 
<!-- createcomps_as/MainTextAreaFontControlBindingSource.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:MyComp="myComponents.*"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <MyComp:TextAreaFontControlBinding id="myTA" 
        maxFontSize="{Number(myTI.text)}"/> 
 
    <s:Label text="Enter max font size."/> 
    <s:TextInput id="myTI" text="15"/> 
    
    <s:Label text="Current max font size."/> 
    <s:TextArea text="{String(myTA.maxFontSize)}"/>    
</s:Application>