1

我创建了以下类作为 gwtbootstrap3 Tooltip 的扩展。我想派生 gwtbootstrap3 Tooltip 类至少有两个原因：

1.）在显示工具提示时添加一个 onWindowClosing 处理程序，以便我可以在用户离开页面时隐藏（）工具提示（据我所知，这是 Bootstrap 也不支持的功能，是吗？）

2.) 我想阻止在 iPad 或 iPhone 上显示页面时显示工具提示，因为它们在涉及工具提示时表现得很奇怪（第一个提示显示工具提示，第二个提示执行按钮，这与用户期望的不完全一致)

请注意，下面给出的类还没有完成......但是在这个阶段我在添加处理程序时遇到了异常。另请注意，无论我添加哪种类型的处理程序（ShowHandler、ShownHandler 等），它都会引发异常。

非常感谢任何帮助。

    package com.mypackage.client.widgets.featureWidgets;
    import org.gwtbootstrap3.client.shared.event.ShowEvent;
    import org.gwtbootstrap3.client.shared.event.ShowHandler;
    import org.gwtbootstrap3.client.ui.constants.Trigger;

    import com.google.gwt.event.shared.HandlerRegistration;
    import com.google.gwt.user.client.Window;
    import com.google.gwt.user.client.Window.ClosingEvent;

    public class Tooltip extends org.gwtbootstrap3.client.ui.Tooltip {

        private boolean isMobile;
        private HandlerRegistration windowClosingHandlerRegistration;
        private final Tooltip tooltip;

        public Tooltip() {
            super();
            tooltip = this;

            this.addShowHandler(new ShowHandler() {
                @Override
                public void onShow(final ShowEvent showEvent) {
                    // TODO Auto-generated method stub
                    if (windowClosingHandlerRegistration == null) {
                        windowClosingHandlerRegistration = Window.addWindowClosingHandler(new Window.ClosingHandler() {
                            @Override
                            public void onWindowClosing(final ClosingEvent arg0) {
                                tooltip.hide();
                            }
                        });
                    }

                }
            });
        }


    }


    When I create a instance of this tooltip using the following:

    [...]
        <b:ButtonToolBar ui:field="itemButtonToolBar" addStyleNames="hiddenPrint">
        <b:ButtonGroup>

            <a:Tooltip title="{msgs.buttomTitleAddItem}" container="body">
                <b:Button ui:field="addItemButton" icon="PLUS"/>
            </a:Tooltip>                                        
    [...]

尝试添加处理程序时出现以下异常，为什么？

    SEVERE: (TypeError) : Cannot read property 'addHandler_11_g$' of undefinedcom.google.gwt.core.client.JavaScriptException: (TypeError) : Cannot read property 'addHandler_11_g$' of undefined
        at Unknown.addShowHandler_2_g$(meetingApp-0.js@26:57195)
        at Unknown.Tooltip_6_g$(meetingApp-0.js@8:57685)
        at Unknown.build_f_Tooltip2_0_g$(meetingApp-0.js@55:31606)
        at Unknown.get_f_Tooltip2_0_g$(meetingApp-0.js@15:31831)
        at Unknown.build_f_ButtonGroup1_0_g$(meetingApp-0.js@38:31524)
        at Unknown.get_f_ButtonGroup1_0_g$(meetingApp-0.js@15:31791)
        at Unknown.build_itemButtonToolBar_0_g$(meetingApp-0.js@41:31696)
        at Unknown.get_itemButtonToolBar_0_g$(meetingApp-0.js@15:31876)
        at Unknown.createAndBindUi_58_g$(meetingApp-0.js@91:31437)
        at Unknown.createAndBindUi_59_g$(meetingApp-0.js@15:31441)
        at Unknown.ItemButtonGroup_2_g$(meetingApp-0.js@56:30733)
        at Unknown.$init_589_g$(meetingApp-0.js@31:37722)
        at Unknown.SummaryWidget_1_g$(meetingApp-0.js@8:37686)
        at Unknown.loadSummaryWidget_0_g$(meetingApp-0.js@26:4991)
        at Unknown.setSummary_1_g$(meetingApp-0.js@10:5028)
        at Unknown.onSuccess_8_g$(meetingApp-0.js@21:3312)
        at Unknown.onSuccess_9_g$(meetingApp-0.js@8:3317)
        at Unknown.onResponseReceived_0_g$(meetingApp-0.js@26:156917)
        at Unknown.fireOnResponseReceived_0_g$(meetingApp-0.js@17:129224)
        at Unknown.onReadyStateChange_0_g$(meetingApp-0.js@28:129532)
        at Unknown.<anonymous>(meetingApp-0.js@18:172082)
        at Unknown.apply_0_g$(meetingApp-0.js@28:104636)
        at Unknown.entry0_0_g$(meetingApp-0.js@16:104692)
        at Unknown.<anonymous>(meetingApp-0.js@14:104672)
4

1 回答 1

2

免责声明：我使用 gwtbootstrap3 v0.9.2，我相信它与您使用的版本相同，因为您的代码出现了相同的错误。

工具提示需要一个小部件来操作（在您的情况下，按钮是工具提示的小部件）。Tooltip 使用它的小部件来处理所有事件 - 例如，请参见源代码addShowHandler。

现在您需要了解整个结构是如何构建的：

  • 首先创建工具提示（没有设置小部件）
  • 然后创建按钮
  • 调用Tooltip 的setWidget方法将按钮设置为小部件

因此，当您addShowHandler在构造函数中使用方法时，实际上是widget.addHandler在小部件为空时调用。

您可以通过以下方式检查Window.alert(tooltip.getWidget() == null ? "null" : tooltip.getWidget().toString());

有几种方法可以使它工作（越晚越好）：

  1. 等待通过调度延迟命令来构建 DOM 结构（如果您确定最终会设置小部件）：

    Scheduler.get().scheduleDeferred(new ScheduledCommand() {
    @Override
    public void execute() {
        // set up events handling
    }
});

  2. 覆盖setWidget方法（注意有两种方法：setWidget(Widget w)和setWidget(IsWidget w)）：

    @Override
public void setWidget(Widget w) {
    super.setWidget(w);
    // set up events handling
}

  3. 您不需要addWindowClosingHandler在showEvent处理程序中，您可以直接在构造函数中进行：

    public class Tooltip extends org.gwtbootstrap3.client.ui.Tooltip {

    private boolean isMobile;
    private final Tooltip tooltip;

    public Tooltip() {
        super();
        tooltip = this;

        Window.addWindowClosingHandler(new Window.ClosingHandler() {
            @Override
            public void onWindowClosing(final ClosingEvent arg0) {
                tooltip.hide();
            }
        });
    }
}
于 2017-02-02T10:51:13.327 回答