- \n
- Java JDK 8<\/li>\n
- Latest Eclipse Mars<\/li>\n
- Vaadin 7.6.3<\/li>\n
- Tomcat Server 8<\/li>\n<\/ul>\n
2. Introduction<\/h2>\n
Vaadin goes beyond the basic HTML form by adding field validation and data binding, in Vaadin you can make your form with Java code, validate the data and put the data into a Vaadin data source ready to send to the persistence layer of your application.<\/p>\n
3. Prerequisites<\/h2>\n
- \n
- JDK installed<\/li>\n
- Eclipse Mars installed and working<\/li>\n
- Vaadin 7.6.3 plugin installed<\/li>\n
- Tomcat 8 installed and running<\/li>\n<\/ul>\n
4. Set up the project<\/h2>\n
In the file menu choose File -> New -> Other:<\/p>\n
![\"01](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/01-New-Project-1.png\")
<\/a>01 New Project<\/figcaption><\/figure><\/p>\n Now from the list choose Vaadin 7 project:<\/p>\n
![\"02](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/02-Vaadin-Project-1.png\")
<\/a>02 Vaadin Project<\/figcaption><\/figure><\/p>\n Hit next and name your project then hit finish.<\/p>\n
5. Coding the example<\/h2>\n
Edit the entry point Vaadin file in my case the autogenerated
VaadinFormUI.java<\/code> file, and inside the init method begin coding the example.<\/p>\nCreate the layout<\/em><\/span><\/p>\n
\t final FormLayout layout = new FormLayout();\n\t layout.setMargin(true);\n\t setContent(layout);\n<\/pre>\n
I created a new
FormLayout<\/code>, called layout, enable the margins and set as the main content layout, I am going to use the form as the main content.<\/p>\nProperty set<\/em><\/span><\/p>\n
\t PropertysetItem myfields = new PropertysetItem();\n\t myfields.addItemProperty(\"name\", new ObjectProperty(\"\"));\n\t myfields.addItemProperty(\"age\", new ObjectProperty(0));\n\t myfields.addItemProperty(\"email\", new ObjectProperty(\"\"));\n<\/pre>\n
I created a property set to make the form data source, for every field in my form I created an item property associated with the field in the UI, in this example I have in my form the fields name, age and email.<\/p>\n
Error label<\/em><\/span><\/p>\n
\t Label errLabel = new Label();\n<\/pre>\n
This label is used to show the validation errors of my form.<\/p>\n
Name field<\/em><\/span><\/p>\n
\t TextField nameText = new TextField(\"Name\");\n\t nameText.setValidationVisible(false);\n\t nameText.setIcon(FontAwesome.AMBULANCE);\n\t StringLengthValidator slv = new StringLengthValidator(\"The name must be 3-10 letters (was {0})\", 3, 10, true);\n\t nameText.addValidator(slv);\n\t layout.addComponent(nameText);\n<\/pre>\nI created a text field called
nameText<\/code> with a caption “Name” then hide the validation feedback to manually use it later, set an icon to my text field from the Fontawesome package that is bundled with Vaadin, Fontawesome is a widely known open source toolkit to use lightweight css and font icons for web pages and other applications as well, you can get more information here Font Awesome<\/a> and you can use it out of the box without any configuration with Vaadin.<\/p>\nI also created a
StringLengthValidator<\/code> that validate the text in thenameText<\/code> field and ensure that the text have more that 3 characters and less that 10, then I added the validator to the field and add the field to the layout to show it.<\/p>\nAge field<\/em><\/span><\/p>\n
\t TextField ageText = new TextField(\"Age\");\n\t ageText.setValidationVisible(false);\n\t IntegerRangeValidator ir = new IntegerRangeValidator(\"Age must be between 21 and 30\", 21, 30);\n\t ageText.addValidator(ir);\n\t layout.addComponent(ageText);\n\n<\/pre>\n
In this field I have an
IntegerRangeValidator<\/code> that validate the field as an integer between 21 and 30 inclusive, the data source do the trick here with the integer value, if you don’t use a binded data-source you need to use a converter to make the field an integer before use the validator. I created the field, created the validator, add the validator to the field and the added the field to the layout.<\/div> <\/div><\/p>\nEmail field<\/em><\/span><\/p>\n
\t TextField emailText = new TextField(\"email\");\n\t emailText.setValidationVisible(true);\n\t emailText.setRequired(true);\n\t EmailValidator ev = new EmailValidator(\"You must provide a valid email\");\n\t emailText.addValidator(ev);\n\t layout.addComponent(emailText);\n<\/pre>\n
With this field, I make the field required to force the user fill the field, this is an email field that need to be validated as a valid email, this is usually done with regular expressions but in this case you can use the validator that is provided out of the box with Vaadin.<\/p>\n
FieldGroup<\/em><\/span><\/p>\n
\t FieldGroup fieldGroup = new FieldGroup(myfields);\n\t fieldGroup.bind(nameText, \"name\");\n\t fieldGroup.bind(ageText, \"age\");\n\t fieldGroup.bind(emailText, \"email\");\n<\/pre>\n
The
FieldGroup<\/code> make the bind between the fields and the data sourcePropertysetItem<\/code> so you can have your fields directly connected into the data source, easy as you see.<\/p>\n6. The submit button<\/h2>\n
Submit button<\/em><\/span><\/p>\n
\t Button button = new Button(\"Submit\");\n\t button.addClickListener(new Button.ClickListener()\n\t {\n\t public void buttonClick(ClickEvent event)\n\t {\n\t Boolean failed = false;\n\t errLabel.setValue(\"\");\n }\n }\n<\/pre>\nI created a button to validate and submit the form data, inside the click listener, I declared a variable to use in the validation process also clean the label that shows the errors in the form.<\/p>\n
7. Inside the click listener<\/h2>\n
nameText validation<\/em><\/span><\/p>\n
\t try\n\t {\n\t nameText.validate();\n\t }\n\t catch (InvalidValueException e)\n\t {\n\t errLabel.setValue(\" - \" + e.getMessage());\n\t nameText.setValidationVisible(true);\n\t failed = true;\n\t }\n<\/pre>\nthe validation process is done within a
try\/catch block<\/code>, thenameText.validate();<\/code> checks for the validation rules previously added to the field and capture aInvalidValueException<\/code>, if the field have an invalid value according to the definition then an exception is raised and captured in thecatch<\/code> block, in this case the error label is updated and the validation is set to visible to a better feedback to the user andfailed<\/code> is set totrue<\/code> for use later.<\/p>\nageText validation<\/em><\/span><\/p>\n
\t try\n\t {\n\t ageText.validate();\n\t }\n\t catch (Exception e)\n\t {\n\t errLabel.setValue(errLabel.getValue() + \" - \" + e.getMessage());\n\t ageText.setValidationVisible(true);\n\t failed = true;\n\t }\n<\/pre>\nValidates the age field using the defined rules, age must be between 21 and 30 inclusive.<\/p>\n
emailText Validate<\/em><\/span><\/p>\n
\t try\n\t {\n\t emailText.validate();\n\t }\n\t catch (InvalidValueException e)\n\t {\n\t String emsg = e.getMessage();\n\t if(emsg == \"\")\n\t {\n\t emsg = \"email is required\";\n\t }\n\t errLabel.setValue(errLabel.getValue() + \" - \" + emsg);\n\t failed = true;\n\t }\n<\/pre>\nThe email field is required and must be a valid email, the email validator provided by Vaadin follows the rules according to RFC 822 that validates most of emails, not all but a lot of them, if you need most specific validation rules you can use a regex validator that also is build-in in Vaadin.<\/p>\n
Success validation<\/em><\/span><\/p>\n
\t if (!failed)\n\t {\n\t Notification.show(\"Everythig is OK !\", Notification.Type.TRAY_NOTIFICATION);\n\t }\n<\/pre>\nHere I use the
Boolean failed;<\/code> declared inside the listener to check that all validations are ok and show a notification. In this place you know that the form data is validated with the rules.[ulp id=’YBvYYzEYBUrADqmI’]<\/p>\n8. The complete source code<\/h2>\n
VaadinformUI.java<\/em><\/span><\/p>\n
package com.example.vaadinform;\n\nimport javax.servlet.annotation.WebServlet;\n\nimport com.vaadin.annotations.Theme;\nimport com.vaadin.annotations.VaadinServletConfiguration;\nimport com.vaadin.data.Validator.InvalidValueException;\nimport com.vaadin.data.fieldgroup.FieldGroup;\nimport com.vaadin.data.util.ObjectProperty;\nimport com.vaadin.data.util.PropertysetItem;\nimport com.vaadin.data.validator.EmailValidator;\nimport com.vaadin.data.validator.IntegerRangeValidator;\nimport com.vaadin.data.validator.StringLengthValidator;\nimport com.vaadin.server.FontAwesome;\nimport com.vaadin.server.VaadinRequest;\nimport com.vaadin.server.VaadinServlet;\nimport com.vaadin.ui.Button;\nimport com.vaadin.ui.Button.ClickEvent;\nimport com.vaadin.ui.FormLayout;\nimport com.vaadin.ui.Label;\nimport com.vaadin.ui.Notification;\nimport com.vaadin.ui.TextField;\nimport com.vaadin.ui.UI;\n\n@SuppressWarnings(\"serial\")\n@Theme(\"vaadinform\")\npublic class VaadinformUI extends UI {\n\n\t@WebServlet(value = \"\/*\", asyncSupported = true)\n\t@VaadinServletConfiguration(productionMode = false, ui = VaadinformUI.class)\n\tpublic static class Servlet extends VaadinServlet {\n\t}\n\n\t@Override\n\tprotected void init(VaadinRequest request) \n\t {\n\t final FormLayout layout = new FormLayout();\n\t layout.setMargin(true);\n\t setContent(layout);\n\n\t PropertysetItem myfields = new PropertysetItem();\n\t myfields.addItemProperty(\"name\", new ObjectProperty(\"\"));\n\t myfields.addItemProperty(\"age\", new ObjectProperty(0));\n\t myfields.addItemProperty(\"email\", new ObjectProperty(\"\"));\n\n\t Label errLabel = new Label();\n\n\t TextField nameText = new TextField(\"Name\");\n\t nameText.setValidationVisible(false);\n\t nameText.setIcon(FontAwesome.AMBULANCE);\n\t StringLengthValidator slv = new StringLengthValidator(\"The name must be 3-10 letters (was {0})\", 3, 10, true);\n\t nameText.addValidator(slv);\n\t layout.addComponent(nameText);\n\n\t TextField ageText = new TextField(\"Age\");\n\t ageText.setValidationVisible(false);\n\t IntegerRangeValidator ir = new IntegerRangeValidator(\"Age must be between 21 and 30\", 21, 30);\n\t ageText.addValidator(ir);\n\t layout.addComponent(ageText);\n\n\t TextField emailText = new TextField(\"email\");\n\t emailText.setValidationVisible(true);\n\t emailText.setRequired(true);\n\t EmailValidator ev = new EmailValidator(\"You must provide a valid email\");\n\t emailText.addValidator(ev);\n\t layout.addComponent(emailText);\n\n\t FieldGroup fieldGroup = new FieldGroup(myfields);\n\t fieldGroup.bind(nameText, \"name\");\n\t fieldGroup.bind(ageText, \"age\");\n\t fieldGroup.bind(emailText, \"email\");\n\n\t Button button = new Button(\"Submit\");\n\t button.addClickListener(new Button.ClickListener()\n\t {\n\t public void buttonClick(ClickEvent event)\n\t {\n\t Boolean failed = false;\n\t errLabel.setValue(\"\");\n\t try\n\t {\n\t nameText.validate();\n\t }\n\t catch (InvalidValueException e)\n\t {\n\t errLabel.setValue(\" - \" + e.getMessage());\n\t nameText.setValidationVisible(true);\n\t failed = true;\n\t }\n\n\t try\n\t {\n\t ageText.validate();\n\t }\n\t catch (Exception e)\n\t {\n\t errLabel.setValue(errLabel.getValue() + \" - \" + e.getMessage());\n\t ageText.setValidationVisible(true);\n\t failed = true;\n\t }\n\n\t try\n\t {\n\t emailText.validate();\n\t }\n\t catch (InvalidValueException e)\n\t {\n\t String emsg = e.getMessage();\n\t if(emsg == \"\")\n\t {\n\t emsg = \"email is required\";\n\t }\n\t errLabel.setValue(errLabel.getValue() + \" - \" + emsg);\n\t failed = true;\n\t }\n\n\t if (!failed)\n\t {\n\t Notification.show(\"Everythig is OK !\", Notification.Type.TRAY_NOTIFICATION);\n\t }\n\t }\n\t });\n\t layout.addComponent(button);\n\t layout.addComponent(errLabel);\n\t }\n}\n<\/pre>\n9. Running the example<\/h2>\n
Right click on the project folder and choose Run as -> Run on server choose Tomcat 8 server and hit finish.<\/p>\n
10. Results<\/h2>\n
All fields need to validate:<\/p>\n
![\"03](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/03\/03-Validate-all-fields.png\")
<\/a>03 Validate all fields<\/figcaption><\/figure><\/p>\n The email field needs validation:<\/p>\n
![\"04](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/03\/04-Validate-email.png\")
<\/a>04 Validate email<\/figcaption><\/figure><\/p>\n Everything is ok:<\/p>\n