0

I'm looking for validation library for GWT that is able to change widget style on error.

  1. I haven't found it in GWT-Validation (maybe I missed something>.
  2. I found the framework that have the functionality GWT-VL (http://gwt-vl.sourceforge.net), but it is dead from 2009 (pure documentation, no maven repo working).

Are there any more usable validation frameworks for GWT with that functionality ?

2 Answers2

1

You could use GWT Bean Validation which is part of GWT 2.4 and works fine, although it is still in an experimental state (see http://code.google.com/p/google-web-toolkit/wiki/BeanValidation). GWT Bean Validation supports JSR303 annotations. This means that you can define constraints on your Data Transfer Objects (DTO). We use it together with GWT RequestFactory and the GWT Editor Framework.

Now, if you want to change the style of a widget you can implement something similar to ValueBoxEditorDecorator. Here is an example of how you can write such a decorator for your widget and add a css class (like Alex suggested):

public class MyWidgetDecorator<T> extends Composite implements
    HasEditorErrors<T>, IsEditor<ValueBoxEditor<T>> {

  // ...

  @UiField
  SimplePanel container;

  @UiField
  DivElement errorLabel;

  // ...

  /**
   * Sets the widget that is to be decorated. 
   */
  @UiChild(limit = 1, tagname = "content")
  public void setContent(ValueBoxBase<T> widget) {
    container.add(widget);

    // ... if using the editor framework, initialize the widget as editor
  }

  public void showErrors(List<EditorError> errors) {
    StringBuilder sb = new StringBuilder();
    for (EditorError error : errors) {
      if (error.getEditor().equals(editor)) {
        sb.append("\n").append(error.getMessage());
      }
    }

    if (sb.length() == 0) {
      errorLabel.setInnerText("");
      errorLabel.getStyle().setDisplay(Display.NONE);

      if (container.getWidget() != null) {
        container.getWidget().removeStyleName("violation"); // remove css class on widget
      }
      return;
    }

    errorLabel.setInnerText(sb.substring(1));
    errorLabel.getStyle().setDisplay(Display.INLINE_BLOCK);

    if (container.getWidget() != null) {
      container.getWidget().addStyleName("violation"); // add css class on widget
    }
  }
}

In the method showErrors(...) a css class called "validation" is added to the widget (e.g. a text box). In the css class you could then define a red border for the widget to illustrate that the input is invalid, for example.

By the way, a good explanation on how to use the GWT Editor Framework can be found in this answer.

Community
  • 1
  • 1
Marco Jakob
  • 1,068
  • 1
  • 13
  • 20
  • Thanks. However I not understand how can I chagne style for several widgets. Lets assume that the container contains 10 text boxes and 5 check boxes. If I understand correct when one of the values will be invalid I get a message inside error Label and whole container will be decorated. Am I right ? What I want decoration only on the one wrong value. I would also like to scroll to first error, but I can skip this requirement. – Krzysztof Zielinski Jan 26 '12 at 22:24
  • You must create a decorator for each individual widget. In the example above you could add only one widget anyways, because of @UiChild(limit = 1). – Marco Jakob Jan 31 '12 at 07:36
0

Hmmm... Not really sure what you mean, but why not define a new css class for your widgets special for error and then apply that style to the widget once the validation fails? Are you sure you need a "framework" for that?

  • Well, I would like to have one place where I define constraints (length, not null, etc), and as defined a style. Then I would like to call one validate for complex widget. I don't want manually checking which value is wrong and setting the style and for this I need some kind of framework. – Krzysztof Zielinski Jan 26 '12 at 09:22
  • Maybe this will help : http://stackoverflow.com/questions/5655775/tutorial-on-setting-up-gwt-validation-framework-for-a-simple-app – Alex Calugarescu Jan 26 '12 at 10:14
  • Thanks. I know this one, hovewer it is based on GWT Validation Library, which allows only text messages, no style changes (or maybe I miss something). – Krzysztof Zielinski Jan 26 '12 at 13:46