> Markdown version of [Combining Templates and Binders](https://vaadin.com/docs/v23/create-ui/templates/polymer/polymer-template-and-binder). Section index: [llms.txt](https://vaadin.com/docs/v23/create-ui/llms.txt)

# Combining Templates and Binders

(deprecated since V18)

**Polymer templates are deprecated. Lit templates are recommended instead.**

## <a id="creating-the-template-component"></a>Creating the Template Component

The first step is to create the JavaScript Polymer template and its mapped Java class.

**Example**: Creating the `user-form` JavaScript Polymer template.

```javascript
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@vaadin/checkbox';
import '@vaadin/form-layout';
import '@vaadin/text-area';
import '@vaadin/text-field';
import './form-buttons-bar.js';

class UserForm extends PolymerElement {
  static get template() {
    return html`
      <style>
      </style>
      <vaadin-form-layout id="form">
        <vaadin-text-field id="email" label="Email (login)" colspan="2"></vaadin-text-field>
        <vaadin-text-field id="first-name" label="First Name"></vaadin-text-field>
        <vaadin-text-field id="last-name" label="Last Name"></vaadin-text-field>
        <vaadin-text-area id="comments" label="Comments"></vaadin-text-area>
      </vaadin-form-layout>
      <form-buttons-bar id="action-buttons"></form-buttons-bar>
    `;
  }

  static get is() {
    return 'user-form';
  }
}

customElements.define(UserForm.is, UserForm);
```

**Example**: Creating the mapped `UserForm` Java template class.

```java
@Tag("user-form")
@JsModule("./src/user-form.js")
public class UserForm extends PolymerTemplate <UserForm.FormComponentModel> {

  @Id("email")
  private TextField email;

  @Id("first-name")
  private TextField firstName;

  @Id("last-name")
  private TextField lastName;

  @Id("comments")
  private TextArea comment;

  @Id("action-buttons")
  private FormButtonsBar actionButtons;
}
```

## <a id="creating-and-linking-the-binder"></a>Creating and Linking the Binder

## <a id="creating-the-main-view"></a>Creating the Main View

First, we create the `MainView` Polymer template component. This component displays a grid of users and our new `UserForm` component. For the grid, we use the Vaadin [`Grid` component](https://vaadin.com/docs/v23/components/grid.md).

Here is the result.

[Image: MainView]

**Example**: Creating the `main-view` JavaScript Polymer template.

```javascript
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@vaadin/grid';
import './user-form.js';

class MainView extends PolymerElement {
  static get template() {
    return html`
      <style>
      </style>
      <div id="main-container">
        <vaadin-grid id="users-grid"></vaadin-grid>
        <user-form id="user-form"></user-form>
      </div>
    `;
  }

  static get is() {
    return 'main-view';
  }
}

customElements.define(MainView.is, MainView);
```

**Example**: Creating the mapped `MainView` Java template class.

```java
@Tag("main-view")
@JsModule("./src/main-view.js")
@Route("")
public class MainView extends PolymerTemplate<TemplateModel> {

    @Id("user-form")
    private UserForm userForm;

    @Id("users-grid")
    private UsersGrid usersGrid;
}
```

`08504685-81D5-457C-BD24-77E52A388880`