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:
Carry out the following steps to create and learn how alignment works in Vaadin.
We create a Vaadin project with the main UI class named
Demo.public class Demo extends UI {…}We create a class called
AligningDemothat is based on theVerticalLayout.public class AligningDemo extends VerticalLayout {…}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 theAlignmentclass.public AligningDemo() { Button leftButton = new Button("top, left"); addComponent...