> Markdown version of [Adding a view](https://vaadin.com/docs/v10/bakeryflow/adding-a-view). Section index: [llms.txt](https://vaadin.com/docs/v10/bakeryflow/llms.txt)

# Adding a view

In the following, we’re going to create a new view and add it to the navigation, step-by-step. The view we are creating here is an "About" view.

## <a id="creating-a-design"></a>Creating a design

The views of bakery are built with [Vaadin Designer](https://vaadin.com/designer). We start off by creating a new design (Polymer template in Designer) `about-view.html` in `src/main/resources/static/frontend/src`. Designer will add the `.html` suffix for us. Check "Create Java companion file", pick "Java source root" as `src/main/java` and set "Java package" as `com.vaadin.starter.bakery.ui`. Vaadin Designer also will create a corresponding `AboutView.java` class.

[Image: Adding a new design file]

Open the generated `about-view.html` template in Designer’s source mode and replace the contents with this:

```html
<link rel="import" href="../../../bower_components/polymer/polymer.html">

<dom-module id="about-view">
  <template>
    <style include="shared-styles">
      :host {
        display: flex;
        flex-direction: column;
      }
      div {
        margin: auto;
      }
    </style>

    <div>
      This is a new web application based on the <a href="vaadin.com/start">Vaadin Bakery App Starter.</a>
    </div>
  </template>

  <script>
      class AboutView extends Polymer.Element {
          static get is() {
              return 'about-view';
          }
      }
      customElements.define(AboutView.is, AboutView);
  </script>
</dom-module>
```

This defines the `about-view` as web component that displays a simple text and a link. You can add new components and content to this template.

## <a id="routing"></a>Routing

Open the Java class `AboutView` in the `com.vaadin.starter.bakery.ui` package. `AboutView` instance will be initialized when the user wants to enter the view.

Add the `Route` annotation to the class:

```java
@Route(value = "about", layout = MainView.class)
```

Now we have a valid view in our application, and you can access it at <http://localhost:8080/about>. Any logic or configuration that you want to add into the view goes here.

## <a id="process-navigation"></a>Process navigation

You can control the view navigation logic by implementing `BeforeEnterObserver` or `BeforeLeaveObserver`. More about [navigation lifecycle](https://vaadin.com/docs/v10/flow/routing/tutorial-routing-lifecycle.html).

## <a id="including-the-view-to-the-application-menu"></a>Including the view to the application menu

The last thing for us is to add the view in our UI. This is achieved by adding the following into the constructor of `MainView`:

```java
if (SecurityUtils.isAccessGranted(AboutView.class)) {
  pages.add(new PageInfo("about", "question", "About"));
}
```

After this change, the view also appears in the application main menu.

> **Note:** You probably want to add the parameters as constants in `BakeryConst` instead of using strings here directly. This is left as an exercise for the reader.

## <a id="restricting-access-to-the-view"></a>Restricting access to the view.

If you want to restrict access to some views, you can require the user to have certain roles by adding an annotation. Restricting access to the about view might not make much sense usually, but we’ll do it anyway by adding the following annotation to `AboutView`:

```java
@Secured(Role.ADMIN)
```

`@Secured(Role.ADMIN)` will require that the logged in user has the `ADMIN` role to be able to access the view. If the user does not have the role, then the link to the view will not present in the menu and the user will get an "Access denied" message in case he tries to access it with a direct URL or otherwise.

## <a id="data-binding"></a>Data binding

There are several ways to exchange data between server and client.

### <a id="bind-by-id"></a>Bind by Id

Any element in the design can be bound by id. For example, drag `h1` element from Designer `Palette` to `Outline`.

[Image: Drag the element to the template]

[Image: Drag the element to the outline]

> **Tip:** Template can be edited in source code mode as well.

To bind new element to the server-side just check Java check-box at the `Outline`. Go to `AboutView.java`, Designer generated there the following code:

```java
@Id("h1") private H1 h1;
```

As an example, add such constructor:

```java
public AboutView() {
    h1.setText("About view");
}
```

### <a id="bind-by-polymer-template-property"></a>Bind by Polymer template property

Read more about [binding Model Data in a PolymerTemplate](https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-bindings.html)