Creating an In-project Web Component

To integrate existing, public web components it typically makes sense to do as described above in “Integrating a Polymer Web component”. If you want to create a UI component which is specific to the application project you are working on, you can integrate and develop it within your application project instead. Assuming you have an existing project, here the https://vaadin.com/start/v10-project-base project is used as an example, you need to

1. Install Polymer CLI if you do not have it installed

2. Use Polymer CLI to create a new Polymer element in the src/main/webapp/frontend/bower_components in your project

3. Create a Java API for the component

Install Polymer CLI

You can find extensive Polymer CLI installation instructions at https://www.polymer-project.org/2.0/docs/tools/polymer-cli

In short you need to install: 1. Node / npm 2. Git 3. Bower 4. Polymer-cli

If you have node, npm and git installed, you can install bower and polymer-cli as

sh

npm install -g bower polymer-cli

Create a New Polymer Element

You can find extensive instructions on how to create a Polymer element at https://www.polymer-project.org/2.0/docs/tools/create-element-polymer-cli

Assuming you name your Polymer element my-test-element (the name MUST contain at least one dash), the element needs to end up in src/main/webapp/frontend/bower_components/my-test-element`and the main HTML must be `src/main/webapp/frontend/bower_components/my-test-element/my-test-element.html.

To get the files in the correct place you can do

sh

mkdir -p src/main/webapp/frontend/bower_components/my-test-element
cd src/main/webapp/frontend/bower_components/my-test-element
polymer init --name polymer-2-element
rm -rf bower.json  bower_components/ demo polymer.json README.md test index.html

The last command removes a lot of files generated for your Polymer element. This is done for clarity as the files, especially the bower_components folder inside your my-test-element folder, will not be used by Flow. If you want to add dependencies, you should add these as webjar dependencies in the project.

Create a Java API for the Component

This works exactly as described in Creating Java API for a Web Component. The only difference is that static files are loaded from your project instead of from a webjar and you can modify them easily while creating the Java API.

As an example, for the generated my-test-element, you could do

Java

@Tag("my-test-element")
@HtmlImport("bower_components/my-test-element/my-test-element.html")
public class MyTest extends Component {
    public MyTest(String prop1) {
        getElement().setProperty("prop1", prop1);
    }
}

You can now use the component as e.g.

Java

public class MainView extends VerticalLayout {
    public MainView() {
        add(new MyTest("World"));
    }
}