GWT:将自定义窗口小部件添加到自定义窗口小部件的单元格丢失事件

Question

我们的要求是使用CellTable其单元格中包含的自定义小部件来创建可编辑的网格.自定义窗口小部件具有与文本框关联的文本框和搜索按钮.要将自定义窗口小部件添加为单元格,创建了类的子AbstractEditableCell类(由GWT提供)并具有覆盖render()和onBrowserEvent()方法.

render(Context context, String value, SafeHtmlBuilder sb)自定义窗口小部件单元格的方法为窗口小部件创建一个安全html,并将此安全html呈现给单元格.但我面临的问题是,自定义窗口小部件正确呈现但它失去了其关联事件.下面给出的渲染方法:

if (viewData.isEditing()) {
    textBoxSelector.setText(text);
    OnlyToBeUsedInGeneratedCodeStringBlessedAsSafeHtml safeHtmlObj = new OnlyToBeUsedInGeneratedCodeStringBlessedAsSafeHtml(textBoxSelector.toString());
    sb.append(safeHtmlObj);
} else {
  // The user pressed enter, but view data still exists.
  sb.append(html);
}

如果我尝试render()使用以下代码在方法中添加窗口小部件,则不会添加窗口小部件.

    int left = parent.getAbsoluteLeft();
    int top = parent.getAbsoluteTop();
    String elementId = "ID" + left + top;
    try {
        parent.setId(elementId);
        // parent.removeFromParent();
        RootPanel.get(elementId).add(textBoxSelector);
    } catch (AssertionError error) {
        RootPanel.get(elementId).add(textBoxSelector);
    }

我真的很感激,如果没有人CellTable失去相关事件,任何人都可以指导我实现添加小部件.

Answer 1

GWT的Cell与GWT Widgets不兼容.这意味着您无法将GWT窗口小部件放置在单元格内并使其仍然起作用.单元格确实有一个替代事件处理机制(如下所述)

原因是Cell更接近无状态渲染器.给定一个数据对象,Cell将吐出HTML.单个Cell将被重复使用 - 为页面上的各种元素吐出HTML - 并且永远不会维护对它创建的任何DOM元素的引用.

在上面的示例中,您调用"someWidget.toString()".这样做只会返回窗口小部件的HTML表示,并且会丢失您的事件处理.

处理单元格中的事件

自定义单元格的GWT开发指南(有一些额外的细节)

要处理单元格中的事件,您需要覆盖一个名为的单独方法onBrowserEvent.您还需要通过super('click', 'keydown')在构造函数中调用您有兴趣收听的事件列表来配置您的单元格以通知特定事件.

由于Cells是无状态渲染器,onBrowserEvent将传递被单击的渲染元素的上下文以及单元格渲染的原始数据对象.然后,您可以根据需要应用更改或操作DOM.

以下是从上面链接的开发指南中获取的示例:

@Override
public void onBrowserEvent(
    Context context,
    Element parent,
    String value,
    NativeEvent event,
    ValueUpdater<String> valueUpdater) {

  // Let AbstractCell handle the keydown event.
  super.onBrowserEvent(context, parent, value, event, valueUpdater);

  // Handle the click event.
  if ("click".equals(event.getType())) {
    // Ignore clicks that occur outside of the outermost element.
    EventTarget eventTarget = event.getEventTarget();
    if (parent.getFirstChildElement().isOrHasChild(Element.as(eventTarget))) {
      doAction(value, valueUpdater);
    }
  }
}