Question

我想创建一个GWT小部件，它有一个矩形div元素（看起来像一个按钮）以及右边的一些文本。我希望能够选择此小部件，以便当我单击div /按钮或文本时，将选中整个小部件。

有关实施此建议的任何建议吗？如果有一种简单的方法可以在GWT按钮内嵌套多个项目，比如Button和Label，那可能会有效。我正在考虑创建一个扩展Composite并保存Button和Label的类，但我不确定如何在选择整个新窗口小部件时选择这两个。

Answer 1

您是否知道如何在纯HTML中绘制您想要制作的内容？

如果是这样，你可以简单地继承Widget，并创建所需的元素以及特定的样式 - 不需要构建多个其他小部件。然后，只需在新窗口小部件上添加一个点击处理程序，您就会知道何时有人点击窗口小部件中的任何内容。

同样，如果您使用HTMLPanel（包裹，如您所说，在Composite中）或某些内容同时包含Label和Button，您可以向面板添加一个单击处理程序，你会知道何时点击了其他任何一个小部件，因为click事件将“冒泡” - 如果没有什么阻止它，它会继续触发每个元素，然后是它的父元素，这样一切都知道点击。但是，嵌套小部件会使您的新小部件创建成本比创建HTML更加昂贵，所以请确保这是您更喜欢的。

在任何一种情况下，您都会使用Widget.addDomHandler(...)来实际添加点击处理程序。为了让生活更轻松，您可以创建一个新方法，实现HasClickHandlers，并像这样声明新方法：

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

根据要求，一个非常简短（比代码更多的评论）示例小部件似乎执行了所描述的内容：

public class ButtonWithText extends Widget implements HasClickHandlers {
  public ButtonWithText(String text, String buttonLabel) {
    // Start with a <div></div> wrapper
    setElement(Document.get().createDivElement());
    // Insert a <span> for the text, allowing us to change the text later
    Element textElement = Document.get().createSpanElement();
    textElement.setInnerText(text);

    // Create a button element as well
    Element buttonElement = Document.get().createButtonElement();
    buttonElement.setInnerText(buttonLabel);

    // Attach both to the div we already created
    getElement().appendChild(textElement);
    getElement().appendChild(buttonElement);

    // Note that we could have done all of the above with SafeHtmlTemplate
    // to let us write a string, or could do the escaping ourselves and just
    // make a simple HTML string in code. I find making DOM elements like
    // this easier to read, but many people prefer the template approach.
    // When considering a template tool, also look into the new library
    // Elemento to see what it offers.
  }

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

}

这是项目，让你看到它https://viola.colinalworth.com/proj/54177c9456d1c4f777d17dc660005643/project/client/SampleEntryPoint.java - 您可以单击文本或按钮，弹出窗口按预期显示。

具有Button和文本的GWT小部件？

1 个答案: