原文： https://howtodoinjava.com/vaadin/vaadin-text-field-examples/

学习这些简单易懂的代码示例，以设置，设置样式和验证 vaadin 文本字段控件。

  1. Table of Contents
  3. Vaadin text field label
  4. Vaadin text field width and height
  5. Vaadin text field size limit
  6. Vaadin text field focus
  7. Vaadin text field change event listener
  8. Vaadin text field empty validation
  9. Vaadin text field number validation
  10. Vaadin text field CSS styling
  11. Source Code Download Link

Vaadin 文本字段标签

vaadin 文本字段示例 - 图1

Vaadin 文本字段标签

您可以通过两种方式为文本字段设置标签。

  1. 将文本字段标签设置为构造器参数

  1. final TextField txtFldOne = new TextField("Type your name here:");

  1. 使用setCaption()方法设置文本字段标签

  1. final TextField txtFldOne = new TextField();
  3. //Set Text Field Label
  4. txtFldOne.setCaption("Type your name here:");

Vaadin 文本字段的宽度和高度

vaadin 文本字段示例 - 图2

Vaadin 文本字段大小

要设置文本字段的宽度和高度，请使用setXXX方法。

  1. final TextField txtFldOne = new TextField();
  2. txtFldOne.setCaption("Field size example 1");
  4. //Set width and height
  5. txtFldOne.setWidth(300, Unit.PIXELS);
  6. txtFldOne.setHeight(50, Unit.PIXELS);
  8. layout.addComponents(txtFldOne);

或者

  1. final TextField txtFldTwo = new TextField();
  2. txtFldTwo.setCaption("Field size example 2");
  4. txtFldTwo.setWidth("300px");
  5. txtFldTwo.setHeight("50px");
  7. layout.addComponents(txtFldTwo);

Vaadin 文本字段大小限制

vaadin 文本字段示例 - 图3

Vaadin 文本字段限制

要在文本字段中设置最大字符数限制，请使用setMaxLength(int length)方法。

  1. final TextField txtFldOne = new TextField();
  2. txtFldOne.setCaption("Field limit example");
  4. txtFldOne.setMaxLength(10);
  6. layout.addComponents(txtFldOne);

Vaadin 文本字段焦点

vaadin 文本字段示例 - 图4

Vaadin 文本字段焦点

要使焦点集中在文本字段上，请使用focus()方法。

  1. final TextField txtFldOne = new TextField();
  2. txtFldOne.setCaption("Field focus example");
  4. txtFldOne.focus();
  6. layout.addComponents(txtFldOne);

Vaadin 文本字段更改事件监听器

vaadin 文本字段示例 - 图5

Vaadin 文本字段更改事件

要处理文本字段中的任何值更改事件，您可以附加两个事件监听器。

  1. 值更改事件监听器


当文本字段中发生值更改时，或在编辑后失去焦点时，将触发值更改事件。 使用ValueChangeListener处理值更改事件。

  1. final TextField txtFld = new TextField();
  2. txtFld.setCaption("Field value change listner example");
  4. txtFld.focus();
  5. txtFld.setInputPrompt("Enter any text");
  7. txtFld.addValueChangeListener(new Property.ValueChangeListener() 
  8. {
  9.     private static final long serialVersionUID = 5678485350989070188L;
  11.     public void valueChange(ValueChangeEvent event) 
  12.     {
  13.         String value = (String) event.getProperty().getValue();
  14.         // Do something with the value. I am showing a tray notification
  15.         Notification.show("Value is: " + value, Type.TRAY_NOTIFICATION);
  16.     }
  17. });
  18. //Fire value changes immediately when the field loses focus
  19. txtFld.setImmediate(true);
  21. layout.addComponents(txtFld);

  1. 文本更改事件监听器


有时，您可能希望尽快处理文本字段中的每个文本更改事件。 您可以使用TextChangeListener处理这些文本更改。

  1. final TextField txtFld = new TextField();
  2. txtFld.setCaption("Field text change listner example");
  4. txtFld.focus();
  5. txtFld.setMaxLength(20);
  6. txtFld.setInputPrompt("Enter any text");
  8. final Label counter = new Label();
  9. counter.setValue(txtFld.getValue().length() + " of " + txtFld.getMaxLength());
  11. txtFld.addTextChangeListener(new TextChangeListener() {
  12.     private static final long serialVersionUID = -8043238443902618783L;
  14.     public void textChange(TextChangeEvent event) {
  15.         counter.setValue(event.getText().length() + " of " + txtFld.getMaxLength());
  16.     }
  17. });
  19. txtFld.setTextChangeEventMode(TextChangeEventMode.EAGER);
  21. layout.addComponents(txtFld);
  22. layout.addComponents(counter);

