With Vaadin, it is possible to create frontend of your applications purely in Java<\/strong>. It provides a highly mature server-side UI-creation support which allows us to compose production-grade reusable components in Java language. It comes with a support from all popular Java development environments (Eclipse, IntelliJ, NetBeans, Maven, and so on; this tutorial’s examples use IntelliJ). We will start by understanding how Vaadin actually works and follow with various components and layouts which exists in Vaadin. We will finish the lesson with an excellent sample application which demonstrates event handling and multiple layouts in a single view. Let’s get started.<\/p>\n Generally speaking, Vaadin is a lot like AWT, Spring and SWT. We have some layouts & components which we instantiate and provide our data to, finally bind them together in a parent layout to show the container. The difference arises on how these components & layouts are actually rendered. Instead of the traditional components being rendered using Java whose layout depends on the underlying Operating system, Vaadin components are the HTML5\/CSS\/JavaScript components talking via Ajax to the backend server and managed automatically by the framework. Let us visualise how Vaadin is arranged between frontend UI engines and its own components:<\/p>\n In above figure, it is very much clear how Vaadin guards backend developers against writing HTML, CSS and JS based components and provide a Vaadin engine where we can work on Java code itself for UI components which may be later translated to HTML Components by the framework itself.<\/p>\n It is the client-side Vaadin engine (written in HTML5\/CSS\/JavaScript, and based on the Google Web Toolkit) and the server-side framework which manage the UI for us. Server-side components also support data-binding in Vaadin which makes it very easy to integrate database in the components. Finally, do not think that Vaadin is only limited to Java. With newest versions of Vaadin, it is also possible to write HTML based Vaadin layout, style it with CSS and tune the behaviour with Javascript itself. In this lesson, we will limit ourselves to using the Java language only.<\/p>\n Now that we understand how Vaadin works, we are ready to setup our machine for its development. To move on with the lesson and an easy to use plugins available right inside your IDE, we can install Eclipse plugin as:<\/p>\n If you use IntelliJ (like me), we can get the plugin for the IDE as well:<\/p>\n The plugin is not absolutely needed but it opens an opportunity of working with 100% UI based system where you can work with WYSIWYG systems.<\/p>\n Now that we are ready with everything, we can finally use Maven to create a project for us. We will be using a Vaadin archtype to create an application. Let’s look at the command in action here:<\/p>\n Creating a Project<\/em><\/span><\/p>\n Here is what we get when we create the project (we only show the interesting parts):<\/p>\n Creating a project<\/em><\/span><\/p>\n Vaadin archtype takes care of adding appropriate dependencies in our project along with all other information needed to build the project. In the next section, we will understand all parts which were in the The project we built using the Vaadin archtype takes care of adding appropriate dependencies in our project. Let us take a peek at the pom.xml<\/em><\/span><\/p>\n Following dependencies were added to the project: Next, we also need to add the Vaadin repository and the dependency management. The pom.xml<\/em><\/span><\/p>\n Finally, we need to have the Jetty plugin which allows us to easily test the development build by running pom.xml<\/em><\/span><\/p>\n This allows us to run the Vaadin app directly from the command-line and provides us with an embedded Jetty server.<\/p>\n In Vaadin, we don’t have a web.xml file to configure the dispatcher servlet for the application. Instead, we have the Vaadin Servlet, which with the help of some annotations defines the entry point of the application:<\/p>\n MyUI.java<\/em><\/span><\/p>\n In above servlet application, the As we have defined our application using the Vaadin archtype, the app comes with a basic UI already set up in the main class of the application, which as shown in the previous section, also contains the definition for the Vaadin Servlet. Here is the main entry point UI class pre-defined in our application:<\/p>\n MyUI.java<\/em><\/span><\/p>\n 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. The UI is initialized using VaadinRequest<\/a>. This method is intended to be overridden to add component to the user interface and initialize non-component functionality.<\/p>\n Actually, we’re ready to run the project as of now to show the default application layout made by the Vaadin archtype itself. Run the following command to run the project:<\/p>\n Running the project<\/em><\/span><\/p>\n Visit the following URL to see the app running:<\/p>\n URL to open<\/em><\/span><\/p>\n We can try the app now:<\/p>\n The sample application we ran above made use of a When we need to stack the components in a single column where first elements are kept on the bottom and the rest of the elements appear below the above component, we can use the VerticalLayout<\/em><\/span><\/p>\n All the components added to this layout will be stacked on top of each other. Note that the methods related to each component (a layout is a component as well<\/strong>) are well-styled with names based on the CSS property they set. This makes the method names easy to guess and much more readable.<\/p>\n As against the HorizontalLayout<\/em><\/span><\/p>\n In the sample application, just replace the Another layout, GridLayout<\/em><\/span><\/p>\n Go on and try the Finally, we can use the FormLayout<\/em><\/span><\/p>\n In this section, we will look at some basic but most useful Vaadin UI elements which are used in almost all of the UIs made for Web.<\/p>\n A Label<\/em><\/span><\/p>\n Here is how this When it comes to providing an address to external web pages, Vaadin provides the Link component which serves the same purpose:<\/p>\n Link<\/em><\/span><\/p>\n Here is how a TextField<\/em><\/span><\/p>\n Here is how a A\u00a0 TextArea<\/em><\/span><\/p>\n Here is how a Picking dates is a very common task in a Web UI. Vaadin provides us two elements to do the same, DateField and InlineDateField<\/em><\/span><\/p>\n Here is how a Here is how a To accept secret keys and passwords in the UI, we can make use of the Table Of Contents<\/h3>\n
\n
\n
\n
2. How Vaadin works?<\/h2>\n
![\"\"](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/05\/vaadin-arch.png\")
<\/a>3. Vaadin Plugins<\/h2>\n
![\"Vaadin](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/05\/vaadin-eclipse-plugin.png\")
<\/a>![\"Vaadin](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/05\/vaadin-intellij-plugin.png\")
<\/a>4. Creating a Project<\/h2>\n
mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=LATEST -DgroupId=com.javacodegeeks.example -DartifactId=JCG-Vaadin-Example -Dversion=1.0 -Dpackaging=jar\r\n<\/pre>\n
[INFO] Scanning for projects...\r\n[INFO]\r\n[INFO] ------------------< org.apache.maven:standalone-pom >-------------------\r\n[INFO] Building Maven Stub Project (No POM) 1\r\n[INFO] --------------------------------[ pom ]---------------------------------\r\n[INFO]\r\n[INFO] >>> maven-archetype-plugin:3.0.1:generate (default-cli) > generate-sources @ standalone-pom >>>\r\n[INFO]\r\n[INFO] <<< maven-archetype-plugin:3.0.1:generate (default-cli) < generate-sources @ standalone-pom <<<\r\n[INFO]\r\n[INFO]\r\n[INFO] --- maven-archetype-plugin:3.0.1:generate (default-cli) @ standalone-pom ---\r\n[INFO] Generating project in Interactive mode\r\n[INFO] Archetype repository not defined. Using the one from [com.vaadin:vaadin-archetype-application:8.4.1] found in catalog remote\r\n\r\n....some non-interesting parts....\r\n\r\n[INFO] Using property: groupId = com.javacodegeeks.example\r\n[INFO] Using property: artifactId = JCG-Vaadin-Example\r\n[INFO] Using property: version = 1.0\r\n[INFO] Using property: package = com.javacodegeeks.example\r\n[INFO] Using property: themeName = mytheme\r\n[INFO] Using property: uiName = MyUI\r\nConfirm properties configuration:\r\ngroupId: com.javacodegeeks.example\r\nartifactId: JCG-Vaadin-Example\r\nversion: 1.0\r\npackage: com.javacodegeeks.example\r\nthemeName: mytheme\r\nuiName: MyUI\r\n Y: :\r\n[INFO] ----------------------------------------------------------------------------\r\n[INFO] Using following parameters for creating project from Archetype: vaadin-archetype-application:LATEST\r\n[INFO] ----------------------------------------------------------------------------\r\n[INFO] Parameter: groupId, Value: com.javacodegeeks.example\r\n[INFO] Parameter: artifactId, Value: JCG-Vaadin-Example\r\n[INFO] Parameter: version, Value: 1.0\r\n[INFO] Parameter: package, Value: com.javacodegeeks.example\r\n[INFO] Parameter: packageInPathFormat, Value: com\/javacodegeeks\/example\r\n[INFO] Parameter: package, Value: com.javacodegeeks.example\r\n[INFO] Parameter: version, Value: 1.0\r\n[INFO] Parameter: groupId, Value: com.javacodegeeks.example\r\n[INFO] Parameter: themeName, Value: mytheme\r\n[INFO] Parameter: uiName, Value: MyUI\r\n[INFO] Parameter: artifactId, Value: JCG-Vaadin-Example\r\n[INFO] Project created from Archetype in dir: \/Users\/shubham\/JCG-Vaadin-Example\r\n[INFO] ------------------------------------------------------------------------\r\n[INFO] BUILD SUCCESS\r\n[INFO] ------------------------------------------------------------------------\r\n[INFO] Total time: 32.100 s\r\n[INFO] Finished at: 2018-05-13T18:43:43+05:30\r\n[INFO] ------------------------------------------------------------------------\r\n<\/pre>\n
pom.xml<\/code> file of the project.<\/p>\n5. Maven Dependencies<\/h2>\n
pom.xml<\/code> file of the project in parts. Let’s start by looking at the dependencies which were added to the file:<\/p>\n<dependencies>\r\n <dependency>\r\n <groupId>javax.servlet<\/groupId>\r\n <artifactId>javax.servlet-api<\/artifactId>\r\n <version>3.0.1<\/version>\r\n <scope>provided<\/scope>\r\n <\/dependency>\r\n <dependency>\r\n <groupId>com.vaadin<\/groupId>\r\n <artifactId>vaadin-server<\/artifactId>\r\n <\/dependency>\r\n <dependency>\r\n <groupId>com.vaadin<\/groupId>\r\n <artifactId>vaadin-push<\/artifactId>\r\n <\/dependency>\r\n <dependency>\r\n <groupId>com.vaadin<\/groupId>\r\n <artifactId>vaadin-client-compiled<\/artifactId>\r\n <\/dependency>\r\n <dependency>\r\n <groupId>com.vaadin<\/groupId>\r\n <artifactId>vaadin-themes<\/artifactId>\r\n <\/dependency>\r\n<\/dependencies>\r\n<\/pre>\n
\n
javax.servlet-api<\/code>: This dependency provides the ability to keep Servlets in our project to make network calls<\/li>\nvaadin-server<\/code>: This dependency includes packages for managing the server details like sessions, client communication etc.<\/li>\nvaadin-push<\/code>: This dependency is not necessary for this lesson but is still important to show. When we need to update the UI based on a thread executing on the server, we can send a request from the server to UI so that UI is immediately updated and UI doesn’t have to make a network request to get the data state on the server. For this, push packages are used.<\/li>\nvaadin-client-compiled<\/code>: This dependency is based on GWT and contains packages to compile the client components.<\/li>\nvaadin-themes<\/code>: This dependency includes some built-in themes and all utilities for making custom themes.<\/li>\n<\/ul>\ndependencyManagement<\/code> tag helps to manage the version of all Vaadin dependencies:<\/p>\n<repositories>\r\n <repository>\r\n <id>vaadin-addons<\/id>\r\n <url>http:\/\/maven.vaadin.com\/vaadin-addons<\/url>\r\n <\/repository>\r\n<\/repositories>\r\n\r\n<dependencyManagement>\r\n <dependencies>\r\n <dependency>\r\n <groupId>com.vaadin<\/groupId>\r\n <artifactId>vaadin-bom<\/artifactId>\r\n <version>${vaadin.version}<\/version>\r\n <type>pom<\/type>\r\n <scope>import<\/scope>\r\n <\/dependency>\r\n <\/dependencies>\r\n<\/dependencyManagement>\r\n<\/pre>\njetty:run<\/code> on the command line.<\/p>\n<plugin>\r\n <groupId>org.eclipse.jetty<\/groupId>\r\n <artifactId>jetty-maven-plugin<\/artifactId>\r\n <version>${jetty.plugin.version}<\/version>\r\n <configuration>\r\n <scanIntervalSeconds>2<\/scanIntervalSeconds>\r\n <\/configuration>\r\n<\/plugin>\r\n<\/pre>\n6. Vaadin Servlet<\/h2>\n
@WebServlet(urlPatterns = \"\/*\", name = \"MyUIServlet\", asyncSupported = true)\r\n@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)\r\npublic static class MyUIServlet extends VaadinServlet { }\r\n<\/pre>\nui<\/code> field clearly mentions that MyUI.class<\/code> is the main entry point for the specified application.<\/p>\n7. Vaadin Main Class<\/h2>\n
package com.javacodegeeks.example;\r\n\r\nimport javax.servlet.annotation.WebServlet;\r\n\r\nimport com.vaadin.annotations.Theme;\r\nimport com.vaadin.annotations.VaadinServletConfiguration;\r\nimport com.vaadin.server.VaadinRequest;\r\nimport com.vaadin.server.VaadinServlet;\r\nimport com.vaadin.ui.Button;\r\nimport com.vaadin.ui.Label;\r\nimport com.vaadin.ui.TextField;\r\nimport com.vaadin.ui.UI;\r\nimport com.vaadin.ui.VerticalLayout;\r\n\r\n@Theme(\"mytheme\")\r\npublic class MyUI extends UI {\r\n\r\n private static final long serialVersionUID = 7132834690301152714L;\r\n\r\n @Override\r\n protected void init(VaadinRequest vaadinRequest) {\r\n final VerticalLayout layout = new VerticalLayout();\r\n \r\n final TextField name = new TextField();\r\n name.setCaption(\"Type your name here:\");\r\n\r\n Button button = new Button(\"Click Me\");\r\n button.addClickListener(e -> {\r\n layout.addComponent(new Label(\"Thanks \" + name.getValue() \r\n + \", it works!\"));\r\n });\r\n \r\n layout.addComponents(name, button);\r\n \r\n setContent(layout);\r\n }\r\n\r\n @WebServlet(urlPatterns = \"\/*\", name = \"MyUIServlet\", asyncSupported = true)\r\n @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)\r\n public static class MyUIServlet extends VaadinServlet {\r\n }\r\n}\r\n<\/pre>\nmvn jetty:run\r\n<\/pre>\n
http:\/\/localhost:8080\/\r\n<\/pre>\n
![\"Running](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/05\/vaadin-run-sample-app.png\")
<\/a>8. Vaadin Layout Managers<\/h2>\n
VerticalLayout<\/code> to arrange the UI elements in a vertical manner. Similar to the VerticalLayout<\/code>, Vaadin provides us various Layout Managers to arrange the UI components in different directions. Let’s explore what the managers are<\/p>\n8.1 VerticalLayout<\/h3>\n
VerticalLayout<\/code> arrangement:<\/p>\nVerticalLayout vertical = new VerticalLayout();\r\nvertical.setSpacing(true);\r\nvertical.setMargin(true);\r\nsetContent(vertical);\r\n<\/pre>\n
8.2 HorizontalLayout<\/h3>\n
VerticalLayout<\/code> where components are arranged in a vertical manner, HorizontalLayout<\/code> arranges the components horizontally. Let’s look at an example of how this layout can be instantiated:<\/p>\nfinal HorizontalLayout layout = new HorizontalLayout();\r\n<\/pre>\n
VerticalLayout<\/code> with the VerticalLayout<\/code> and see how the layout appears now:<\/p>\n![\"Vaadin](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/05\/vaadin-horizontal-layout.png\")
<\/a>8.3 GridLayout<\/h3>\n
GridLayout<\/code> allows us to make a Grid of components which provides a very sleek and consistent look to the page we render.<\/p>\nGridLayout gridLayout = new GridLayout(3, 2);\r\n<\/pre>\n
GridLayout<\/code> in the existing layout to play with the arrangement of the UI components.<\/p>\n8.4 FormLayout<\/h3>\n
FormLayout<\/code> which puts the label of a component and the component itself in two separate columns and can also have the optional indicator for required fields. It can be instantiated as:<\/p>\nFormLayout formLayout = new FormLayout();\r\n<\/pre>\n
9. Vaadin Components<\/h2>\n
9.1 Label<\/h3>\n
Label<\/code> is a component which is used to show a static text which doesn’t modify with application state. Let’s define a function which provides a Label<\/code> instance and sets it in a VerticalLayout<\/code>:<\/p>\nprivate Layout showLabels() {\r\n final VerticalLayout layout = new VerticalLayout();\r\n\r\n Label label = new Label();\r\n label.setId(\"LabelID\");\r\n label.setValue(\"JavaCodeGeeks\");\r\n label.setCaption(\"Label\");\r\n layout.addComponent(label);\r\n return layout;\r\n}\r\n<\/pre>\nLabel<\/code> looks:
\n![\"Label](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/05\/vaadin-label.png\")
<\/a>9.2 Link<\/h3>\n
private Layout showLink() {\r\n final VerticalLayout layout = new VerticalLayout();\r\n\r\n Link jcgLink = new Link(\"JavaCodeGeeks\",\r\n new ExternalResource(\"https:\/\/www.javacodegeeks.com\/\"));\r\n jcgLink.setTargetName(\"_blank\");\r\n layout.addComponent(jcgLink);\r\n return layout;\r\n}\r\n<\/pre>\nLink<\/code> looks:<\/p>\n![\"Vaadin](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/05\/vaadin-link-component.png\")
<\/a>9.3 TextField<\/h3>\n
TextFields<\/code> are the components which are a combination of a Label<\/code> component and a single line TextArea<\/code> which allows a user to provide an input. Here is a sample program to show a\u00a0TextField<\/code> with an icon as well which inbuilt into the Vaadin libraries:<\/p>\nprivate Layout showTextField() {\r\n final VerticalLayout layout = new VerticalLayout();\r\n\r\n TextField textField = new TextField();\r\n textField.setIcon(FontAwesome.USER);\r\n layout.addComponent(textField);\r\n return layout;\r\n}\r\n<\/pre>\nTextField<\/code> looks:
\n![\"Vaadin](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/05\/vaadin-textfield-component.png\")
<\/a>9.4 TextArea<\/h3>\n
TextArea<\/code> component is just like a\u00a0TextField<\/code>\u00a0component with an only difference is that multiple lines of input are allowed in a TextArea<\/code> component. Let us take a look at a demonstration:<\/p>\nprivate Layout showTextArea() {\r\n final VerticalLayout layout = new VerticalLayout();\r\n\r\n TextArea textArea = new TextArea();\r\n layout.addComponent(textArea);\r\n return layout;\r\n}\r\n<\/pre>\nTextArea<\/code> looks:<\/p>\n![\"Vaadin](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/05\/vaadin-textarea-component.png\")
<\/a>
\nThe TextArea<\/code> component allows us to enter big text into the components and reflect limit of text that should be entered as well.<\/p>\n9.5 DateField and InlineDateField<\/h3>\n
DateField<\/code> and InlineDateField<\/code>. A DateField<\/code> component shows a dropdown calendar where we can pick a date. InLineDateField<\/code> doesn’t disappear when we have selected a date in it. Let us take a look at a sample program:<\/p>\nprivate Layout showDateField() {\r\n final VerticalLayout layout = new VerticalLayout();\r\n\r\n DateField dateField = new DateField(\"DateField\", LocalDate.now());\r\n InlineDateField inlineDateField = new InlineDateField();\r\n layout.addComponent(dateField);\r\n layout.addComponent(inlineDateField);\r\n return layout;\r\n}\r\n<\/pre>\nDateField<\/code> looks:
\n![\"Vaadin](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/05\/vaadin-datefield-component.png\")
<\/a>InLineDateField<\/code> looks:
\n![\"Vaadin](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2018\/05\/vaadin-inlinedatefield-component.png\")
<\/a>
\nThe InlineDateField<\/code> doesn’t disappear when user has done selecting a date from it.<\/p>\n9.6 PasswordField<\/h3>\n
PasswordField<\/code>.\u00a0Let us take a look at a demonstration:<\/p>\n