Creating a Simple Component Using the Template API

In this section, we demonstrate how to create a simple component using only the Template API.

Our example creates a simple view that allows the user to enter their name and click a button.

Creating the Template File on the Client Side

The first step is to create the LitElement TypeScript template file on the client side in frontend/src/hello-world.ts. This file contains the view structure.

Example: Creating the hello-world.ts TypeScript LitElement template file.

js

  1. import {LitElement, html} from 'lit-element';
  2. import '@vaadin/vaadin-text-field/vaadin-text-field.js';
  3. import '@vaadin/vaadin-button/vaadin-button.js';
  4. import '@axa-ch/input-text';
  5. class HelloWorld extends LitElement {
  6. render() {
  7. return html`
  8. <div>
  9. <vaadin-text-field id="firstInput"></vaadin-text-field>
  10. <axa-input-text id="secondInput"></axa-input-text>
  11. <vaadin-button id="helloButton">Click me!</vaadin-button>
  12. </div>`;
  13. }
  14. }
  15. customElements.define('hello-world', HelloWorld);
  • This is the JavaScript ES6 module that defines a LitElement template.

  • The tag name should contain at least one dash (-). For example, hello-world is a valid tag name, but helloworld is not.

  • The imported dependencies are:

    • LitElement (from the LitElement library): This is the required superclass of all LitElement templates.

    • vaadin-text-field, vaadin-button and axa-input-text components.

    • html for inline DOM templating.

Creating the Java Template Class

To use the client-side LitElement template on the server side, you need to create an associated Java class that extends the LitTemplate class.

Example: Creating the HelloWorld Java template class.

Java

  1. @Tag("hello-world")
  2. @NpmPackage(value = "@axa-ch/input-text", version = "4.3.11")
  3. @JsModule("./src/hello-world.ts")
  4. public class HelloWorld extends LitTemplate {
  5. /**
  6. * Creates the hello world template.
  7. */
  8. public HelloWorld() {
  9. }
  10. }
  • The @Tag annotation name matches from the TypeScript template. This ensures that the tag name is the same on the server and the client.

  • The @JsModule annotation binds the Java class to the hello-world.ts template class by specifying the relative path to the JavaScript module in the frontend folder in the project root. You can import multiple resources using the @JsModule annotation, if needed.

  • The @NpmPackage annotation declares a dependency to the input-text npm package: @axa-ch/input-text 4.3.11. This annotation can be used to declare a dependency to any npm package.

Using the Component

You can now use the HelloWorld component in the same way as any other component.

Example: Using the HelloWorld component in a Java class.

Java

  1. HelloWorld hello = new HelloWorld();
  2. Div layout = new Div();
  3. layout.add(hello);
Note
Some browsers, like IE11 and Safari 9, do not support ES modules. To ensure that your component works in these browsers, you can configure this in the vaadin-maven-plugin in your pom.xml. See Taking your Application into Production for more.