3 Replies Latest reply on Jun 17, 2010 2:58 PM by rtalton

    How to register a change in field value on a panel ?

    MoreGart111

      I have a panel with three  TextInput fields populated with some default values and a disabled "Save" button. I want to enable the "Save" only when at least one of the three TextInput fields have been changed.

       

      I am looking for a better way of doing it. Currently, the logic is to register the "CHANGE" event on each field and handle the event by comparing the new and old values on each field. Basincally I am dealing on field-by-field basis.

        • 1. Re: How to register a change in field value on a panel ?
          Matt Le Fevre Level 4

          I am looking for a better way of doing it.

           

          is a rather ambiguous statement.

           

          Do you mean you want to be able to add more components into the Panel, without having to setup change event handlers for each one as they're added?

           

          In which case something like this might help:

           

          private function init():void
          {
               for each(var item in panel.getChildren())
               {
                    item.addEventListener(Event.CHANGE, doChange);
               }
          }
          

           

          or do you mean you want to eliminate the need for the change event handler you've written alltogether? In which case you could do something like this for your save button

           

          <mx:Button x="38" y="100" label="Save" 
                      enabled="{textInput1.text != 'default 1' 
                      || textInput2.text != 'default 2' 
                      || textInput3.text != 'default 3'}"
                      />
          
          • 2. Re: How to register a change in field value on a panel ?
            rtalton Level 4

            A quick question. How do you know what the text was before the change event is triggered?

            • 3. Re: How to register a change in field value on a panel ?
              rtalton Level 4

              I  re-read your post and answered my own question.

               

              Try creating a custom MXML component based on TextInput, like this:

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml"
                   change="handleChange(event)"
                   text="{DEFAULT_TEXT}" >

               

              <mx:Metadata>
                  [Event(name="TEXTINPUT_VALUE_CHANGED", type="flash.events.Event")]
                  [Event(name="TEXTINPUT_VALUE_IS_DEFAULT", type="flash.events.Event")]
              </mx:Metadata>

               

                  <mx:Script>
                      <![CDATA[
                     
                          [Bindable]
                          public var DEFAULT_TEXT:String;

               

                          private function handleChange(event:Event):void{
                              if (event.target.text != DEFAULT_TEXT){
                                  this.dispatchEvent(new Event('TEXTINPUT_VALUE_CHANGED',true));
                              }else{
                                  this.dispatchEvent(new Event('TEXTINPUT_VALUE_IS_DEFAULT',true));
                              }
                          }
                      ]]>
                  </mx:Script>
              </mx:TextInput>

               

              Drop this custom component into your application, adding event handlers:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                  xmlns:comps="comps.*" >

               

              <mx:Script>
                  <![CDATA[
                      private function handle_TextInputChange():void{
                          btnSubmitChanges.enabled = true;
                      }       
                      private function handle_TextInputIsDefault():void{
                          btnSubmitChanges.enabled = false;
                      }
                  ]]>
              </mx:Script>  

               

                  <comps:TextInputChangeTracker
                      DEFAULT_TEXT="This is the default text."
                      TEXTINPUT_VALUE_CHANGED="handle_TextInputChange()"
                      TEXTINPUT_VALUE_IS_DEFAULT="handle_TextInputIsDefault()"
                      width="350"/>

               

                  <mx:Button id="btnSubmitChanges" label="Submit Changes"
                      enabled="false"
                      x="100" y="50"/>

               

              </mx:Application>

               

              HTH!