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:

Aligning components on a page

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(leftButton);
  setComponentAlignment(leftButton, Alignment.TOP_LEFT);
  4. The next button is centered in the middle of the page.
      Button centerButton = new Button("middle, center");
  addComponent(centerButton);
  setComponentAlignment(centerButton, Alignment.MIDDLE_CENTER);
  5. And the last button is aligned at the bottom on the right.
      Button rightButton = new Button("bottom, right");
  addComponent(rightButton);
  setComponentAlignment(rightButton, Alignment.BOTTOM_RIGHT);
  6. For a better view, we enable layout margins on all four sides of the layout and we stretch the layout to fill the screen.
      setMargin(true);
  setSizeFull();
}
  7. That's all. Now we can use our AligningDemo class in the root class.
    public class Demo extends UI {
  @Override
  public void init(VaadinRequest request) {
    setContent(new AligningDemo()); 
  }
}

How it works...

We can set the alignment of the component inside a specific layout with the setComponentAlignment() method. The method takes the component contained in the layout to be formatted as its parameters, and also takes the horizontal and vertical alignment. The easiest way to set alignments is to use the constants defined in the Alignment class.

See also

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.219.48.116