Time for action – visualizing borders

Follow these steps to visualize borders around components:

1. Add the following method to your MainLayout class:

   private void showBorders() {
     String style = "v-ddwrapper-over";
     setStyleName(style);
     upperSection.setStyleName(style);
     lowerSection.setStyleName(style);
     menuLayout.setStyleName(style);
     contentLayout.setStyleName(style);
   }

2. Call the method at the end of the constructor:

   public MainLayout() {
   
     ...
   
     showBorders();
   }

3. Run the application and say oh!

What just happened?

We have added a built-in CSS class to the layouts (v-ddwrapper-over). The application now looks like this:

Note

The setStyleName method allows adding a CSS class to a component. Vaadin has built-in CSS classes that we can use or we can create our own ones. We will cover this interesting topic in Chapter 7, Customizing UI Components – Time to Theme it.

Our suspicious were true. The layouts are not the size we need. We want our MainLayout to be like a full screen component occupying...