detect change in Flex Form elements (textinput, textarea, combobox, checkbox..)

Question

I have various (read lots of..) flex forms in my app, and I now want to create a system by which the user is notified that he hasn't saved if he modifies anything in the form...

now.. I don't want to rewrite every form I have.. is there some nice way to implement this? Extending the TextInput (and others..) classes somehow?

thanks

Answer 1

You could go into the TextInput class (and others) and add that event listener and function, but then you would be changing the SDK itself, which is kind of a bad idea. I would create custom classes extending the ones your using and do a find/replace to make it faster.

Answer 2

This is not really thought through but should work.

You could create a custom component, let's call it FormWatcher which you would than put next to your Form. What the form watcher would do is wait for the CreationComplete event from the form.

So now, as we have the Form ready you can use the getChildren() method of the form to get all the FormItems in it. Than look inside each of them, and you will get TextInputs, Comboboxes, etc. to which you can add event listeners (as individual components), eg.

        // THIS IS WHERE THE COMPONENT SHOULD START
        protected function changeHandler(event:Event):void
        {
            trace ("something is dirty");
        }

        protected function startWatching(passTheFormHere:Form):void
        {
            for each (var O:Object in passTheFormHere.getChildren())
            {
                if (O is FormItem) 
                {
                    // Let's assume you only have a single child in one FormItem
                    // and always one child for simplicity
                    addChangeHandlerFor((O as FormItem).getChildAt(0));
                }
            }
        }

        protected function addChangeHandlerFor(someComponent:Object):void
        {
            // Most regular flex components send a Event.CHANGE event 
            // when their value is changing
            // keep in mind you should check stuff, this is a simple example
            (someComponent).addEventListener(Event.CHANGE,changeHandler);

        }
        // THIS IS WHERE THE COMPONENT SHOULD END

Just paste this code next to some form, and call the startWatching(nameOfYourForm), you should see the changeHandler is being called.

A few more notes:

1) You should clean up the event listeners once you're done.

2) I would create a component out of it so that you would use it like this:

<mx:Form id="form1" >
[...]
</mx:Form>

<FormWatcher form="{form1}"  />

Where FormWatcher would have a Boolean var called "clean" or something.

3) The example is very simple, so it will only work for forms similiar to this one:

<mx:Form id="myForm" >
    <mx:FormItem>
        <mx:TextInput id="someComponent1" />
    </mx:FormItem>
    <mx:FormItem>
        <mx:CheckBox id="someComponent2" />
    </mx:FormItem>
    <mx:FormItem>
        <mx:TextArea id="someComponent3"  />
    </mx:FormItem>      
</mx:Form>