java - GWT JQueryUI 对话框包装器不是 "attaching widget"

Question

我编写了一个包装 JQUeryUI 对话框的简单类。它基本上看起来像这样:

public class Dialog extends Composite
{
    final String id;

    public Dialog(IsWidget body) {
            initWidget(body.asWidget());
            id = DOM.createUniqueId();
            getElement().setId(id);
    }

    public void create() {
            create(id);
    }

    public void open() {
            open(id);
    }

    final native void create(String id) /*-{
            $wnd.jQuery("#" + id).dialog({ autoHide: true });
    }-*/;

    final native void open(String id) /*-{
            $wnd.jQuery("#" + id).dialog("open");
    }-*/;
}

我传递了初始化 View (我使用的是 uibinder 模板)。当 View 仅包含简单的 HTML 元素(如复选框)时它工作正常，但当它包含复杂的小部件(如披露面板或单元格列表)时 - 面板无法响应点击事件。显示面板不会打开，单元格列表也不会响应事件，尽管这两个 View 在放置在“GWT 弹出面板”中之前都运行良好。

更新

这里有更多的源代码显示了对话框是如何初始化的。

HasDialog parent = (HasDialog) body;
Dialog dialog = parent.getDialog();
dialog.open();

仅供引用 HasDialog 只是小部件继承的接口(interface)。

interface HasDialog { Dialog getDialog(); }

例如，包含披露面板小部件的小部件如下所示:

final Dialog dialog;

@Override
public Dialog getDialog()
{
    if (dialog == null) {  // only one instance
        dialog = new Dialog(this);
        dialog.create();
    }

    // dialog buttons and events have been commented out

    return dialog;
}

我们可以假设小部件没有内部问题，因为它在与 GWT 弹出面板一起使用时工作正常:

PopupPanel popup = new PopupPanel();
popup.setWidget(body);
popup.center();

我同意 logan我认为 onAttach 或 onLoad 事件正在为 View 子窗口小部件下沉。我注意到这些方法受到保护。正确连接它们的正确方法是什么？

更新2

我已经缩小了小部件(通过构造函数传递)未附加到 DOM 的问题 - 就小部件本身而言。

public void open()
{
    open(id);
    if (getWidget().isAttached() == false) {
        Window.alert("Widget not attached");
    }
}

我相信 Widget Javadoc 提供了一些与我的情况相关的信息。

protected void doAttachChildren()

If a widget contains one or more child widgets that are not in the logical widget hierarchy (the child is physically connected only on the DOM level), it must override this method and call onAttach() for each of its child widgets.

鉴于 Dialog 类应该能够与任何小部件一起工作，我不想向下转换我的小部件并开始编写大量样板文件，当然必须有一种优雅地附加小部件的方法。想法？

Answer 1

修改你的打开方式:

    public void open() {
        onAttach();
        RootPanel.detachOnWindowClose(this);
        open(id);
    }

添加关闭处理程序:

    void onClose() {
        if(RootPanel.isInDetachList(this)) {
            RootPanel.detachNow(this);
        }
        else {
            onDetach();
        }
    }

在创建对话框时注册 onclose 处理程序:

    final native void create(String id) /*-{
        var _self = this;
        $wnd.jQuery("#" + id).dialog({ 
            autoHide: true, 
            close: function(event, ui) {
                _self.@your.package.Dialog::onClose()();
                _self = null;
            }
        });
    }-*/;

其余的保持不变;)

编辑:事实上，您甚至不必生成 DomNode 的 ID，因为您可以直接在 DomNode 上实例化 Jquery 对象。修改后的整个类(class):

public class Dialog extends Composite {

    public Dialog(IsWidget body) {
        initWidget(body.asWidget());
    }

    public void create() {
        create(getElement());
    }

    public void open() {
        onAttach();
        RootPanel.detachOnWindowClose(this);
        open(getElement());
    }

    void onClose() {
        if(RootPanel.isInDetachList(this)) {
            RootPanel.detachNow(this);
        }
        else {
            onDetach();
        }
    }

    final native void create(Element element) /*-{
        var _self = this;
        $wnd.jQuery(element).dialog({ 
            autoHide: true, 
            close: function(event, ui) {
                _self.@your.package.Dialog::onClose()();
                _self = null;
            }
        });
    }-*/;

    final native void open(Element element) /*-{
        $wnd.jQuery(element).dialog("open");
    }-*/;
}