Write a component with special UiBinder markup?

Question

UiBinder is used to lay out GWT components in a declarative way, with XML markup, as opposed to programmatically, with Java code.

A new XML element in a UiBinder tree means a new instance of that class should be created. Thus, this example from the GWT docs instantiates a new HorizontalPanel and two Labels:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  <g:HorizontalPanel>
    <g:Label>Keep your ducks</g:Label>
    <g:Label>in a row</g:Label>
  </g:HorizontalPanel>
</ui:UiBinder>

There's also this other example, with a 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='10'>
    <g:HTML>
      <ul>
        <li>Sidebar</li>
        <li>Sidebar</li>
        <li>Sidebar</li>
      </ul>
    </g:HTML>
  </g:west>
</g:DockLayoutPanel>

In this case, the elements are 'north', 'west', 'center', but those are not new instances of classes, but a configuration of the new DockLayoutPanel.

How do I write a component that, like DockLayoutPanel, accepts custom UiBinder XML elements ?
Where in the source of class DockLayoutPanel, or in its configuration files, is it marked as using special markup, and what to do with the inner content of the special markup elements ?
What other widgets accept special UiBinder markup ?

Boris Brudnoy Boris Brudnoy · Accepted Answer · 2013-01-25T19:58:07

Seems like you'll have to introduce a custom UiBinder parser for your custom widget.

There's the com.google.gwt.uibinder.elementparsers.DockLayoutPanelParser class which has the following static final map defined:

private static final Map<String, String> DOCK_NAMES = new HashMap<String, String>();
static {
   DOCK_NAMES.put("north", "addNorth");
   DOCK_NAMES.put("south", "addSouth");
   DOCK_NAMES.put("east", "addEast");
   DOCK_NAMES.put("west", "addWest");
   DOCK_NAMES.put("lineStart", "addLineStart");
   DOCK_NAMES.put("lineEnd", "addLineEnd");
   DOCK_NAMES.put("center", "add");
}

Haven't searched for all of them but am guessing that any widget that has a custom parser like DockLayoutPanel can process whichever inner XML elements you program it to process.

Write a component with special UiBinder markup?

1 Answers