Application Headers & Footers

As stated in the overview the Business App Starter is structured as follows:

You can configure the application’s headers and footers in MainLayout::initHeadersAndFooters. The only difference between these is their placement in the UI. Any Component, and any number of Components, can be slotted in.

Headers

Headers typically house logos, titles, toolbars and tabs.

Example

How to place Tabs in the outer/inner header.

Java

private void initHeadersAndFooters() {
  Tab tab1 = new Tab("Tab 1");
  Tab tab2 = new Tab("Tab 2");
  Tabs tabs = new Tabs(tab1, tab2);
  setAppHeaderOuter(tabs);
}

If you instead use setAppHearInner you get:

Footers

Most typically used for mobile navigation. Status bars, toolbars and summaries are also pretty common.

Example 1

Using the inner footer for mobile navigation.

Java

Button home = UIUtils.createTertiaryButton(VaadinIcon.HOME);
Button clock = UIUtils.createTertiaryButton(VaadinIcon.CLOCK);
Button users = UIUtils.createTertiaryButton(VaadinIcon.USERS);
Button search = UIUtils.createTertiaryButton(VaadinIcon.SEARCH);
Button bell = UIUtils.createTertiaryButton(VaadinIcon.BELL);
// Set the width
for (Button button : new Button[]{home, clock, users, search, bell}) {
  button.setWidth("20%");
}
FlexLayout footer = new FlexLayout(home, clock, users, search, bell);
// Set background color and shadow
UIUtils.setBackgroundColor(LumoStyles.Color.BASE_COLOR, footer);
UIUtils.setShadow(Shadow.M, footer);
setAppFooterInner(footer);

Example 2

Status bar located in the outer footer.

Java

Icon icon = UIUtils.createIcon(IconSize.S, TextColor.SUCCESS, VaadinIcon.CHECK);
Label label = UIUtils.createLabel(FontSize.XS, TextColor.BODY, "Online");
FlexLayout footer = new FlexLayout(icon, label);
// Set the alignment
footer.setAlignItems(Alignment.CENTER);
// Add spacing and padding
footer.addClassNames(
  LumoStyles.Spacing.Right.S,
  LumoStyles.Padding.Wide.M
);
// Set background color and shadow
UIUtils.setBackgroundColor(LumoStyles.Color.BASE_COLOR, footer);
UIUtils.setShadow(Shadow.M, footer);
setAppFooterOuter(footer);