Vaadin 文本字段空验证

vaadin 文本字段示例 - 图6

Vaadin 文本字段空验证

要在文本字段上添加空字段验证，请使用setRequired()，setRequiredError()和setValidationVisible()并添加StringLengthValidator。

  1. final TextField txtFld = new TextField();
  2. txtFld.setCaption("Empty field validation example");
  4. txtFld.setInputPrompt("Enter your name");
  6. txtFld.setRequired(true);
  7. txtFld.setRequiredError("Please enter your name to proceed !!");
  8. txtFld.addValidator(new StringLengthValidator("Must be less than 20 chars", 1, 20, false));
  9. txtFld.setValidationVisible(true);
  11. txtFld.setTextChangeEventMode(TextChangeEventMode.LAZY);
  12. txtFld.setNullRepresentation("");
  14. txtFld.addTextChangeListener(new FieldEvents.TextChangeListener() {
  15.     private static final long serialVersionUID = 1L;
  17.     @Override
  18.     public void textChange(FieldEvents.TextChangeEvent event) {
  19.         try {
  20.             txtFld.setValue(event.getText());
  22.             txtFld.setCursorPosition(event.getCursorPosition());
  24.             txtFld.validate();
  25.         } catch (InvalidValueException e) {
  26.             //Log error
  27.         }
  28.     }
  29. });
  31. layout.addComponents(txtFld);

在上面的示例中，我们在每个按键事件上验证文本字段。 如果您只想在对焦时验证该字段，请使用ValueChangeEventListner。

Vaadin 文本字段数字验证

vaadin 文本字段示例 - 图7

Vaadin 文本字段数字最大最小验证

vaadin 文本字段示例 - 图8

Vaadin 文本字段数字格式验证

如果要强制文本字段仅接受整数值，则可以使用IntegerRangeValidator类并针对文本更改事件进行验证。

  1. final TextField txtFld = new TextField("Please enter only integer value");
  2. layout.addComponent(txtFld);
  4. //To convert string value to integer before validation
  5. txtFld.setConverter(new StringToIntegerConverter());
  7. //Add error message and min-max values allowed in field. If no limit than use null
  8. txtFld.addValidator(new IntegerRangeValidator("The value has to be an integer", null, null));
  10. //What if text field is empty - integer will be null in that case, so show blank when null
  11. txtFld.setNullRepresentation("");
  13. //Add validation hints in UI??
  14. txtFld.setValidationVisible(true);
  16. txtFld.setTextChangeEventMode(TextChangeEventMode.LAZY);
  18. txtFld.addTextChangeListener(new FieldEvents.TextChangeListener() {
  19.     private static final long serialVersionUID = 1L;
  21.     @Override
  22.     public void textChange(FieldEvents.TextChangeEvent event) {
  23.         try {
  24.             txtFld.setCursorPosition(event.getCursorPosition());
  25.             txtFld.validate();
  26.         } catch (InvalidValueException e) {
  27.             //Log error
  28.         }
  29.     }
  30. });

Vaadin 文本字段 CSS 样式

所有文本字段均添加了样式名称v-textfield，因此，如果您希望将特定的 CSS 应用于所有文本字段，则将其添加到v-textfield类中。

  1. .v-textfield {
  2.     //style to apply on all text fields
  3. }

如果要在单个文本字段上应用某种样式，则可以将类名称（例如darkBorder）添加到文本字段，如下所示：

  1. final TextField txtFld = new TextField("Custom Styled Text Box");
  2. layout.addComponent(txtFld);
  4. layout.addStyleName("darkBorder");

现在，您可以在 css 文件中定义样式规则。 样式名称将为{.v-textfield+添加到字段的自定义样式类}。

  1. .v-textfield-darkBorder { 
  2.     border: 5px solid gray;
  3. }

完整的源代码

