在 Vaadin 8 中调用没有活页夹和 bean 的验证用户反馈
Invoke validation user-feedback without binder & bean in Vaadin 8
在 Vaadin 8 中，内置验证功能是通过 Binder hooked up to a bean, as discussed in the Manual and as 建立的。我理解它是如何工作的，而且效果很好，我感谢 Vaadin 团队在那里的思考和努力。
但是……我只想要一个简单的快速数据输入字段，只接受 -1、0 和 1 作为值。我喜欢 Vaadin 验证的功能，即通过将 field/caption 标记为爆炸和红色等来拒绝错误输入。
➥ 有没有什么方法可以调用对用户的验证式反馈，而无需定义 bean 和建立绑定器的所有复杂麻烦？
作为解决方法，我可以用弹出菜单（a.k.a。下拉列表）替换我的数据输入字段。但我的问题在我们需要用户快速简单输入（例如在对话框中）时仍然有用，而无需所有数据输入表单的仪式。
Binder 不是为单一领域使用而设计的。
Vaadin 8
使用 Vaadin 8 进行单字段验证的最佳替代方法是与字段的 ValueChangeListener 挂钩，并在值更改事件中执行任何需要的操作。
AbstractComponent::setComponentError(ErrorMessage componentError)
注意，但是在 Vaadin 8 字段中 components do have setComponentError(..) 方法。通过调用此方法，您使用 ValueChangeListener by setComponentError(…) 的单字段验证具有与表单中的活页夹相同的外观和感觉。这适用于文本字段、按钮等。
请参阅手册的 Handling Errors 页。
button.setComponentError( new UserError( "Bad click" ) ) ;
Vaadin 7
示例应用程序
正确，解决了问题。解决方案是调用 AbstractComponent::setComponentError.
这是一个完整的 Vaadin 8.5.2 小应用程序，用于演示此操作。
此应用程序有两个小部件，一个 TextField 和一个 Button，可以标记为正常状态…
...或处于错误状态。
这是该应用程序的完整 .java 文件。
package com.basilbourque.example;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.*;
import java.util.List;
import java.util.Set;
/**
* This UI is the application entry point. A UI may either represent a browser window
* (or tab) or some part of an HTML page where a Vaadin application is embedded.
* <p>
* The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be
* overridden to add component to the user interface and initialize non-component functionality.
*/
@Theme ( "mytheme" )
public class MyUI extends UI {
@Override
protected void init ( VaadinRequest vaadinRequest ) {
// TextField allows only 'dog' or 'cat' as values.
Set< String > animals = Set.of( "dog" , "cat" );
TextField dogOrCat = new TextField();
dogOrCat.setCaption( "Type dog or cat:" );
dogOrCat.addValueChangeListener( valueChangeEvent -> {
if ( animals.contains( dogOrCat.getValue() ) ) {
dogOrCat.setComponentError( null );
} else {
dogOrCat.setComponentError( new UserError( "Oops! You typed something other than 'dog' or 'cat'." ) );
}
} );
// Button which is deemed to be in good condition or erroneous condition by a radio buttons pair.
Button button = new Button( "Example" );
button.addClickListener( e -> {
Notification.show( "This button does nothing." , Notification.Type.HUMANIZED_MESSAGE );
} );
// Radio-buttons, to control the good or error condition of button above.
List< String > radioItems = List.of( "No error" , "Error" );
RadioButtonGroup< String > radios =
new RadioButtonGroup<>( "Make button:" );
radios.setItems( radioItems );
radios.setValue( radioItems.get( 0 ) ); // Set 1st item by default (index counting = 0).
radios.addValueChangeListener( valueChangeEvent -> {
if ( radios.getValue().equals( radioItems.get( 1 ) ) ) { // Index-counting, so `1` = 2nd list item "Error".
button.setComponentError( new UserError( "Bad button" ) );
} else {
button.setComponentError( null );
}
} );
// Arrange
final VerticalLayout layout = new VerticalLayout();
layout.addComponents( dogOrCat , button , radios );
setContent( layout );
}
@WebServlet ( urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true )
@VaadinServletConfiguration ( ui = MyUI.class, productionMode = false )
public static class MyUIServlet extends VaadinServlet {
}
}
顺便说一句，这是我的 POM (pom.xml) 文件更新为 Java 10 和各种库的最新版本。
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.basilbourque.example</groupId>
<artifactId>set-comp-error</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>set-comp-error</name>
<prerequisites>
<maven>3</maven>
</prerequisites>
<properties>
<vaadin.version>8.5.2</vaadin.version>
<vaadin.plugin.version>8.5.2</vaadin.plugin.version>
<jetty.plugin.version>9.4.12.v20180830</jetty.plugin.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>10</maven.compiler.source>
<maven.compiler.target>10</maven.compiler.target>
<!-- If there are no local customizations, this can also be "fetch" or "cdn" -->
<vaadin.widgetset.mode>local</vaadin.widgetset.mode>
</properties>
<repositories>
<repository>
<id>vaadin-addons</id>
<url>http://maven.vaadin.com/vaadin-addons</url>
</repository>
</repositories>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-bom</artifactId>
<version>${vaadin.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-server</artifactId>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-push</artifactId>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-client-compiled</artifactId>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-themes</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
<!-- Exclude an unnecessary file generated by the GWT compiler. -->
<packagingExcludes>WEB-INF/classes/VAADIN/widgetsets/WEB-INF/**</packagingExcludes>
</configuration>
</plugin>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.plugin.version}</version>
<executions>
<execution>
<goals>
<goal>update-theme</goal>
<goal>update-widgetset</goal>
<goal>compile</goal>
<!-- Comment out compile-theme goal to use on-the-fly theme compilation -->
<goal>compile-theme</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
<!-- Clean up also any pre-compiled themes -->
<configuration>
<filesets>
<fileset>
<directory>src/main/webapp/VAADIN/themes</directory>
<includes>
<include>**/styles.css</include>
<include>**/styles.scss.cache</include>
</includes>
</fileset>
</filesets>
</configuration>
</plugin>
<!-- The Jetty plugin allows us to easily test the development build by
running jetty:run on the command line. -->
<plugin>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<version>${jetty.plugin.version}</version>
<configuration>
<scanIntervalSeconds>2</scanIntervalSeconds>
</configuration>
</plugin>
</plugins>
</build>
<profiles>
<profile>
<!-- Vaadin pre-release repositories -->
<id>vaadin-prerelease</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<repositories>
<repository>
<id>vaadin-prereleases</id>
<url>http://maven.vaadin.com/vaadin-prereleases</url>
</repository>
<repository>
<id>vaadin-snapshots</id>
<url>https://oss.sonatype.org/content/repositories/vaadin-snapshots/</url>
<releases>
<enabled>false</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>vaadin-prereleases</id>
<url>http://maven.vaadin.com/vaadin-prereleases</url>
</pluginRepository>
<pluginRepository>
<id>vaadin-snapshots</id>
<url>https://oss.sonatype.org/content/repositories/vaadin-snapshots/</url>
<releases>
<enabled>false</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</pluginRepository>
</pluginRepositories>
</profile>
</profiles>
</project>
在 Vaadin 8 中，内置验证功能是通过 Binder hooked up to a bean, as discussed in the Manual and as
但是……我只想要一个简单的快速数据输入字段，只接受 -1、0 和 1 作为值。我喜欢 Vaadin 验证的功能，即通过将 field/caption 标记为爆炸和红色等来拒绝错误输入。
➥ 有没有什么方法可以调用对用户的验证式反馈，而无需定义 bean 和建立绑定器的所有复杂麻烦？
作为解决方法，我可以用弹出菜单（a.k.a。下拉列表）替换我的数据输入字段。但我的问题在我们需要用户快速简单输入（例如在对话框中）时仍然有用，而无需所有数据输入表单的仪式。
Binder 不是为单一领域使用而设计的。
Vaadin 8
使用 Vaadin 8 进行单字段验证的最佳替代方法是与字段的 ValueChangeListener 挂钩，并在值更改事件中执行任何需要的操作。
AbstractComponent::setComponentError(ErrorMessage componentError)
注意，但是在 Vaadin 8 字段中 components do have setComponentError(..) 方法。通过调用此方法，您使用 ValueChangeListener by setComponentError(…) 的单字段验证具有与表单中的活页夹相同的外观和感觉。这适用于文本字段、按钮等。
请参阅手册的 Handling Errors 页。
button.setComponentError( new UserError( "Bad click" ) ) ;
Vaadin 7
示例应用程序
AbstractComponent::setComponentError.
这是一个完整的 Vaadin 8.5.2 小应用程序，用于演示此操作。
此应用程序有两个小部件，一个 TextField 和一个 Button，可以标记为正常状态…
...或处于错误状态。
这是该应用程序的完整 .java 文件。
package com.basilbourque.example;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.*;
import java.util.List;
import java.util.Set;
/**
* This UI is the application entry point. A UI may either represent a browser window
* (or tab) or some part of an HTML page where a Vaadin application is embedded.
* <p>
* The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be
* overridden to add component to the user interface and initialize non-component functionality.
*/
@Theme ( "mytheme" )
public class MyUI extends UI {
@Override
protected void init ( VaadinRequest vaadinRequest ) {
// TextField allows only 'dog' or 'cat' as values.
Set< String > animals = Set.of( "dog" , "cat" );
TextField dogOrCat = new TextField();
dogOrCat.setCaption( "Type dog or cat:" );
dogOrCat.addValueChangeListener( valueChangeEvent -> {
if ( animals.contains( dogOrCat.getValue() ) ) {
dogOrCat.setComponentError( null );
} else {
dogOrCat.setComponentError( new UserError( "Oops! You typed something other than 'dog' or 'cat'." ) );
}
} );
// Button which is deemed to be in good condition or erroneous condition by a radio buttons pair.
Button button = new Button( "Example" );
button.addClickListener( e -> {
Notification.show( "This button does nothing." , Notification.Type.HUMANIZED_MESSAGE );
} );
// Radio-buttons, to control the good or error condition of button above.
List< String > radioItems = List.of( "No error" , "Error" );
RadioButtonGroup< String > radios =
new RadioButtonGroup<>( "Make button:" );
radios.setItems( radioItems );
radios.setValue( radioItems.get( 0 ) ); // Set 1st item by default (index counting = 0).
radios.addValueChangeListener( valueChangeEvent -> {
if ( radios.getValue().equals( radioItems.get( 1 ) ) ) { // Index-counting, so `1` = 2nd list item "Error".
button.setComponentError( new UserError( "Bad button" ) );
} else {
button.setComponentError( null );
}
} );
// Arrange
final VerticalLayout layout = new VerticalLayout();
layout.addComponents( dogOrCat , button , radios );
setContent( layout );
}
@WebServlet ( urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true )
@VaadinServletConfiguration ( ui = MyUI.class, productionMode = false )
public static class MyUIServlet extends VaadinServlet {
}
}
顺便说一句，这是我的 POM (pom.xml) 文件更新为 Java 10 和各种库的最新版本。
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.basilbourque.example</groupId>
<artifactId>set-comp-error</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>set-comp-error</name>
<prerequisites>
<maven>3</maven>
</prerequisites>
<properties>
<vaadin.version>8.5.2</vaadin.version>
<vaadin.plugin.version>8.5.2</vaadin.plugin.version>
<jetty.plugin.version>9.4.12.v20180830</jetty.plugin.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>10</maven.compiler.source>
<maven.compiler.target>10</maven.compiler.target>
<!-- If there are no local customizations, this can also be "fetch" or "cdn" -->
<vaadin.widgetset.mode>local</vaadin.widgetset.mode>
</properties>
<repositories>
<repository>
<id>vaadin-addons</id>
<url>http://maven.vaadin.com/vaadin-addons</url>
</repository>
</repositories>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-bom</artifactId>
<version>${vaadin.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-server</artifactId>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-push</artifactId>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-client-compiled</artifactId>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-themes</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
<!-- Exclude an unnecessary file generated by the GWT compiler. -->
<packagingExcludes>WEB-INF/classes/VAADIN/widgetsets/WEB-INF/**</packagingExcludes>
</configuration>
</plugin>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.plugin.version}</version>
<executions>
<execution>
<goals>
<goal>update-theme</goal>
<goal>update-widgetset</goal>
<goal>compile</goal>
<!-- Comment out compile-theme goal to use on-the-fly theme compilation -->
<goal>compile-theme</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
<!-- Clean up also any pre-compiled themes -->
<configuration>
<filesets>
<fileset>
<directory>src/main/webapp/VAADIN/themes</directory>
<includes>
<include>**/styles.css</include>
<include>**/styles.scss.cache</include>
</includes>
</fileset>
</filesets>
</configuration>
</plugin>
<!-- The Jetty plugin allows us to easily test the development build by
running jetty:run on the command line. -->
<plugin>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<version>${jetty.plugin.version}</version>
<configuration>
<scanIntervalSeconds>2</scanIntervalSeconds>
</configuration>
</plugin>
</plugins>
</build>
<profiles>
<profile>
<!-- Vaadin pre-release repositories -->
<id>vaadin-prerelease</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<repositories>
<repository>
<id>vaadin-prereleases</id>
<url>http://maven.vaadin.com/vaadin-prereleases</url>
</repository>
<repository>
<id>vaadin-snapshots</id>
<url>https://oss.sonatype.org/content/repositories/vaadin-snapshots/</url>
<releases>
<enabled>false</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>vaadin-prereleases</id>
<url>http://maven.vaadin.com/vaadin-prereleases</url>
</pluginRepository>
<pluginRepository>
<id>vaadin-snapshots</id>
<url>https://oss.sonatype.org/content/repositories/vaadin-snapshots/</url>
<releases>
<enabled>false</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</pluginRepository>
</pluginRepositories>
</profile>
</profiles>
</project>