Skip navigation
GuyOX4
Currently Being Moderated

Add change event to a custom MXML component

Nov 29, 2012 10:50 AM

Tags: #flash #flash_builder #flex #custom_component #mxml #flex4.5

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>

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points