Follow these steps to visualize borders around components:
Add the following method to your
MainLayoutclass:private void showBorders() { String style = "v-ddwrapper-over"; setStyleName(style); upperSection.setStyleName(style); lowerSection.setStyleName(style); menuLayout.setStyleName(style); contentLayout.setStyleName(style); }Call the method at the end of the constructor:
public MainLayout() { ... showBorders(); }Run the application and say oh!
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...