Forms and validations - here's some of my ideas, what are yours?

Question

One of the big things still missing from the JFX space (especially where JEE is concerned) is forms and form validations. Maybe you guys have been luckier but at least 80% of the screens I've had to build in my career have been boring old forms - enter data in the fields, validate them and hit submit.
So, I've been hacking around on this to try and get a pattern and hopefully some reusable classes for doing this in JavaFX. I have something that works but the code is verbose and less than elegant. I'm hoping some of you guys might want to kick around some ideas on this with me here. If we can come up with something that works, I'd like to either include it in [url http://www.zenjava.com/jfx-flow/]JFX Flow, or put it out as a separate open source project (whichever makes more sense).
What I think needs to be supported:
* Map between a normal Java bean and the fields on a form
* Validate the data, i.e. specifying the constraints on a field and then checking those constraints
* Show a validation summary at the top of the form
* Highlight individual fields if they have validation errors
* Support auto-validation, i.e. the validation highlights and messages will instantly update as the user types
Some extra restrictions:
* The data input will ideally be a normal bean and so it won't have observable values on it. In most projects I use, the beans are coming from the server and sometimes may be shared between desktop client and a jsp/web client, or even be a third party API so they can't be changed. End result: we don't want any JFX complexities or dependencies in our server code (design leak). This rule could be bent but only as a last resort.
* The validations must be defined relative to the normal data bean not a JFX model or controller, etc. This is so the bean can be validated on the server as well as the client. The server must do validation to prevent dodgy data getting in (never trust a client). Ideally we don't want to be specifying the validations in two places (i.e. once for the client and once for the server) as this creates maintenance problems and weakens the integrity of the system over time.
* Ideally the validation mechanism will be based on [url http://java.dzone.com/articles/bean-validation-and-jsr-303]JSR 303 - Bean Validations as this is quite nice. This is flexible however if there is a suitable alternative that integrates better.
To give us something to reference in conversation, I've created a small working sample. This is only meant to be a rough starting point (at best) and I'd really like to get feedback on both the code (i.e. should we have a 'presentation model', how could bindings be better used, etc) and the general way I'm representing errors (i.e. should we use tooltips to show errors, or actually show the errors next to the field, should we use border colours or put a little exclamation mark over the field, should the fields be auto-validated or only validated on submit, etc).
The example is a single form for editing a person. It has three fields, first name, last name and gender. When the form is blank, auto-editing is off. When the user submits the form it is validated and from that point on auto-validating is on. Error fields are highlighted with a style change, and a tooltip is added with details (I think we can do better - what's your ideas?).
I have used all plain Java to keep thngs simple, but I'd be looking for the end result to translate to FXML as well. I've also coded everything into the one class but the eventual goal would be to have the common stuff moved out to reusable base classes, etc.
Here's a workspace with some example code in it: http://code.google.com/p/jfxee/source/browse/trunk/jfxforms/
Here's a running deploy of that code: http://zenjava.com/demo/form/forms.html
(edit: I've moved the code to its own project and changed the url for the launch - the values above are the new, correct ones)
Looking forward to hearing some thoughts on this topic.
Edited by: zonski on 01-Dec-2011 13:41

Answer 1

At Devoxx I did some straw man prototype that you might find useful (or hopeless, I'm not sure which, I did it in a hurry :-)). I followed some principles that I was influenced by years back by JGoodies, but I haven't looked at the JGoodies stuff in forever and know it isn't all the same. But anyway, like I said, I'm not sure it is actually useful but maybe there is something genius hidden in there.
I have a Validator, which is just a simple SAM:
import javafx.scene.control.Control;
* @author Richard
public interface Validator<C extends Control> {
    public ValidationResult validate(C control);
}The idea is that it is given a Control, it will validate that control, and then return a ValidationResult. ValidationResult is actually only needed in cases of errors, since returning null indicates success, so the following is somewhat of a crock but you could rename it ValidationError or something and remove the "SUCCESS" type and there you are.
public class ValidationResult {
    public enum Type { ERROR, WARNING, SUCCESS }
    private final String message;
    private final Type type;
    public ValidationResult(String message, Type type) {
        this.message = message;
        this.type = type;
    public final String getMessage() {
        return message;
    public final Type getType() {
        return type;
    }For good measure I threw in a ValidationEvent.
import javafx.event.Event;
import javafx.event.EventType;
* @author Richard
public class ValidationEvent extends Event {
    public static final EventType<ValidationEvent> ANY =
            new EventType<ValidationEvent>(Event.ANY, "VALIDATION");
    private final ValidationResult result;
    public ValidationEvent(ValidationResult result) {
        super(ANY);
        this.result = result;
    public final ValidationResult getResult() { return result; }
}Because Control's don't presently have the notion of validation built in, I created a ValidationPane which is like a specialized StackPane, where there is a bottom layer, the control, and a glass pane layer. And from CSS you can style it however you like. The ValidationPane has a CSS style class set in case of errors / warnings. So without augmenting controls, the idea is that a ValidationPane subclass would exist to wrap each type of control you needed to validate. It did this because somebody has to wire up the listeners to the control to react on text input etc, and so I thought I'd like that encapsulated in something reusable, and there it was.
import javafx.beans.DefaultProperty;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.ReadOnlyObjectProperty;
import javafx.beans.property.ReadOnlyObjectWrapper;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.EventHandler;
import javafx.scene.control.Control;
import javafx.scene.layout.Region;
* @author Richard
@DefaultProperty("content")
public abstract class ValidatorPane<C extends Control> extends Region {
     * The content for the validator pane is the control it should work with.
    private ObjectProperty<C> content = new SimpleObjectProperty<C>(this, "content", null);
    public final C getContent() { return content.get(); }
    public final void setContent(C value) { content.set(value); }
    public final ObjectProperty<C> contentProperty() { return content; }
     * The validator
    private ObjectProperty<Validator<C>> validator = new SimpleObjectProperty<Validator<C>>(this, "validator");
    public final Validator<C> getValidator() { return validator.get(); }
    public final void setValidator(Validator<C> value) { validator.set(value); }
    public final ObjectProperty<Validator<C>> validatorProperty() { return validator; }
     * The validation result
    private ReadOnlyObjectWrapper<ValidationResult> validationResult = new ReadOnlyObjectWrapper<ValidationResult>(this, "validationResult");
    public final ValidationResult getValidationResult() { return validationResult.get(); }
    public final ReadOnlyObjectProperty<ValidationResult> validationResultProperty() { return validationResult.getReadOnlyProperty(); }
     *  The event handler
    private ObjectProperty<EventHandler<ValidationEvent>> onValidation =
            new SimpleObjectProperty<EventHandler<ValidationEvent>>(this, "onValidation");
    public final EventHandler<ValidationEvent> getOnValidation() { return onValidation.get(); }
    public final void setOnValidation(EventHandler<ValidationEvent> value) { onValidation.set(value); }
    public final ObjectProperty<EventHandler<ValidationEvent>> onValidationProperty() { return onValidation; }
    public ValidatorPane() {
        content.addListener(new ChangeListener<Control>() {
            public void changed(ObservableValue<? extends Control> ov, Control oldValue, Control newValue) {
                if (oldValue != null) getChildren().remove(oldValue);
                if (newValue != null) getChildren().add(0, newValue);
    protected void handleValidationResult(ValidationResult result) {
        getStyleClass().removeAll("validation-error", "validation-warning");
        if (result != null) {
            if (result.getType() == ValidationResult.Type.ERROR) {
                getStyleClass().add("validation-error");
            } else if (result.getType() == ValidationResult.Type.WARNING) {
                getStyleClass().add("validation-warning");
        validationResult.set(result);
        fireEvent(new ValidationEvent(result));
    @Override
    protected void layoutChildren() {
        Control c = content.get();
        if (c != null) {
            c.resizeRelocate(0, 0, getWidth(), getHeight());
    @Override
    protected double computeMaxHeight(double d) {
        Control c = content.get();
        return c == null ? super.computeMaxHeight(d) : c.maxHeight(d);
    @Override
    protected double computeMinHeight(double d) {
        Control c = content.get();
        return c == null ? super.computeMinHeight(d) : c.minHeight(d);
    @Override
    protected double computePrefHeight(double d) {
        Control c = content.get();
        return c == null ? super.computePrefHeight(d) : c.prefHeight(d);
    @Override
    protected double computePrefWidth(double d) {
        Control c = content.get();
        return c == null ? super.computePrefWidth(d) : c.prefWidth(d);
    @Override
    protected double computeMaxWidth(double d) {
        Control c = content.get();
        return c == null ? super.computeMaxWidth(d) : c.maxWidth(d);
    @Override
    protected double computeMinWidth(double d) {
        Control c = content.get();
        return c == null ? super.computeMinWidth(d) : c.minWidth(d);
}And finally the TextInputValidatorPane instance good for any TextInputControl. I think.
import javafx.beans.InvalidationListener;
import javafx.beans.Observable;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.control.TextInputControl;
* @author Richard
public class TextInputValidatorPane<C extends TextInputControl> extends ValidatorPane<C> {
    private InvalidationListener textListener = new InvalidationListener() {
        public void invalidated(Observable o) {
            final Validator v = getValidator();
            final ValidationResult result = v != null ?
                v.validate(getContent()) :
                new ValidationResult("", ValidationResult.Type.SUCCESS);
            handleValidationResult(result);
    public TextInputValidatorPane() {
        contentProperty().addListener(new ChangeListener<C>() {
            public void changed(ObservableValue<? extends C> ov, C oldValue, C newValue) {
                if (oldValue != null) oldValue.textProperty().removeListener(textListener);
                if (newValue != null) newValue.textProperty().addListener(textListener);
    public TextInputValidatorPane(C field) {
        this();
        setContent(field);
}This should also be usable as is from FXML since you can easily wrap a TextInputValidatorPane around a TextField, and CSS does all the styling, so I think it all just works. You probably need to have some library of sophisticated Validators which know how to read text from a TextField and compare against the validation annotations, but otherwise it should work well enough. Anyway, in the actual implementation I think I would omit the ValidationPane stuff completely and just build that part into the controls / skins. Like I said, this was a quick hack but seemed to get the "how do I visualize validation errors" part of the problem solved.
Richard