<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate PhoneFormatter. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
                
            import mx.events.ValidationResultEvent;            
            private var vResult:ValidationResultEvent;

            // Event handler to validate and format input.            
            private function Format():void
            {
                vResult = pnVal.validate();
                if (vResult.type==ValidationResultEvent.VALID) {
                    formattedPhone.text= phoneFormatter.format(phone.text);
                }
              
                else {
                    formattedPhone.text= "";
                }
            }
        ]]>
    </mx:Script>

    <mx:PhoneFormatter id="phoneFormatter" 
        formatString="(###) ###-####" validPatternChars="#-() "/>

    <mx:PhoneNumberValidator id="pnVal" source="{phone}" property="text" 
            allowedFormatChars=""/>

    <mx:Panel title="PhoneFormatter Example" width="75%" height="75%" 
            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form>
            <mx:FormItem label="Enter a 10-digit phone number:">
                <mx:TextInput id="phone" text="" width="75%"/>
            </mx:FormItem>

            <mx:FormItem label="Formatted phone number: ">
                <mx:TextInput id="formattedPhone" text="" width="75%" editable="false"/>
            </mx:FormItem>

            <mx:FormItem>
                <mx:Button label="Validate and Format" click="Format();"/>
            </mx:FormItem>
        </mx:Form>

    </mx:Panel>
</mx:Application>