GridLayout - fill all available space in content

Question

I'm developing a web application in Vaadin framework which has home page and few sub pages. What I want to achieve is to have fixed header and footer and in the center have content, that is being changed and fill all the space between header and footer. This is my MainUI class:

// HEADER
final VerticalLayout headerLayout = new VerticalLayout();
final Panel headerPanel = new Panel();
headerPanel.addStyleName("header");

final ActiveLink header = new ActiveLink(provider.getText(getLocale(), "application.title.name"), new ExternalResource(""));
header.addStyleName("header");
header.addListener((ActiveLink.LinkActivatedListener) (ActiveLink.LinkActivatedEvent event) -> {
    getUI().getNavigator().navigateTo(Constant.View.MAIN);
});

headerPanel.setContent(header);
headerLayout.addComponent(headerPanel);

// FOOTER
final VerticalLayout footerLayout = new VerticalLayout(new Label("« FOOTER »"));

// CONTENT
final VerticalLayout contentLayout = new VerticalLayout();

final Panel contentPanel = new Panel(contentLayout);
contentPanel.addStyleName("content transparent no-border");

// MAIN = all together
final VerticalLayout mainLayout = new VerticalLayout(headerLayout, contentPanel, footerLayout);
mainLayout.setSizeFull();
mainLayout.setExpandRatio(contentPanel, 1);
setContent(mainLayout);

// Register Views in navigator
navigator = new Navigator(this, contentPanel);
navigator.addView("", new MainView(provider));
navigator.addView(Constant.View.DICT_ADMIN, new DictAdminView(provider));

For changing the view in content I'm using Navigator like this in MainView class:

final ActiveLink link11 = new ActiveLink(provider.getText(getLocale(), "menu.links.dict.admin"), new ExternalResource(""));
link11.addStyleName("menulinks");
link11.addListener((LinkActivatedListener) (LinkActivatedEvent event1) -> {
    getUI().getNavigator().navigateTo(Constant.View.DICT_ADMIN);
});

And finally this is my DictAdminView class:

public class DictAdminView extends GridLayout implements View {

    private static final Logger LOGGER = LoggerFactory.getLogger(DictAdminView.class);
    I18NProvider provider;
    private final DictionaryDao dictionaryDao = new DictionaryDao();
    private final TermDao termDao = new TermDao();
    private final JPAContainer dictionaries = dictionaryDao.getContainer();
    private final JPAContainer terms = termDao.getContainer();

    public DictAdminView(I18NProvider provider) {
        super(4, 6);
        this.provider = provider;
    }

    @Override
    public void enter(ViewChangeListener.ViewChangeEvent event) {
        removeAllComponents();
        this.addStyleName("dictAdminLayout");
        this.setSizeFull();
        this.setSpacing(true);

        // Table with Dictionaries
        Grid grid = new Grid(dictionaries);
        grid.setId("dictList");
        grid.setWidth("100%");
        grid.setColumns(
            grid.getColumns().get(1).getPropertyId(),
            grid.getColumns().get(0).getPropertyId());
        grid.getColumns().get(1).setWidth(80).setHeaderCaption("POS");
        this.addComponent(grid, 0, 0, 0, 5);
        dictionaries.sort(new Object[]{grid.getColumns().get(0).getPropertyId()}, new boolean[]{true});

        // Table with Terms
        Grid grid1 = new Grid(terms);
        grid1.setId("termList");
        grid1.setWidth("100%");
        grid1.setColumns(
            grid1.getColumns().get(5).getPropertyId(),
            grid1.getColumns().get(0).getPropertyId());
        this.addComponent(grid1, 1, 0, 3, 3);
        terms.sort(new Object[]{grid1.getColumns().get(0).getPropertyId()}, new boolean[]{true});
        terms.addContainerFilter(new IsNull("dictionaryId"));   // show items w/o dict by default

        this.addComponent(new Button("lol button"), 1, 5, 3, 5);

        // Handle dictionary selection
        grid.addSelectionListener(selectionEvent -> {
        // Get selection from the selection model
            Integer selectedDictionaryId = (Integer) ((SingleSelectionModel) grid.getSelectionModel()).getSelectedRow();

            terms.removeAllContainerFilters();

            if (selectedDictionaryId != null) {
                terms.addContainerFilter(new Compare.Equal("dictionaryId.id", selectedDictionaryId));
                Utils.showInfoMessage(provider.getText(getLocale(), "msg.info.title.dictionary.selected"),
                            grid.getContainerDataSource().getItem(selectedDictionaryId).getItemProperty("name").toString());
            }
            else {
                terms.addContainerFilter(new IsNull("dictionaryId"));   // show items w/o dict by default
                Utils.showInfoMessage(provider.getText(getLocale(), "msg.info.title.nothing.selected"), "");
            }
        });
    }
}

My problem here is that I can't stretch the Grid to fill all space between header and footer. I've tried combination of setSizeFull() and setRowExtendRatio() but no success. Also I've tried to do it in CSS.

1. Is there a way how to stretch the grid either in Java or CSS?

2. Is the Navigator and changing View a good approach or is there a better way how to switch between content?

Answer 1

The solution is to use Vaadin add-on BorderLayout or built-in CustomLayout with own HTML and CSS.