java - GWT resize and centering popup when browser window resize - Stack Overflow

admin管理员组

文章数量:1356904

I need resize popup on browser window resize. I added ResizeHandler in my popup constructor, but after several browser resizing center() function create new popup, instead of centering the current. Here some code what i have tried already. Please tell me how to solve this or suggest some solutions.

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();
            }
        });     
...
}

Added:

I created a simple project that illustrates the problem: Class of Popup

package tesr.client;

import .google.gwt.core.client.GWT;
import .google.gwt.event.dom.client.ClickEvent;
import .google.gwt.event.logical.shared.ResizeEvent;
import .google.gwt.event.logical.shared.ResizeHandler;
import .google.gwt.uibinder.client.UiBinder;
import .google.gwt.uibinder.client.UiField;
import .google.gwt.uibinder.client.UiHandler;
import .google.gwt.user.client.Window;
import .google.gwt.user.client.ui.Button;
import .google.gwt.user.client.ui.PopupPanel;
import .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);
    }

}

XML for uibinder

<!DOCTYPE ui:UiBinder SYSTEM ".ent">
<ui:UiBinder xmlns:ui="urn:ui:.google.gwt.uibinder"
    xmlns:g="urn:import:.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> 

and main class

package tesr.client;

import .google.gwt.core.client.EntryPoint;
import .google.gwt.event.dom.client.ClickEvent;
import .google.gwt.event.dom.client.ClickHandler;
import .google.gwt.user.client.ui.Button;
import .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);

    }
}

What i making wrong? Or maybe it's bug of GWT?

I need resize popup on browser window resize. I added ResizeHandler in my popup constructor, but after several browser resizing center() function create new popup, instead of centering the current. Here some code what i have tried already. Please tell me how to solve this or suggest some solutions.

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();
            }
        });     
...
}

Added:

I created a simple project that illustrates the problem: Class of Popup

package tesr.client;

import .google.gwt.core.client.GWT;
import .google.gwt.event.dom.client.ClickEvent;
import .google.gwt.event.logical.shared.ResizeEvent;
import .google.gwt.event.logical.shared.ResizeHandler;
import .google.gwt.uibinder.client.UiBinder;
import .google.gwt.uibinder.client.UiField;
import .google.gwt.uibinder.client.UiHandler;
import .google.gwt.user.client.Window;
import .google.gwt.user.client.ui.Button;
import .google.gwt.user.client.ui.PopupPanel;
import .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);
    }

}

XML for uibinder

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google./gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:.google.gwt.uibinder"
    xmlns:g="urn:import:.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> 

and main class

package tesr.client;

import .google.gwt.core.client.EntryPoint;
import .google.gwt.event.dom.client.ClickEvent;
import .google.gwt.event.dom.client.ClickHandler;
import .google.gwt.user.client.ui.Button;
import .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);

    }
}

What i making wrong? Or maybe it's bug of GWT?

• java
• javascript
• gwt
• popup

Share Improve this question Follow edited May 11, 2012 at 16:05 Taras Lazarenko asked May 11, 2012 at 14:20 Taras LazarenkoTaras Lazarenko 41033 silver badges99 bronze badges 5

• It works for me - I can't reproduce the problem. I don't know, what getNewWidth() does exactly, and I'm not sure, which methods BigPopup overrides (you are using a .google.gwt.user.client.ui.PopupPanel, not a Popup from Ext-GWT, or something like that?) – Chris Lercher Commented May 11, 2012 at 15:30
• getNewWidth() and getNewHeight() return string like "120px". BigPopup extends PopupPanel. I was shocked when I saw this effect of center() method. show() method has same effect. There are no overridden methods in the class. – Taras Lazarenko Commented May 11, 2012 at 15:41
• I've also tested, it works without problem nowhere Popup is created magically when i resized several times.. – Jama A. Commented May 11, 2012 at 18:20
• 1 @Jamshid: The problem only appears, if you click "Show Popup", then "testButton", and then again "Show Popup". – Chris Lercher Commented May 11, 2012 at 18:31
• this question actually help me to find about popup window, this is my first week with GWT – Asraful Commented Apr 5, 2013 at 11:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The problem probably doesn't have anything to do with the resizing at all. It's just this:

• You create the first PopupPanel when you click the "Show Popup" button.
• For this Panel, you register a ResizeHandler on the Window.
• When clicking "testButton", you hide the popup, but don't unregister the ResizeHandler.
• Then, when you click "Show Popup" again, another popup is created, with another ResizeHandler.

So we have two popups, and two ResizeHandlers.

Now, on resize, you call 'center()' (which happens in both ResizeHandlers) - which has the side effect, that it shows the popups (if they aren't currently shown). The first popup is currently detached from the DOM, but GWT is smart enough to re-attach it. But now you see them both at once.

The solution is to remove the resize handler, when you hide the popup.

You may wonder, that there is no .google.gwt.user.client.Window.removeResizeHandler() method. It works a little bit differently:

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();
}

You should also make sure to disable the "Show Popup" button while the popup is displayed.

本文标签： javaGWT resize and centering popup when browser window resizeStack Overflow