表字段中未显示验证图标 [英] Validation icon not shown in Table fields

问题描述

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

When I enter edit mode of my Table, I want the data validation exclamation mark icon (!) to be shown as soon as the user goes out of bounds of any of the validation constraints.

首先要注意几点:

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

现在，我有一个完美的工作表，我使用 BeanItemContainer 将我的 Person bean 放在里面.

Now, I have a perfectly working table for which I am using a BeanItemContainer to keep my Person beans inside.

表格和 TableFieldFactory 的代码如下所示:

The code for the table and the TableFieldFactory looks something like this:

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 如下所示:

The Person bean looks as follows:

public class Person {

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

    ... setters + getters...
}

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

The problem is that when I type something in the firstName field and then press enter or blur/unfocus that field, no indication whatsoever of error is shown. I have to mouseover the field to see that something is wrong.

我的问题是两折...

1. 如何在字段中显示感叹号图标无效的?(这适用于 not 在表格中的普通 TextField)
2. 有没有办法从无效字段中获得立即响应(显示图标)(即在您输入 5 个字符后立即，无需按 Enter 键或模糊/取消聚焦字段问题).

1. How do I get the exclamation mark icon to appear when the field is invalid? (This works for a normal TextField that is not in a Table)
2. Is there a way to get an immediate response from the invalid field (show the icon) (i.e. immediately after you type under 5 chars, without having to press enter or blur/unfocus the field in question).

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

Would be great if I could have both questions answered! =)

提前致谢！

推荐答案

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

1. The Caption, Required Indicator (the red asterisk) and - most importantly here - Error Indicator (exclamation mark) are actually provided by the layouts containing the component, not the component themselves. When editable components are displayed in a table, they are displayed without a layout - that's why no error indicator is displayed.

如果我试图对这个圆进行平方，我会考虑创建一个 CustomField 作为可编辑字段的包装器 - 当包装/委托字段无效时，在该 CustomField 中显示错误指示符.我没有尝试过 - 我根本没有在表格中使用可编辑字段 - 但应该很容易做到.

If I were trying to square this circle, I would look at creating a CustomField as a wrapper for the editable field - and within that CustomField display an error indicator when the wrapped/delegate field becomes invalid. I've not tried this - I've not used editable fields in a table at all - but should be fairly easy to do.

向字段添加 TextChangeListener在 FieldFactory 中，并在侦听器中调用 field.validate().但是请注意，field.getValue() 值通常不会更改直到模糊/不聚焦，因此验证器将验证旧值 - 除非您执行 field.setValue(event.getText())在听者.有关详细信息，请参阅 Vaadin 论坛上的这篇文章.

Add a TextChangeListener to the field in FieldFactory, and call field.validate() in the listener. Note, though, that field.getValue() value is not normally changed until blur/unfocus, ergo the validator will be validating the old value - unless you do field.setValue(event.getText()) in the listener. See this post on the Vaadin forum for more details.

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

This is the sort of thing I meant for a validating wrapper - not tried using it. You'll see initComponent simply returns the field inside a FormLayout, which should give you the icon(s) you're seeking. (You may need to delegate more methods from ValidatingWrapper to delegate than I have- but quick look suggests this may be enough.)

然后将字段包装在 tableFieldFactory(第二个代码块)中

You'd then wrap the field in your tableFieldFactory (second code block)

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

这篇关于表字段中未显示验证图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！