浏览器窗口调整大小时 GWT 调整大小和居中弹出窗口

Question

我需要在浏览器窗口调整大小时调整弹出窗口。我在弹出构造函数中添加了 ResizeHandler ，但是在几个浏览器调整大小 center() 函数后创建新的弹出窗口，而不是使当前居中。这里有一些我已经尝试过的代码。 请告诉我如何解决这个问题或提出一些解决方案。

public BigPopup() {
...
    final BigPopup self = this;
        Window.addResizeHandler(new ResizeHandler() {           
            @Override
            public void onResize(ResizeEvent event) {
                self.setHeight(getNewHeight());
                self.setWidth(getNewWidth());
                self.center();
            }
        });     
...
}

public BigPopup() {
...
        Window.addResizeHandler(new ResizeHandler() {           
            @Override
            public void onResize(ResizeEvent event) {
                BigPopup.this.setHeight(getNewHeight());
                BigPopup.this.setWidth(getNewWidth());
                BigPopup.this.center();
            }
        });     
...
}

添加：

我创建了一个简单的项目来说明问题： 弹出类

package tesr.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.logical.shared.ResizeEvent;
import com.google.gwt.event.logical.shared.ResizeHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.Widget;

public class BigPopup extends PopupPanel {

    private static BigPopupUiBinder uiBinder = GWT
            .create(BigPopupUiBinder.class);

    interface BigPopupUiBinder extends UiBinder<Widget, BigPopup> {
    }

    @UiField
    Button tstBtn;

    @UiHandler("tstBtn")
    void click(ClickEvent event) {
        this.hide();
    }

    public int[] getSize() {
        int[] mas = new int[2];
        int x = Window.getClientWidth();

        int y = Window.getClientHeight();

        if (x >= 1024) {
            mas[0] = x - 100;
            mas[1] = y - 100;
        } else {
            mas[0] = 1024;
            mas[1] = 768;
        }

        return mas;
    }

    public BigPopup() {
        setWidget(uiBinder.createAndBindUi(this));
        Window.addResizeHandler(new ResizeHandler() {
            @Override
            public void onResize(ResizeEvent event) {
                BigPopup.this.setHeight(getSize()[1] + "px");
                BigPopup.this.setWidth(getSize()[0] + "px");
                BigPopup.this.center();
            }
        });
        this.setHeight(getSize()[1] + "px");
        this.setWidth(getSize()[0] + "px");
        this.setAnimationEnabled(true);
        this.setGlassEnabled(true);
        this.setAutoHideEnabled(false);
    }

}

用于 uibinder 的 XML

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style>

    </ui:style>
    <g:HTMLPanel>
        <g:Label text="testLabel"></g:Label>
        <g:Button text="testButton" ui:field="tstBtn"></g:Button>
    </g:HTMLPanel>
</ui:UiBinder> 

和主类

package tesr.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;

public class AAA implements EntryPoint {

    public void onModuleLoad() {    
        Button btn = new Button("Show Popup");
        btn.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                BigPopup popup = new BigPopup();
                popup.center();             
            }
        });
        RootPanel.get().add(btn);

    }
}

我做错了什么？或者可能是 GWT 的错误？

Answer 1

这个问题可能与调整大小没有任何关系。就是这样：

• 当您单击“显示弹出窗口”按钮时，您将创建第一个 PopupPanel。
• 对于此面板，您在 Window 上注册一个 ResizeHandler。
• 单击“testButton”时，您会隐藏弹出窗口，但不要取消注册 ResizeHandler。
• 然后，当您再次单击“显示弹出窗口”时，会创建另一个弹出窗口，其中包含另一个 ResizeHandler。

所以我们有两个弹出窗口和两个 ResizeHandler。

现在，在调整大小时，您调用“center()”（这在两个 ResizeHandlers 中都会发生）-它具有副作用，即显示弹出窗口（如果当前未显示）。第一个弹出窗口当前与 DOM 分离，但 GWT 足够聪明，可以重新附加它。但现在你可以同时看到它们。

解决方案是在隐藏弹出窗口时删除调整大小处理程序。

您可能想知道，没有com.google.gwt.user.client.Window.removeResizeHandler() 方法。它的工作方式有点不同：

private final HandlerRegistration handlerRegistration;

public BigPopup() {
  setWidget(uiBinder.createAndBindUi(this));
  handlerRegistration = Window.addResizeHandler(new ResizeHandler() {...});
  ...
}
@UiHandler("tstBtn")
void click(final ClickEvent event) {
   handlerRegistration.removeHandler();
   this.hide();
}

您还应该确保在显示弹出窗口时禁用“显示弹出窗口”按钮。