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 have searched this site and have found many posts that are close to what I want but I have not been able to find exactly what I need and I am now very confused.

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>

GuyOxford GuyOxford · Accepted Answer · 2012-11-29T20:26:40

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.

Add change event to a custom MXML component

1 Answers