Friday, August 30, 2013

Re: Dirty Form Flag in GWT or basically how to identify if in the form if there are any unsaved changes


If you're going to update the model object with every change, then it seems that you'd need a value change handler on every form field.

I've usually implemented this concept by having a single inner class ValueChangeHandler instance for the form composite, along with a boolean dirty field.  The handler gets added to every form field. Given that there's a single handler instance, I don't think that takes up too much memory. You can cut down the amount of code you have to write by creating a utility method, something like addWithHandler(HasValueChangeHandlers widget, ValueChangeHandler handler) that adds the handler to the widget and then delegates to the panel's add method - with appropriate variations for panels that have parametrized add methods.

In the onValueChange method I check the dirty flag - if it's false, I set it to true and fire a custom DataDirty event (which is just a simple custom event with no special fields - usually the only thing I'm interested in is the event source, which I can get from the inherited getSource method). Then my external logic can add whatever I want as a handler.

That way, my model bean stays in it's original condition until I go to save the form data, from something like a Save button click. That way, I don't have to worry about any external references to the same bean "seeing" the changes before I want them to. And with a Cancel button click I can just repopulate the form from the model object. The dirty field gets set back to false upon loading, saving, or cancelling.

On Tuesday, January 29, 2013 4:26:29 PM UTC-5, BM wrote:
I have a form in GWT and I want to capture an event similar to dirtyform flag in JQuery. Basically I want to understand if any of the form data has been changed. The requirement is pretty simple here. I am NOT looking for if the data has been actually been modified but just to find out if they touched my form data by any way.

So let's say if my form has one GWT Textbox and one ListBox. For me the form data is changed with any of the following condition:

1) If the user changes the value inside Textbox and revert it back to previous original value. 
2) The user changes the default selection of ListBox to new selection but changes back to default selection.
3) If the user changes the value inside Textbox to a new value.
4) The user changes the default selection of ListBox to new selection.

The form data is not changed if the user just views the form but did not change any of the values in the Widgets at all. 

One way I thought would be to use onChange event and set a local flag hasDataChanged to true. Once the flag hasDataChanged has been set to true then don't reset it as it means the user touched the form. Based on the value of flag hasDataChanged show an alert message when navigating away from the page. 

But my problem is that if there are more GWT user interaction widgets (let's say 15 TextBox, 5 ListBox), the UI will fire onChanged Event every time. Plus I have to add onChange event handler to all of my GWT widgets. 

Perhaps there is a better way to do handle this. May be on view level if there is a single event I can assign which knows if any of GWT widgets been touched by the user? 

Any help would be appreciated!

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
To post to this group, send email to
Visit this group at
For more options, visit

No comments:

Post a Comment