Aligning components on a page

Aligning components is easy in Vaadin. We can align them on the left, on the right, on the top, on the bottom, and also center them vertically or horizontally. In this recipe, we will create a demo application in which we can see how aligning works. We will create three buttons in three different positions, as we can see in the following screenshot:

How to do it...

Carry out the following steps to create and learn how alignment works in Vaadin.

1. We create a Vaadin project with the main UI class named Demo.

   public class Demo extends UI {…}

2. We create a class called AligningDemo that is based on the VerticalLayout.

   public class AligningDemo extends VerticalLayout {…}

3. In the constructor, we create and add all three buttons. The first button is placed on the top left side. We'll do it by the setComponentAlignment() method. As a parameter, we use predefined alignments from the Alignment class.

   public AligningDemo() {
     Button leftButton = new Button("top, left");
     addComponent...