The Google Web Toolkit is a great way to build webbased frontends for applications. There comes quite some functionality out of the box, such as a Swing-like development style and the fundamental functionality used to build Rich-Client Webbased-Frontends. It is very good in creating a fluid interaction feeling, without the end-user being constantly interrupted in his workflow by page loading and the like. Additionally there are many libraries out there to even enhance the possibilities of GWT, like SmartGWT, Gilead, etc.
Where it lacks, is the possibility to validate the data that a user inputs. Which I find quite surprising for a web development toolkit. So in order to fill the gap, there are already some projects existing including:
Unfortunately there are some issues with these frameworks that made them appeal to not be the right thing for what I had in mind.
The GWT-Validator’s biggest disadvantage is, that its functionality is tied to the client side, so the most important part in a security point of view is not addressed. Another big problem is that it is not supported nor further developed by the original authors.
The GWT Validation Framework does bring validation to the client and server side. One strong point about it, is that the validation code only needs to be written once and can then be automatically used on the server and the client side. Unfortunately it also has some issues of which the main drawbacks for me are:
- No help for setting up “nice” client notifications of validation errors
- No localization of validation messages yet
- Conflicts in a way with Hibernate-Validator
As I’m quite convinced of the usage of Hibernate in my projects and already use the Hibernate-Validator capabillities I do not want to drop them in favor of the GWT Validation Framework’s style of doing these kind of things.
Because of the forementioned shortcomings of the existing frameworks and my believes in Hibernate I began work on my own framework which I call the GWT Validation Library (see here for a little Showcase).
The main aspects I wanted to achieve were:
- Make it easy for the developer to set up “nice” client side notifications
- Validation errors on the server side should also be shown “nicely” on the client with little overhead
- Integration with the Hibernate-Validator framework
- I18n of the validation messages
- Support of writing custom validators
- Action concept for showing the validation errors
- Support of writing custom actions
I think I have achieved these goals now and am quite happy with the result. So here goes the introduction of what you can do with the GWT Validation Library.
Easily add validation on the client side:
-
…
-
ValidationMessages messages = new ValidationMessages(); //Contains the validation messages. Fully localizable!
-
-
ValidationProcessor validator = new ValidationProcessor(messages);
-
-
//We might have some TextBox that should only contain numeric values from 0 to 15
-
-
validator.addValidators("number",
-
new IntegerValidator(numberTextBox, 0, 15)
-
.addActionForFailure(new FocusAction()) //Adding an action in case of a validation failure
-
);
-
…
The result is that we have now added client side validation to a TextBox element that only accepts numbers from 0 to 15 inclusively, if the widget fails validation the focus will be put on it, because we added an FocusAction to it! We could now go on and add additional validator constraints for different widgets or even more than one validator or action for one widget.
For example we could also do this:
-
…
-
validator.addValidators("number",
-
new IntegerValidator(numberTextBox, 0, 15)
-
.addActionForFailure(new FocusAction()) //Adding a focus action
-
.addActionForFailure(new StyleAction("validationFailedBorder")) //… and a style action
-
);
-
…
Now we added two actions! The FocusAction that focuses the widget and a style action, that adds a specific style to the widget when validation fails (for example the widgets border could be set to red color).
We can setup validation like this for all the components we would like to validate. All we have to do when the user is finished entering data and wants to invoke an action is:
-
…
-
if(!validator.validate())
-
return; //Validation failed. Don’t do anything
-
else {
-
//Validation was correct. Invoke the action you need to invoke
-
}
In the case of a failing validation all the actions are invoked (or only the ones for the first error, depending on configuration). So the user is presented with “fancy” validation error messages that guide him through correct data entry.
An example would be:
Dialog in its initial state
And after triggering the validation process:
Dialog with failed validations shown
In order to make the development of a consistent validation user experience even easier it is possible to create your own custom validators and your own custom actions, so you can for example create custom validators that are prebuilt with the needed Actions so you do not have to repeat yourself in adding the same Actions over and over again.
So, I think thats it for the moment. But there is quite some stuff more that the GWT Validation Library is capable of (Serverside validation, I18n, etc.) so stay tuned for the next post or just check for yourself.
In the next part of this series I will examine the possibilities on how to connect server side validation with the client side and additionally adding Hibernate-Validator to the game.
You can download the GWT Validation Library here.
You can visit the showcase site here.