<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF">
     
    <mx:Script>
      <![CDATA[
      private var _phoneNumeber:String = "";
      // Bind getter function to phoneNumberChanged event
      [Bindable(event="submitClicked")]
      [NonCommittingChangeEvent("change")]
      public function get phoneNumber():String {
        return _phoneNumeber;
      }
      // Setter method.
      public function set phoneNumber(value:String):void {
        if (value.length<10) {
          _phoneNumeber = value;
        } else {
          _phoneNumeber = phoneFormatter.format(value);
        }
        var eventObj:Event = new Event("change");
        dispatchEvent(eventObj);
      }       
      private function clickHandler():void{
        // Create and dispatch event 
        var eventObj:Event = new Event("submitClicked");
        dispatchEvent(eventObj);
      }
      ]]>
    </mx:Script>
    <mx:PhoneFormatter id="phoneFormatter" 
      formatString="( 
)  
-  
" validPatternChars="#-() "/>



    <mx:Panel title="Bind with Getters and Setters"  width="500" height="90" 
      paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"
      layout="horizontal">          
      <mx:TextInput id="ti1" change="phoneNumber=ti1.text" maxChars="10" restrict="0-9"/>
      <mx:TextInput id="ti2" text="{this.phoneNumber}"/>
      <mx:Button label="Submit" click="this.clickHandler()"/>
    </mx:Panel>
  </mx:Application>