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

时间:2012-05-11 14:20:53

标签: java javascript gwt popup

我需要在浏览器窗口调整大小时调整大小。我在我的弹出构造函数中添加了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的错误?

1 个答案:

答案 0 :(得分:7)

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

  • 单击“显示弹出窗口”按钮时,您将创建第一个PopupPanel。
  • 对于此Panel,您在Window上注册ResizeHandler。
  • 点击“testButton”时,隐藏弹出窗口,但不要取消注册ResizeHandler。
  • 然后,当您再次单击“显示弹出窗口”时,将创建另一个弹出窗口,并使用另一个ResizeHandler。

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

现在,在调整大小时,你调用'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();
}

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