Application Headers & Footers

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

structure

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

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

header outer

If you instead use setAppHearInner you get:

header inner

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

  1. Button home = UIUtils.createTertiaryButton(VaadinIcon.HOME);
  2. Button clock = UIUtils.createTertiaryButton(VaadinIcon.CLOCK);
  3. Button users = UIUtils.createTertiaryButton(VaadinIcon.USERS);
  4. Button search = UIUtils.createTertiaryButton(VaadinIcon.SEARCH);
  5. Button bell = UIUtils.createTertiaryButton(VaadinIcon.BELL);
  6. // Set the width
  7. for (Button button : new Button[]{home, clock, users, search, bell}) {
  8. button.setWidth("20%");
  9. }
  10. FlexLayout footer = new FlexLayout(home, clock, users, search, bell);
  11. // Set background color and shadow
  12. UIUtils.setBackgroundColor(LumoStyles.Color.BASE_COLOR, footer);
  13. UIUtils.setShadow(Shadow.M, footer);
  14. setAppFooterInner(footer);

footer inner

Example 2

Status bar located in the outer footer.

Java

  1. Icon icon = UIUtils.createIcon(IconSize.S, TextColor.SUCCESS, VaadinIcon.CHECK);
  2. Label label = UIUtils.createLabel(FontSize.XS, TextColor.BODY, "Online");
  3. FlexLayout footer = new FlexLayout(icon, label);
  4. // Set the alignment
  5. footer.setAlignItems(Alignment.CENTER);
  6. // Add spacing and padding
  7. footer.addClassNames(
  8. LumoStyles.Spacing.Right.S,
  9. LumoStyles.Padding.Wide.M
  10. );
  11. // Set background color and shadow
  12. UIUtils.setBackgroundColor(LumoStyles.Color.BASE_COLOR, footer);
  13. UIUtils.setShadow(Shadow.M, footer);
  14. setAppFooterOuter(footer);

footer outer