现在，让我们看看上面为本教程编写的所有示例。

  1. package com.howtodoinjava.vaadin.demo;
  3. import com.vaadin.annotations.Theme;
  4. import com.vaadin.annotations.VaadinServletConfiguration;
  5. import com.vaadin.data.Property;
  6. import com.vaadin.data.Property.ValueChangeEvent;
  7. import com.vaadin.data.Validator.InvalidValueException;
  8. import com.vaadin.data.util.converter.StringToIntegerConverter;
  9. import com.vaadin.data.validator.IntegerRangeValidator;
  10. import com.vaadin.data.validator.StringLengthValidator;
  11. import com.vaadin.event.FieldEvents;
  12. import com.vaadin.event.FieldEvents.TextChangeEvent;
  13. import com.vaadin.event.FieldEvents.TextChangeListener;
  14. import com.vaadin.server.VaadinRequest;
  15. import com.vaadin.server.VaadinServlet;
  16. import com.vaadin.ui.AbstractTextField.TextChangeEventMode;
  17. import com.vaadin.ui.Label;
  18. import com.vaadin.ui.Notification;
  19. import com.vaadin.ui.Notification.Type;
  20. import com.vaadin.ui.TextField;
  21. import com.vaadin.ui.UI;
  22. import com.vaadin.ui.VerticalLayout;
  24. @Theme("mytheme")
  25. public class MyUI extends UI {
  27.     private static final long serialVersionUID = 1387172685749279538L;
  29.     @Override
  30.     protected void init(VaadinRequest vaadinRequest) {
  31.         final VerticalLayout layout = new VerticalLayout();
  33.         fieldLabelExample(layout);
  34.         fieldSizeExample(layout);
  35.         fieldLimitExample(layout);
  36.         fieldFocusExample(layout);
  37.         fieldValueChangeListenerExample(layout);
  38.         fieldTextChangeListenerExample(layout);
  39.         fieldNullValidationExample(layout);
  40.         fieldNumberValidationExample(layout);
  41.         customCSSExample(layout);
  43.         layout.setMargin(true);
  44.         layout.setSpacing(true);
  46.         setContent(layout);
  47.     }
  49.     private void customCSSExample(VerticalLayout layout) {
  50.         final TextField txtFld = new TextField("Custom Styled Text Box");
  51.         layout.addComponent(txtFld);
  53.         layout.addStyleName("darkBorder");
  54.     }
  56.     private void fieldNumberValidationExample(VerticalLayout layout) {
  58.         final TextField txtFld = new TextField("Please enter only integer value");
  59.         layout.addComponent(txtFld);
  61.         //To convert string value to integer before validation
  62.         txtFld.setConverter(new StringToIntegerConverter());
  64.         //Add error message and min-max values allowed in field. If no limit than use null
  65.         txtFld.addValidator(new IntegerRangeValidator("The value must be between 0 and 100", 0, 100));
  67.         //What if text field is empty - integer will be null in that case, so show blank when null
  68.         txtFld.setNullRepresentation("");
  70.         //Add validation hints in UI??
  71.         txtFld.setValidationVisible(true);
  73.         txtFld.setTextChangeEventMode(TextChangeEventMode.LAZY);
  75.         txtFld.addTextChangeListener(new FieldEvents.TextChangeListener() {
  76.             private static final long serialVersionUID = 1L;
  78.             @Override
  79.             public void textChange(FieldEvents.TextChangeEvent event) {
  80.                 try {
  81.                     txtFld.setCursorPosition(event.getCursorPosition());
  82.                     txtFld.validate();
  83.                 } catch (InvalidValueException e) {
  84.                     //Log error
  85.                 }
  86.             }
  87.         });
  88.     }
  90.     private void fieldNullValidationExample(VerticalLayout layout) {
  92.         final TextField txtFld = new TextField();
  93.         txtFld.setCaption("Empty field validation example");
  95.         txtFld.setInputPrompt("Enter your name");
  97.         txtFld.setRequired(true);
  98.         txtFld.setRequiredError("Please enter your name to proceed !!");
  99.         txtFld.addValidator(new StringLengthValidator("Must be less than 20 chars", 1, 20, false));
  100.         txtFld.setValidationVisible(true);
  102.         txtFld.setTextChangeEventMode(TextChangeEventMode.LAZY);
  103.         txtFld.setNullRepresentation("");
  105.         txtFld.addTextChangeListener(new FieldEvents.TextChangeListener() {
  106.             private static final long serialVersionUID = 1L;
  108.             @Override
  109.             public void textChange(FieldEvents.TextChangeEvent event) {
  110.                 try {
  111.                     txtFld.setValue(event.getText());
  113.                     txtFld.setCursorPosition(event.getCursorPosition());
  115.                     txtFld.validate();
  116.                 } catch (InvalidValueException e) {
  117.                     //Log error
  118.                 }
  119.             }
  120.         });
  122.         layout.addComponents(txtFld);
  123.     }
  125.     private void fieldTextChangeListenerExample(VerticalLayout layout) {
  126.         final TextField txtFld = new TextField();
  127.         txtFld.setCaption("Field text change listner example");
  129.         txtFld.focus();
  130.         txtFld.setMaxLength(20);
  131.         txtFld.setInputPrompt("Enter any text");
  133.         final Label counter = new Label();
  134.         counter.setValue(txtFld.getValue().length() + " of " + txtFld.getMaxLength());
  136.         txtFld.addTextChangeListener(new TextChangeListener() {
  137.             private static final long serialVersionUID = -8043238443902618783L;
  139.             public void textChange(TextChangeEvent event) {
  140.                 counter.setValue(event.getText().length() + " of "
  141.                         + txtFld.getMaxLength());
  142.             }
  143.         });
  145.         txtFld.setTextChangeEventMode(TextChangeEventMode.EAGER);
  147.         layout.addComponents(txtFld);
  148.         layout.addComponents(counter);
  149.     }
  151.     private void fieldValueChangeListenerExample(VerticalLayout layout) {
  152.         final TextField txtFld = new TextField();
  153.         txtFld.setCaption("Field value change listner example");
  155.         txtFld.focus();
  156.         txtFld.setInputPrompt("Enter any text");
  158.         txtFld.addValueChangeListener(new Property.ValueChangeListener() {
  159.             private static final long serialVersionUID = 5678485350989070188L;
  161.             public void valueChange(ValueChangeEvent event) {
  162.                 String value = (String) event.getProperty().getValue();
  163.                 // Do something with the value
  164.                 Notification.show("Value is: " + value, Type.TRAY_NOTIFICATION);
  165.             }
  166.         });
  167.         // Fire value changes immediately when the field loses focus
  168.         txtFld.setImmediate(true);
  170.         layout.addComponents(txtFld);
  171.     }
  173.     private void fieldFocusExample(VerticalLayout layout) {
  174.         final TextField txtFld = new TextField();
  175.         txtFld.setCaption("Field focus example");
  177.         txtFld.focus();
  179.         layout.addComponents(txtFld);
  180.     }
  182.     private void fieldLimitExample(VerticalLayout layout) {
  183.         final TextField txtFld = new TextField();
  184.         txtFld.setCaption("Field limit example");
  186.         txtFld.setMaxLength(10);
  188.         layout.addComponents(txtFld);
  189.     }
  191.     private void fieldSizeExample(VerticalLayout layout) {
  192.         final TextField txtFldOne = new TextField();
  193.         txtFldOne.setCaption("Field size example 1");
  195.         txtFldOne.setWidth(300, Unit.PIXELS);
  196.         txtFldOne.setHeight(50, Unit.PIXELS);
  198.         final TextField txtFldTwo = new TextField();
  199.         txtFldTwo.setCaption("Field size example 2");
  201.         txtFldTwo.setWidth("300px");
  202.         txtFldTwo.setHeight("50px");
  204.         layout.addComponents(txtFldOne);
  205.         layout.addComponents(txtFldTwo);
  206.     }
  208.     private void fieldLabelExample(VerticalLayout layout) {
  209.         final TextField txtFld = new TextField();
  210.         // Set Text Field Label
  211.         txtFld.setCaption("Type your name here:");
  212.         layout.addComponents(txtFld);
  213.     }
  215.     @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
  216.     public static class MyUIServlet extends VaadinServlet {
  217.         private static final long serialVersionUID = -2718268186398688122L;
  218.     }
  219. }

源代码下载

单击下面的链接下载该项目的源代码。

下载源码

资源：

Vaadin 文本字段组件

TextChangeListener

ValueChangeListener

StackOverflow