Zmiana rozmiaru okna GWT i wyśrodkowanie po zmianie rozmiaru okna przeglądarki

Question

Potrzebuję zmienić rozmiar okna popup przy zmianie rozmiaru okna przeglądarki. Dodałem ResizeHandler do mojego wyskakującego konstruktora, ale po kilku funkcjach zmiany rozmiaru okna przeglądarki() ustaw nowe wyskakujące okienko zamiast centrowania bieżącego. Oto kod, którego już wypróbowałem. Proszę mi powiedzieć, jak rozwiązać ten problem lub zaproponować kilka rozwiązań.

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

Dodano:

stworzyłem prosty projekt, który ilustruje problem: Klasa 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); 
    } 

} 

XML dla UiBinder

<!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> 

i głównego klasy

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

    } 
} 

Co robię źle? A może to błąd GWT?

Answer 1

Problem prawdopodobnie nie ma nic wspólnego z rozmiarem. Po prostu:

• Tworzysz pierwszy PopupPanel po kliknięciu przycisku "Pokaż wyskakujące".
• Dla tego panelu rejestrujesz ResizeHandler w oknie.
• Po kliknięciu "testButton", ukrywasz wyskakujące okienko, ale nie wyrejestrujesz ResizeHandler.
• Następnie, po ponownym kliknięciu przycisku "Pokaż okno podręczne", tworzone jest kolejne wyskakujące okienko z innym obiektem ResizeHandler.

Mamy więc dwa pop-upy i dwa ResizeHandlers.

Teraz, po zmianie rozmiaru, wywołujesz "center()" (co dzieje się w obu ResizeHandlers) - który ma efekt uboczny, że pokazuje wyskakujące okienka (jeśli nie są one obecnie wyświetlane). Pierwsze wyskakujące okienko jest obecnie odłączone od DOM, ale GWT jest wystarczająco inteligentny, aby go ponownie dołączyć. Ale teraz widzisz ich obu naraz.

Rozwiązaniem jest usunięcie manipulatora zmiany rozmiaru, gdy ukryjesz wyskakujące okienko.

Można się zastanawiać, że nie ma metody com.google.gwt.user.client.Window.removeResizeHandler(). Działa to trochę inaczej:

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

Powinieneś również wyłączyć przycisk "Pokaż wyskakujące", gdy pojawi się wyskakujące okienko.