可以更改字段样式的 GWT 验证答案

【问题标题】：GWT validation that can change style of the field可以更改字段样式的 GWT 验证
【发布时间】：2012-01-26 08:20:03
【问题描述】：

我正在寻找能够在出错时更改小部件样式的 GWT 验证库。

我在 GWT-Validation 中没有找到它（可能我遗漏了什么）。
我找到了具有 GWT-VL 功能 (http://gwt-vl.sourceforge.net) 的框架，但它从 2009 年起就已经死了（纯文档，没有 maven repo 工作）。

对于具有该功能的 GWT，是否还有其他可用的验证框架？

【问题讨论】：

【解决方案1】：

您可以使用 GWT Bean Validation，它是 GWT 2.4 的一部分并且工作正常，尽管它仍处于实验状态（请参阅 http://code.google.com/p/google-web-toolkit/wiki/BeanValidation）。 GWT Bean Validation 支持 JSR303 注释。这意味着您可以在数据传输对象 (DTO) 上定义约束。我们将它与 GWT RequestFactory 和 GWT Editor Framework 一起使用。

现在，如果您想更改小部件的样式，您可以实现类似于ValueBoxEditorDecorator 的东西。这是一个示例，说明如何为您的小部件编写这样的装饰器并添加一个 css 类（如 Alex 建议的那样）：

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

在方法showErrors(...) 中，一个名为“validation”的css 类被添加到小部件（例如一个文本框）。例如，在 css 类中，您可以为小部件定义一个红色边框以说明输入无效。

顺便说一句，关于如何使用GWT Editor Framework的很好的解释可以在this answer找到。

【讨论】：

谢谢。但是我不明白如何更改多个小部件的样式。让我们假设容器包含 10 个文本框和 5 个复选框。如果我在其中一个值无效时理解正确，我会在错误标签内收到一条消息，并且整个容器将被装饰。我对吗？我想要的装饰只有一个错误的值。我也想滚动到第一个错误，但我可以跳过这个要求。
您必须为每个单独的小部件创建一个装饰器。在上面的示例中，您无论如何都只能添加一个小部件，因为 @UiChild(limit = 1)。

【解决方案2】：

嗯...不太确定您的意思，但是为什么不为您的小部件定义一个新的 css 类，专门针对错误，然后在验证失败时将该样式应用于小部件？你确定你需要一个“框架”吗？

【讨论】：

好吧，我希望有一个地方可以定义约束（长度、非空等），并定义一种样式。然后我想为复杂的小部件调用一个验证。我不想手动检查哪个值是错误的并设置样式，为此我需要某种框架。
也许这会有所帮助：stackoverflow.com/questions/5655775/…
谢谢。我知道这个，但是它基于 GWT 验证库，它只允许文本消息，不允许样式更改（或者我可能错过了一些东西）。