How to register a custom HTML element as a widget in GWT

Question

Hi guys Does anyone know how to register a custom html element as a GWT uiBinder widget and use it directly instead of using it in an HTMLPanel.

For example, if I use Google Polymer in the mgwt project, I use the html user 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 a paper shadow as a custom widget so that I can write code so that its easily portable 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

As far as I know, you cannot easily add a new custom element that UiBinder will understand. However, you can add it to your custom widget .

You will notice that GWT allows you to configure attributes for these custom elements, for example, 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> 

Pay attention to the <g:north size='5'> element - if you look at the source code of the DockLayoutPanel , you will see that it is processed using this method:

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

There is no @UiChild annotation, and an additional parameter means that something “magic” is happening behind the scene. And indeed, there is a DockLayoutPanelParser class that handles this special case. You will notice that it implements ElementParser - unfortunately, it is not possible to “plug in” your own ElementParser .

There was a gwt-customuibinder project that tried to circumvent this limitation, but it was deprecated for newer versions (2.5+?) Of GWT:

Please note that with the new versions of GWT this project is now deprecated, since many of the methods used to add custom item parsers to UiBinder are no longer possible.

Answer 2

I use and support this fork of this gwt-polymer wrap .

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