Question

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

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

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

甚至可能吗？

Answer 1

在自定义小部件＆＃34; myHTMLPanel＆＃34;中，您可以添加此功能：

@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

2 个答案: