Binding Components from a PolymerTemplate

You can add child components to templates using the Component or Element API.

By using the @Id annotation, you can get a server-side Component or Element, for an element only defined in the PolymerTemplate html file for the client side to use on the server.

Here is the content of the HTML template file which has a placeholder div element with a "content" identifier. This element is mapped to a Div component in Java code below to set a Component as a child for it.

HTML

<dom-module id="main-page">
    <template>
        <div id="header">Main page</div>
        <div id="content"></div>
        <hr>
        <div id="footer">
            <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">Send Mail</a>
        </div>
    </template>
    <script>
        class MainPage extends Polymer.Element {
            static get is() {
                return 'main-page'
            }
        }
        customElements.define(MainPage.is, MainPage);
    </script>
</dom-module>

You can implement the method that wires a Component to the content of your template element.

Java

@Tag("main-page")
@HtmlImport("/com/example/MainPage.html")
public class MainPage extends PolymerTemplate<TemplateModel> {
    @Id("content")
    private Div content;
    public void setContent(Component content) {
        this.content.removeAll();
        this.content.add(content);
    }
}

The @Id annotation is used to map a component to an element created by the template on the client that has the identifier "content".

A component instance of the declared type is created automatically and wired to the actual dom element and injected into the ‘container’ field.

Now you can set any Component as a content for the MainPage class:

Java

MainPage page = new MainPage();
page.setContent(new Label("Hello!"));

In the Polymer template class example above, the div element with "footer" identifier could also be mapped via Div component and @Id("footer") annotation. But neither its hierarchical structure nor attributes/properties are available on the server side via API. The injected Div instance doesn’t have any server side child even though there is the anchor a element available on the client side. The injected instance getChildren() method returns an empty Stream.

Similar to this the getText() method of the Div instance injected via @Id("header") returns an empty string.

So server side Component/Element read methods are not always in sync with the client-side. But you still may use mutation API methods from the server side like appendChild/setProperty/setAttribute. Getter methods returns values which have been set from the server side only.