当浏览器窗口调整大小时,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();
            }
        });     
...
}

添加:

我创建了一个简单的项目来说明问题:Popup类

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.
• 对于此Panel,您在Window上注册ResizeHandler.
• 单击"testButton"时,隐藏弹出窗口,但不要取消注册ResizeHandler.
• 然后,当您再次单击"显示弹出窗口"时,将创建另一个弹出窗口,其中包含另一个ResizeHandler.

所以我们有两个弹出窗口和两个ResizeHandlers.

现在,在调整大小时,你调用'center()'(在两个ResizeHandlers中都会发生) - 它有副作用,它显示弹出窗口(如果它们当前没有显示).第一个弹出窗口当前与DOM分离,但GWT足够聪明,可以重新附加它.但现在你马上就看到了他们.

解决方法是在隐藏弹出窗口时删除resize处理程序.

你可能想知道,没有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();
}

您还应确保在显示弹出窗口时禁用"显示弹出窗口"按钮.