How to register Custom HTML Element as widget in G

Question

Hi folks Did someone have any idea how to register custom html element as GWT widget uiBinder and use them directly in place of using in HTMLPanel.

For e.g. if I'm using Google Polymer in my mgwt project I'm using custom html element as

                 <g:HTMLPanel >
                    <paper-shadow class="{style.card}">
                        <mgwt:touch.TouchPanel ui:field="touchPanel">
                            <mgwt:panel.flex.FlexPanel orientation="VERTICAL" alignment="CENTER">
                                <g:Image url="{global.getDirection.getSafeUri.asString}" />
                                <g:HTMLPanel>Take me to Deal</g:HTMLPanel>
                            </mgwt:panel.flex.FlexPanel>
                        </mgwt:touch.TouchPanel>
                    </paper-shadow>
                </g:HTMLPanel>

I want to register/create paper-shadow as custom widget so that I can write code as so that its easy to handel events

                <polymer:paper-shadow class="{style.card}">
                    <mgwt:touch.TouchPanel ui:field="touchPanel">
                        <mgwt:panel.flex.FlexPanel orientation="VERTICAL" alignment="CENTER">
                            <g:Image url="{global.getDirection.getSafeUri.asString}" />
                            <g:HTMLPanel>Take me to Deal</g:HTMLPanel>
                        </mgwt:panel.flex.FlexPanel>
                    </mgwt:touch.TouchPanel>
                <polymer:paper-shadow>

Answer 1

I'm using and maintaining this fork of this gwt-polymer wrap.

In the test app you can see several samples of use of polymer widgets in gwt, how to wrap existing html polymer elements, how to create new ones, the use with uibinder, etc.

Answer 2

As far as I know, you can't easily add a new custom element that UiBinder will understand. You can add one to your custom widget, though.

You'll notice that GWT allows custom attributes on these custom elements, like in DockLayoutPanel:

<g:DockLayoutPanel unit='EM'>
  <g:north size='5'>
    <g:Label>Top</g:Label>
  </g:north>
  <g:center>
    <g:Label>Body</g:Label>
  </g:center>
  <g:west size='192'>
    <g:HTML>
      <ul>
        <li>Sidebar</li>
        <li>Sidebar</li>
        <li>Sidebar</li>
      </ul>
    </g:HTML>
  </g:west>
</g:DockLayoutPanel>

Notice the <g:north size='5'> element - if you look into DockLayoutPanel's source code, you'll see that it is handled by this method:

public void addNorth(Widget widget, double size) {
    insert(widget, Direction.NORTH, size, null);
}

No @UiChild annotation and an extra parameter means something "magical" is happening behind scenes. And true enough, there's a DockLayoutPanelParser class that handles this special case. You'll notice that it implements the ElementParser - unfortunately, it's not possible to "plug in" your own ElementParser.

There was a project, gwt-customuibinder, that tried sidestepping this limitation, but it's been deprecated for newer (2.5+?) versions of GWT:

Please note that with the newer releases of GWT, this project is now deprecated as many of the techniques used to add custom element parsers to UiBinder are now not possible.