GWT 使用 ui 活页夹创建自定义按钮

Question

我想创建一个特殊按钮，其中包含图像、文本、标签和另一幅图像。

我有以下代码：

    public class CrossingStateMenuItemButton extends Composite implements HasText, HasClickHandlers,
    ClickHandler {
  @UiField
  FocusPanel pane;
  @UiField
  Label label;
  @UiField
  Label state;
  @UiField
  Image error;
  @UiField
  Image acoustic;

  private CrossingObject crossingObject;

  interface CrossingStateMenuItemButtonBinder extends UiBinder<Widget, CrossingStateMenuItemButton> {
  }

  private static CrossingStateMenuItemButtonBinder binder = GWT
      .create(CrossingStateMenuItemButtonBinder.class);

  public CrossingStateMenuItemButton(CrossingObject crossingObject) {
    this.crossingObject = crossingObject;
    pane.addClickHandler(this);
    initWidget(binder.createAndBindUi(this));
  }

  public CrossingObject getCrossingObject() {
    return crossingObject;
  }

  public void setCrossingObject(CrossingObject crossingObject) {
    this.crossingObject = crossingObject;
  }

  @Override
  public void onClick(ClickEvent event) {
    this.fireEvent(event);
  }

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

  @Override
  public String getText() {
    return label.getText();
  }

  @Override
  public void setText(String text) {
    this.label.setText(text);
  }

  public void setState(LabelType state) {
    this.state.setType(state);
  }

  public void setAcoustic(boolean enabled) {
    this.acoustic.setVisible(enabled);
  }
}

我有对应的ui活页夹模板：

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:b="urn:import:org.gwtbootstrap3.client.ui" xmlns:g="urn:import:org.gwtbootstrap3.client.ui.gwt"
    xmlns:h="urn:import:org.gwtbootstrap3.client.ui.html" xmlns:gwt="urn:import:com.google.gwt.user.client.ui">

    <ui:with field='res'
        type='com.company.applicationname.client.resources.AppResources' />

    <gwt:FocusPanel ui:field="pane"
        addStyleNames="{res.style.crossingStateMenuItem}">
        <b:Image ui:field="error"
            styleName="{res.style.crossingStateMenuItemErrorImage}"></b:Image>
        <b:Label ui:field="label" styleName="{res.style.crossingStateMenuItemLabel}"></b:Label>
        <b:Label ui:field="state" type="DEFAULT"
            styleName="{res.style.crossingStateMenuItemStateLabel}">off</b:Label>
        <b:Image ui:field="acoustic"
            styleName="{res.style.crossingStateMenuItemAcousticImage}"></b:Image>
    </gwt:FocusPanel>

</ui:UiBinder>

但是当我尝试编译它时，我得到：

Type mismatch: cannot convert from FocusPanel to Widget

我被困在这个问题上有一段时间了，不知道问题出在哪里，我尝试了不同的面板（SimplePanel、HTMLPanel..）w/o 祝你好运。如何让它发挥作用？

Answer 1

这是一个愚蠢的错误，因为我是从 "org.gwtbootstrap3.client.ui.gwt.Widget" 而不是 "com.google.gwt.user.client.ui.Widget" 导入 Widget。

GWT 使用 ui 活页夹创建自定义按钮

GWT create custom button with ui binder

java

gwt

uibinder