Add change event to a custom MXML component

Question

I am building an MXML project in Flash Builder 4.5
I have a custom MXML component that contains a TextInput field. I want the custom component to have a change event that triggers a function in the main application.
I created a test project to try and solve this.  At the moment, it appears to trigger an event once and then stops.  Please take a look and let me know where I am going wrong. Many thanks.
customComponent.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
           width="40" height="20">
    <mx:Script>
    <![CDATA[
        [Bindable]
        public var value:Number;
        protected function inputBox_clickHandler(event:KeyboardEvent):void
            if (event.keyCode == 38 ) {
                keyUp();
            if (event.keyCode == 40 ) {
                keyDown();
        protected function keyUp():void
            value = value++;
            dispatchEvent(new Event('change'))
        protected function keyDown():void
            value = value--;
            dispatchEvent(new Event('change'))
    ]]>
</mx:Script>
<mx:Metadata>
    [Event(name="change", type="flash.events.Event")]
</mx:Metadata>
<mx:TextInput id="inputBox" x="0" y="0" width="40" height="20"
              text="{value}"
              keyDown="inputBox_clickHandler(event)"
              change="dispatchEvent(new Event('change'))"
              />
</mx:Canvas>
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            xmlns:CustomComponents="CustomComponents.*"
            minWidth="955" minHeight="600" layout="absolute">
<mx:Script>
    <![CDATA[
        private function changeTestLabel():void
            testLabel.text = String(myComponent.value);
    ]]>
</mx:Script>
<CustomComponents:customComponent x="180" y="183"
    id="myComponent" value="0"
    change="changeTestLabel()">
</CustomComponents:customComponent>
<mx:Label id="testLabel" x="165" y="206" text="Test label"/>
</mx:Application>

Answer 1

I have found the solution to this...
The clue was that it worked the first time a change was made, changing the value to the default '0'.
The problem was that the var value is type Number and the inputBox.text is type String.
I therefore added the following function:
  protected function textChange():void
   value = Number(inputBox.text);
   dispatchEvent(new Event('change'))
I also changed the  change="dispatchEvent(new Event('change'))"  property to
   valueCommit="textChange()"
... and that fixed it..
Thanks to all those who took the trouble to look at this