Simple ViewFrame Example

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.

@Route(value = "my-view", layout = MainLayout.class)
@PageTitle("My View")
public class MyView extends ViewFrame {

  public MyView() {
    // Header
    Label title = new Label("Title");

    Button print = new Button(new Icon(VaadinIcon.PRINT));
    Button external = new Button(new Icon(VaadinIcon.EXTERNAL_LINK));

    HorizontalLayout header = new HorizontalLayout(title, print, external);
    header.setAlignItems(FlexComponent.Alignment.CENTER);
    header.setFlexGrow(1, title);
    header.setPadding(true);
    header.setSpacing(true);

    setViewHeader(header);

    // Content
    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.");

    VerticalLayout content = new VerticalLayout(text);
    content.setPadding(true);

    setViewContent(content);

    // Footer
    Button reply = new Button("Reply", new Icon(VaadinIcon.REPLY));
    Button replyAll = new Button("Reply All", new Icon(VaadinIcon.REPLY_ALL));
    Button forward = new Button("Forward", new Icon(VaadinIcon.FORWARD));

    HorizontalLayout footer = new HorizontalLayout(reply, replyAll, forward);
    footer.setPadding(true);
    footer.setSpacing(true);

    setViewFooter(footer);
  }
}

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:

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

Shadows

Applying shadows using addClassName:

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

Alternatively you can use the UIUtils utility class:

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

Background Color

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

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

For more information on how to style and theme your application please see Design System.

473DEFA7-19B2-4696-AA33-4988FC6F4079

Docs