Details about the main components of a Vaadin application

In the previous tutorial, we created and ran a basic Vaadin application using the Vaadin plugin in Eclipse. Some of you already known about Vaadin can understand how the Vaadin application is running but there maybe some of you who have never heard about Vaadin. So, in this tutorial, let’s say more about the main component of a Vaadin application, which will receive user requests, process and return results to the user.

OK, my project structure is as follows:

Details about the main components of a Vaadin application

MyUI class is the main component that I want to talk about here.

The content of this class is as follows:

This class is the primary class of all UI components in a Vaadin application.

When we create a Vaadin application, and when a user accesses our Vaadin application, a web page is generated using the code contained in a method of this class. That is the init() method.

The MyUI class defines all of the Vaadin’s UI components in this method.

Take a look at the definition of the init() method.

and results when running the application

Details about the main components of a Vaadin application

Obviously, here you see, we have the following UI:

  • A TextField.
  • A Button.
  • A label will be displayed when we press the Button.

And these UIs are contained in an object that is VerticalLayout.

We will go into more detail about the UI components and the VerticalLayout object in the upcoming tutorials, but generally you can understand as below.

The VerticalLayout object is a hidden component that helps us to sort the UI elements shown in the order in which is added first, then will be displayed first, in the order from top to bottom. In our init() method, the TextField is added first, followed by a Button:

and the last label displayed when we press the Button.

When you run the application, you also see that.

In the VerticalLayout object, we also use two methods, setMargin() and setSpacing(), to add some whitespace around the layout and between the UI elements contained in the VerticalLayout object.

The TextField object when generated would be an <input type=”text” tag in the HTML. We can add a text above it using the setCaption() method.

The Button object is the <input type=”button”> tag in the HTML. We can add text to this Button when initializing the Button object. To add an event when clicked, we use the addClickListener() method.

The Label object is similar to the <label> tag in HTML, which helps us to display some text.

Finally, we need to add the content to be returned to the user using the setContent() method:

Add Comment