创建可重复使用的布局样式 uibinder

Question

我想创建一个布局 uibinder 以在其他 uibinder 中使用。

我有一个我经常使用的布局模式，里面有很多 html，还有一个放置内容的地方。我想创建一个 uibinder 并将所有与布局相关的 html 放入其中，然后我将在我的其他 uibinder 中使用这个 uibinder（称之为 <my:myHTMLPanel>）并提供其内部 html 从 xml 文件中像这样：

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

这可能吗？

Answer 1

在您的自定义小部件 "myHTMLPanel" 中，您可以添加此功能：

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

然后您可以像 ui.xml 部分那样使用它：

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

Answer 2

<!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());
    }
}

这是一个 uibinder，可以让身高未知的儿童垂直居中

创建可重复使用的布局样式 uibinder

Create a reusable layout style uibinder

gwt

uibinder