1 Reply Latest reply on Nov 29, 2012 12:10 PM by GuyOX4

    Add change event to a custom MXML component

    GuyOX4 Level 2

      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>

        • 1. Re: Add change event to a custom MXML component
          GuyOX4 Level 2

          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