GWT 使用 ui binder 创建自定义按钮答案

【问题标题】：GWT create custom button with ui binderGWT 使用 ui binder 创建自定义按钮
【发布时间】：2017-03-23 07:54:35
【问题描述】：

我想创建一个特殊的按钮，它将包含图像、文本、标签和另一个图像。

我有以下代码：

    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 binder模板：

<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>

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

类型不匹配：无法从 FocusPanel 转换为 Widget

我在这个问题上停留了一段时间，不知道问题出在哪里，我尝试了不同的面板（SimplePanel、HTMLPanel..），但没有任何运气。如何让它发挥作用？

【问题讨论】：

标签： java gwt uibinder

【解决方案1】：

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

【讨论】：