> Markdown version of [Simple ViewFrame Example](https://vaadin.com/docs/v14/flow/starters/business-app/simple-viewframe-example). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# 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.

## <a id="example"></a>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.

```java
@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);
  }
}
```

[Image: 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**.

### <a id="borders"></a>Borders

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

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

[Image: example borders]

### <a id="shadows"></a>Shadows

Applying shadows using `addClassName`:

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

Alternatively you can use the `UIUtils` utility class:

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

[Image: example shadows]

### <a id="background-color"></a>Background Color

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

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

[Image: example background]

For more information on how to style and theme your application please see [Design System](https://vaadin.com/docs/v14/ds/overview).

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