Simple ViewFrame Example

ViewFrame simplifies the process of creating views with a header, scrollable content and footer. Please note that ViewFrame does not set any margin, padding or spacing by default. It simply provides the structure.

The three main methods of ViewFrame are:

  • setViewHeader(Component…​ components)

  • setViewContent(Component…​ components)

  • setViewFooter(Component…​ components)

These slots can contain any component and any number of components. The content slot will take up any available vertical space and scroll automatically upon overflow.

Example

A simple example view using default Vaadin components. For more advanced examples see the views located in the com.vaadin.starter.business.ui.views package.

  1. @Route(value = "my-view", layout = MainLayout.class)
  2. @PageTitle("My View")
  3. public class MyView extends ViewFrame {
  5.   public MyView() {
  6.     // Header
  7.     Label title = new Label("Title");
  9.     Button print = new Button(new Icon(VaadinIcon.PRINT));
  10.     Button external = new Button(new Icon(VaadinIcon.EXTERNAL_LINK));
  12.     HorizontalLayout header = new HorizontalLayout(title, print, external);
  13.     header.setAlignItems(FlexComponent.Alignment.CENTER);
  14.     header.setFlexGrow(1, title);
  15.     header.setPadding(true);
  16.     header.setSpacing(true);
  18.     setViewHeader(header);
  20.     // Content
  21.     Paragraph text = new Paragraph("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
  23.     VerticalLayout content = new VerticalLayout(text);
  24.     content.setPadding(true);
  26.     setViewContent(content);
  28.     // Footer
  29.     Button reply = new Button("Reply", new Icon(VaadinIcon.REPLY));
  30.     Button replyAll = new Button("Reply All", new Icon(VaadinIcon.REPLY_ALL));
  31.     Button forward = new Button("Forward", new Icon(VaadinIcon.FORWARD));
  33.     HorizontalLayout footer = new HorizontalLayout(reply, replyAll, forward);
  34.     footer.setPadding(true);
  35.     footer.setSpacing(true);
  37.     setViewFooter(footer);
  38.   }
  39. }

example

If we wanted to distinguish the slots from one another, we could utilise some of the styles that the Business App Starter provides, e.g. borders and shadows.

Borders

To apply borders to any Component call addClassName(BoxShadowBorders.<DIRECTION>). Adding a bottom and top border on the header and footer respectively:

  1. header.addClassName(BoxShadowBorders.BOTTOM);
  2. footer.addClassName(BoxShadowBorders.TOP);

example borders

Shadows

Applying shadows using addClassName:

  1. header.addClassName(LumoStyles.Shadow.S);
  2. footer.addClassName(LumoStyles.Shadow.S);

Alternatively you can use the UIUtils utility class:

  1. UIUtils.setShadow(Shadow.S, header, footer);

example shadows

Background Color

You can also change the background color on the server-side using UIUtils.

  1. UIUtils.setBackgroundColor(LumoStyles.Color.BASE_COLOR, header, footer);

example background

For more information on how to theme your application using the various Business App Starter utilities please see Theming.

Updated 2021-03-08  Edit this article