Creating New Views

The bare minimum needed when creating a new view is to define the Route, and to extend Component directly (example 1) or indirectly (example 2).

You can also extend ViewFrame to build a view with a header, scrollable content and footer (example 3). Most of the Business App Starter views are built with ViewFrame. They are located in the com.vaadin.starter.business.ui.views package.

Example 1: Extending Component

If you extend Component directly, you must annotate the class with @Tag, e.g. @Tag("div"). For more information on how to use Component as a container, please see the Creating a Component Container.

  1. @Route(value = <URL_fragment>, layout = MainLayout.class)
  2. @Tag("div")
  3. public class MyView extends Component {
  4.   public MyView() {
  5.     // Content goes here.
  6.     getElement().appendChild(...);
  7.   }
  8. }

Example 2: Extending Div

  1. @Route(value = <URL_fragment>, layout = MainLayout.class)
  2. public class MyView extends Div {
  3.   public MyView() {
  4.     // Content goes here.
  5.     add(...);
  6.   }
  7. }

Example 3: Extending ViewFrame

setViewHeader, setViewContent and setViewFooter all take a set of components, and puts them in their respective slot. All slots are optional.

  1. @Route(value = <URL_fragment>, layout = MainLayout.class)
  2. public class MyView extends ViewFrame {
  3.   public MyView() {
  4.     setViewHeader(Component... components);
  5.     setViewContent(Component... components);
  6.     setViewFooter(Component... components);
  7.   }
  8. }

For more info see Simple ViewFrame Example.

Please Remember

A few things to keep in mind when creating a new view:

  • The URL fragment must be unique.

  • The layout parameter defines the parent. Views are rendered inside their parent layout.

The Business App Starter is built around MainLayout.class. Please use it as the default parent layout when creating new views.

For information regarding routing in Vaadin, please see Routing and Navigation.

Adding a View to the Sidebar

Once you’ve created your view, it’s time to add it to the NaviDrawer so that it can be accessed via the UI. Open up MainLayout.java, and go to the initNaviItems method.

This is where the navigation items are set up and added to the NaviDrawer. A navigation item consists of an icon, a title and a navigation target.

To add the view we created in the previous step, add the following line:

  1. private void initNaviItems() {
  2.   ...
  3.   naviDrawer.addNaviItem(VaadinIcon.<ICON>, "My View", MyView.class);
  4.   ...
  5. }

Updated 2021-03-08  Edit this article