Create a reusable layout style uibinder

Question

I want to create a layout uibinder to use inside other uibinders.

I have a layout pattern I use frequently it has a lot of html in it, and a place to put the content. I'd like to create a uibinder and put in it all the layout related html, then I'd use this uibinder (call it <my:myHTMLPanel>) inside my other uibinders and provide its inner html from within the xml file like so:

<my:myHTMLPanel>
    Hello world(+other wigets or html)
</my:myHTMLPanel>
<my:myHTMLPanel>
    How are you
</my:myHTMLPanel>?

is that even possible?

Answer 1

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style>
    .VCenter {
        vertical-align: middle;
    }
    </ui:style>
    <g:HTMLPanel styleName="{style.VCenter}" ui:field="Wrapper">
        <table class="{style.VCenter}" width="100%" valign="middle" border="0" ui:field="Table">
            <tr class="{style.VCenter}" valign="middle">
                <td class="{style.VCenter}" valign="middle">
                    <g:HTMLPanel styleName="{style.VCenter}" ui:field="Container"></g:HTMLPanel>
                </td>
            </tr>
        </table>
    </g:HTMLPanel>
</ui:UiBinder> 


package package;

import java.util.Iterator;

import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.dom.client.TableElement;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.HasClickHandlers;
import com.google.gwt.event.shared.GwtEvent;
import com.google.gwt.event.shared.HandlerManager;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiChild;
import com.google.gwt.uibinder.client.UiConstructor;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.HasWidgets;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.Widget;

public class VCentered implements HasWidgets, IsWidget, HasClickHandlers {

    private static VCenteredUiBinder uiBinder = GWT
            .create(VCenteredUiBinder.class);

    interface VCenteredUiBinder extends UiBinder<Widget, VCentered> {
    }

    HandlerManager handlerManager;
    @UiField HTMLPanel Container;
    @UiField HTMLPanel Wrapper;
    @UiField TableElement Table;

    public void setHeight(String height) {
        Table.getStyle().setHeight(Integer.parseInt(height), Unit.PX);
    }

    public @UiConstructor VCentered(String height) {
        handlerManager = new HandlerManager(Container);
        uiBinder.createAndBindUi(this);
        setHeight(height);
    }

    @Override
    public Widget asWidget() {
        return Wrapper;
    }

    @UiChild
    public void addContent(Widget content) {
        Container.add(content);
    }
    @Override
    public void add(Widget w) {
        Container.add(w);
    }

    @Override
    public void clear() {
        Container.clear();
    }

    @Override
    public Iterator<Widget> iterator() {
        return Container.iterator();
    }

    @Override
    public boolean remove(Widget w) {
        return Container.remove(w);
    }

    @Override
    public void fireEvent(GwtEvent<?> event) {
        handlerManager.fireEvent(event);
    }

    @Override
    public HandlerRegistration addClickHandler(ClickHandler handler) {
        return Container.addDomHandler(handler, ClickEvent.getType());
    }
}

this is a uibinder to vertically center children with unknown heights

Answer 2

In your custom widget "myHTMLPanel", you can add this function:

@UiChild
public void addContent(Widget content) {
    // add the content in your custom widget
}

You can then use it like that in the ui.xml part:

<my:myHTMLPanel>
    <my:content>
        <g:HTML> Hello world </g:HTML>
    </my:content>
</my:myHTMLPanel>