Skip to content

Latest commit

 

History

History
59 lines (46 loc) · 3.01 KB

tutorial-webcomponent-basic.asciidoc

File metadata and controls

59 lines (46 loc) · 3.01 KB
Raw

Basic Integration of a Polymer Web Component

This tutorial covers setting up a basic web component and importing needed resources. For related tutorials, see

A web component is a reusable client-side component that you can use in the same way as regular HTML elements. It has a custom HTML tag name and it’s mainly configured by setting HTML attributes or properties. The contents of the web component is defined by adding text or other DOM elements as children inside the component’s own DOM element.

The Java class for integrating <paper-slider> can start out as follows:

@Tag("paper-slider")
@HtmlImport("bower_components/paper-slider/paper-slider.html")
public class PaperSlider extends Component {
    public PaperSlider() {
    }
}

You specify the tag name of the element using the @Tag annotation, just like you would with any built in element such as <div>. The actual implementation of the <paper-slider> element is in the paper-slider.html file, which you can import using @HtmlImport. In this example it is assumed that you are using bower and have a bower_components folder in the root of you WAR file.

You can set up the bower_components folder by running

bower init
bower install paper-slider --save
Note
 To install bower, you first need to install Node.js through a package manager or by downloading the installer. You can then install bower by running npm install -g bower.

If you are using Maven, the command can be run in the src/main/webapp folder to make bower_components available as /bower_components. If you are using something else, make sure the files end up in the root of the WAR file.

bower init will ask a you couple of questions. The default answers for all the questions are suitable for this kind of integration, so you can simply proceed by pressing enter to accept each default answer.

With this basic integration, you can use add the PaperSlider class to a view to see that it works:

public class PaperSliderView extends Div implements View {
    public PaperSliderView() {
        add(new PaperSlider());
    }
}

For creating an API for attributes and properties, see Using Attributes and Properties with a Polymer Web Component. For listening to events from a web component, see Using Events with a Polymer Web Component.

Note
 Web components implemented using Polymer should be used with Polymer’s own DOM API. Hummingbird will automatically use the Polymer DOM API when appropriate.