Detect changes in Flex Form elements (textinput, textarea, combobox, checkbox ..)

Question

I have various (read a lot ...) flex forms in my application, and now I want to create a system in which the user is informed that he has not saved if he changes anything in the form ...

now .. I do not want to rewrite all the forms that I have .. is there any good way to implement this? Extending the TextInput classes (and others ...) somehow?

thank

Answer 1

This is not thought out, but should work.

, FormWatcher, . , , - CreationComplete .

, , , getChildren() , FormItems . , TextInputs, Comboboxes .., ( ), .

        // 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 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

- startWatching (nameOfYourForm), , changeHandler.

:

1) , .

2) , :

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

<FormWatcher form="{form1}"  />

FormWatcher var, "" - .

3) , , :

<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>

Answer 2

TextInput ( ) , SDK, . , , , /, .