vaadin - 表字段中未显示验证图标

Question

当我进入表的编辑模式时，我希望在用户超出任何验证约束范围时立即显示数据验证感叹号图标 (!)。

首先，有一些注意事项:

• 我使用的是 Vaadin 7，因此 Bean Validation 插件很遗憾无法工作。
• 数据验证按预期进行。

现在，我有一个完美的工作表，我使用 BeanItemContainer 将我的 Person beans 保存在其中。

表和 TableFieldFactory 的代码如下所示:

table.setContainerDataSource(buildContainer());
table.setTableFieldFactory(new TableFieldFactory() {
    @Override
    public Field createField(Container container, Object itemId, Object propertyId, Component uiContext) {
        TextField field = (TextField) DefaultFieldFactory.get().createField(container, itemId, propertyId,
                uiContext);
        field.setImmediate(true);
        if (propertyId.equals("firstName")) {
            field.addValidator(new BeanValidator(Person.class, "firstName"));
        }
        return field;
    }
});

Person bean 如下所示:

public class Person {

    @Size(min = 5, max = 50)
    private String firstName;

    ... setters + getters...
}

问题是，当我在名字字段中输入某些内容然后按 Enter 或模糊/取消聚焦该字段时，不会显示任何错误指示。我必须将鼠标悬停在该字段上才能看到有什么问题。

我的问题有两个问题...

1. 如何让该字段出现时显示感叹号图标无效的？ (这适用于表格中不在中的普通文本字段)
2. 有没有办法从无效字段中立即得到响应(显示图标)(即在您输入 5 个字符以下后立即，无需按回车键或模糊/取消聚焦该字段问题)。

如果我能回答这两个问题就太好了! =)

提前致谢!

Answer 1

1. 标题、必需指示符(红色星号)和 - 最重要的是 - 错误指示符(感叹号)实际上是由包含组件的布局提供的，而不是组件本身。当可编辑组件显示在表格中时，它们没有显示布局 - 这就是不显示错误指示器的原因。

   如果我试图将这个圆变成正方形，我会考虑创建一个 CustomField 作为可编辑字段的包装器 - 当包装/委托(delegate)字段无效时，在该 CustomField 中显示一个错误指示器。我没有尝试过这个 - 我根本没有在表中使用可编辑字段 - 但应该相当容易做到。

2. 添加TextChangeListener到FieldFactory中的字段，并在监听器中调用field.validate()。但请注意，field.getValue() 值通常不会更改，直到模糊/失焦，因此验证器将验证旧值 - 除非您执行 field.setValue(event.getText())在听者中。请参阅this post在 Vaadin 论坛上了解更多详细信息。

这就是我对验证包装器的意思 - 没有尝试使用它。您将看到 initComponent 只是返回 FormLayout 内的字段，这应该为您提供您正在寻找的图标。 (您可能需要将比我更多的方法从 ValidatingWrapper 委托(delegate)给委托(delegate) - 但快速查看表明这可能就足够了。)

然后，您可以将该字段包装在 tableFieldFactory 中(第二个代码块)

public class ValidatingWrapper<T> extends CustomField<T> {

  private static final long serialVersionUID = 9208404294767862319L;
  protected Field<T> delegate;

  public ValidatingWrapper(final Field<T> delegate) {
    this.delegate = delegate;

    if (delegate instanceof TextField) {
      final TextField textField = (TextField) delegate;
      textField.setTextChangeEventMode(AbstractTextField.TextChangeEventMode.TIMEOUT);
      textField.setTextChangeTimeout(200);

      textField.addTextChangeListener(new FieldEvents.TextChangeListener() {
        @Override
        public void textChange(FieldEvents.TextChangeEvent event) {
          textField.setValue(event.getText());
          textField.validate();
        }
      });
    }
  }

  @Override
  public Class<? extends T> getType() {
    return delegate.getType();
  }

  @Override
  protected Component initContent() {
    return new FormLayout(delegate);
  }


  @Override
  public Property getPropertyDataSource() {
    return delegate.getPropertyDataSource();
  }

  @Override
  public void setPropertyDataSource(Property newDataSource) {
    delegate.setPropertyDataSource(newDataSource);
  }

}
   

<小时/>

table.setContainerDataSource(buildContainer());
table.setTableFieldFactory(new TableFieldFactory() {
  @Override
  public Field createField(Container container, Object itemId, Object propertyId, Component uiContext) {
    TextField field = (TextField) DefaultFieldFactory.get().createField(container, itemId, propertyId,
        uiContext);
    field.setImmediate(true);
    if (propertyId.equals("firstName")) {
      field.addValidator(new BeanValidator(Person.class, "firstName"));
    }
    return ValidatingWrapper(field);
  }
});