Learn How To Implement Web GUIs in Java
Tags: java, vaadin, gui, web
Published: 2021-09-07 07:47:03

The world of JavaScript offers useful and fun-to-use web frameworks, there's no doubt about it. For Java developers, there's an interesting alternative—the open-source [Vaadin](https://vaadin.com) framework. With it, you can easily implement a [Graphical User Interface](https://en.wikipedia.org/wiki/Graphical_user_interface) (GUI) for the web using only the Java programming language and nothing else. No need to write a line of HTML or JavaScript. A picture is worth a thousand words:

![Vaadin](https://dz2cdn1.dzone.com/storage/temp/15102988-web-gui-in-java.jpeg)

How Does Vaadin Work?
---------------------

In the previous screenshot, you can see a Java class on the left. This code runs on the server, for example, Apache Tomcat, Eclipse Jetty, or any other servlet container.

You can use the API provided by the framework to create User Interfaces (UI) [components](https://vaadin.com/components) such as text fields, combo boxes, data grids, date pickers, upload fields, and many others. You can combine these components to build a view (also known as page or UI) using layouts to place the UI components vertically, horizontally, or in any custom way using CSS.

In the previous example, we created a `TextField` and a `Button` both added into a `VerticalLayout`. Once the view is ready, you can expose it through a URL using the `@Route` annotation. In the example, we made it available at [http://localhost:8080/hello](http://localhost:8080/hello) by using `@Route("hello")`.

A Vaadin application is a Java web application. The framework provides an `Servlet` implementation (`VaadinServlet`) that handles HTTP requests and responses for you. This servlet scans the Java classes marked with the `@Route` annotation to show the correct view in the browser. The first time a Vaadin application is requested, Vaadin responds with a lightweight JavaScript file that serves as a client-side engine. This engine takes care of handling the events in the browser and sending them to the server in the form of JSON messages. The `VaadinServlet` handles the requests and similarly returns JSON responses to the client-side engine. The engine then takes this message to update the elements in the page that need to be updated, if any. If the client-server communication was a conversation, it'd look something like this:

_(The user clicks a button in the browser)_

**Client-side Engine:** Hey VaadinServlet, the user clicked the button with ID 5.

**VaadinServlet:** Sure. Let me check if there are any click listeners on that button... Yeah, there's one, let's execute the listener... Done. Alright Client-side Engine, it seems the listener wants to add a notification with the text "Thanks for clicking".

**Client-side Engine:** Cool, I'll use the DOM here in the browser to add that notification to the page.

This, of course, is a simplification, but you get the idea.

Behind the scenes, Vaadin uses the HTTP session to store a component tree. This contains the state of the UI. Things such as which components form the view and what are their states (enabled/disabled, caption, value, etc). This offers a layer of security worth mentioning. Since the UI logic resides in the server, it's not exposed to attackers. Validations are performed on the server. For example, if a `Button` is disabled (using `setEnabled(false)`), this is not just a cosmetic feature in the browser—the server won't run any logic in click listeners added to a button that is not enabled, preventing attackers to use the developer tools in the browser to change the enabled state or to call the `VaadinServlet` to simulate a click event.

Is Vaadin Free To Use?
----------------------

Yes. Vaadin is an open-source framework published under the [Apache License 2.0](http://www.apache.org/licenses/LICENSE-2.0). You don't have to buy anything to build full-blown web applications with it.

There are commercial components that boost productivity, but they are optional. For example, there's a [visual designer](https://vaadin.com/designer) and a CRUD component that help you to build views even faster. You can try these components for free before getting a subscription.

Is Vaadin a Replacement for JSP and JSF?
----------------------------------------

Yes. It could be used as a replacement for JSP, JSF, and even JavaScript frameworks like Angular. Many Vaadin customers have successfully migrated from these technologies to Vaadin.

Does Vaadin Support Spring and Jakarta EE?
------------------------------------------

Yes. Vaadin has official integrations with [Spring](https://vaadin.com/spring) and [Jakarta EE](https://vaadin.com/javaee) (formerly Java EE). You can add Vaadin as a dependency when you create a new Spring Boot project using the [Spring Initializr](https://start.spring.io/). For Jakarta EE, you can [download](https://vaadin.com/start#tech-stack-examples) a simple _Hello, World_ example that uses Jakarta EE. At the time of writing this, only Jakarta EE version 8 is supported.

Who Uses Vaadin?
----------------

Many Fortune 500 companies use Vaadin as well as successful startups. This sums up to more than 200.000 developers worldwide and this number grows every week. The online community is active.

Follow the [quick start tutorial](https://vaadin.com/docs/v14/flow/tutorials/quick-start-tutorial) and then try the [in-depth course](https://vaadin.com/docs/v14/flow/tutorials/in-depth-course).