Centrer horizontalement une fenêtre popup dans Vaadin

Question

J'ai ajouté une fenêtre popup à mon interface principale comme suit :

Window component = new Window();
UI.getCurrent().addWindow(component);

Maintenant, je veux que mon popup soit centré horizontalement et par exemple à 40 pixels du haut de l'écran. D'après ce que je peux voir, Vaadin dispose de 4 méthodes pour positionner ma fenêtre.

component.center()
component.setPosition(x, y)
component.setPositionX(x)
component.setPositionY(y)

Aucun d'entre eux n'est vraiment ce que je veux. J'espérais au départ que setPositionY pourrait m'aider. Cela me permet d'obtenir la bonne distance par rapport au sommet, mais la position x est maintenant fixée à 0, alors que je voulais qu'elle soit centrée.

La fonction setPosition aurait pu m'aider si j'avais été en mesure de calculer la position x, mais il faudrait pour cela que je connaisse la largeur du composant en pixels, alors que component.getWidth ne m'indique que 100 %.

J'ai ensuite essayé d'utiliser le style CSS sur le composant, en écrivant une règle css explicite et en l'ajoutant au composant avec addStyleName. Il semble cependant que Vaadin remplace ce que j'ai écrit dans mon css par ses propres valeurs par défaut...

Avez-vous des idées pour positionner correctement mon composant Window ?

Answer 1

J'ai utilisé les méthodes getBrowserWindowWidth() y getBrowserWindowHeight() de la com.vaadin.server.Page pour cela.

J'ai centré ma fenêtre "log" horizontalement dans la partie inférieure de la fenêtre du navigateur avec

myWindow.setHeight("30%");
myWindow.setWidth("96%");
myWindow.setPosition(
    (int) (Page.getCurrent().getBrowserWindowWidth() * 0.02),
    (int) (Page.getCurrent().getBrowserWindowHeight() * 0.65)
);

Answer 2

Solution 1 : Utilisez SizeReporter

En effet, setPositionY() réinitialisera les paramètres de la fenêtre centered à la propriété false . Comme la largeur de votre pop-up et celle de la fenêtre de votre navigateur ne sont pas connues avant leur apparition à l'écran, le seul moyen que je connaisse pour obtenir ces valeurs est d'utiliser le module complémentaire SizeReporter. Son utilisation est assez simple :

public class MyUI extends UI {

    private Window popUp;

    private SizeReporter popUpSizeReporter;
    private SizeReporter windowSizeReporter;

    @Override
    protected void init(VaadinRequest request) {

        Button button = new Button("Content button");
        VerticalLayout layout = new VerticalLayout(button);
        layout.setMargin(true);

        popUp = new Window("Pop-up", layout);
        popUp.setPositionY(40);

        addWindow(popUp);

        popUpSizeReporter = new SizeReporter(popUp);
        popUpSizeReporter.addResizeListenerOnce(this::centerPopUp);

        windowSizeReporter = new SizeReporter(this);
        windowSizeReporter.addResizeListenerOnce(this::centerPopUp);
    }

    private void centerPopUp(ComponentResizeEvent event) {

        int popUpWidth = popUpSizeReporter.getWidth();
        int windowWidth = windowSizeReporter.getWidth();

        if (popUpWidth == -1 || windowWidth == -1) {
            return;
        }

        popUp.setPositionX((windowWidth - popUpWidth) / 2);
    }
}

Ce morceau de code sera correct tant que vous ne redimensionnerez pas la fenêtre pop-up. Si vous le faites, elle ne sera pas automatiquement recentrée. Si vous remplacez addResizeListenerOnce() par addResizeListener() alors il recentrera automatiquement la fenêtre pop-up mais vous aurez quelques "problèmes d'interface" car le module complémentaire envoie des événements de redimensionnement presque continuellement pendant que vous redimensionnez votre fenêtre pop-up...

Vous pourriez essayer de le faire à l'aide de CSS, mais personnellement j'évite autant que possible les CSS avec Vaadin :).

Vous devrez recompiler le widgetset après avoir ajouté l'add-on comme dépendance.

Solution 2 : Utilisez com.vaadin.ui.JavaScript

Je ne me porte pas garant de la portabilité de cette solution, mais je pense qu'elle fonctionnera sur la plupart des navigateurs modernes.

public class MyUI extends UI {

    private Window popUp;

    @Override
    protected void init(VaadinRequest request) {

        Button button = new Button("Content button");
        VerticalLayout layout = new VerticalLayout(button);
        layout.setMargin(true);

        popUp = new Window("Pop-up", layout);
        popUp.setPositionY(40);
        popUp.addStyleName("window-center");

        addWindow(popUp);

        // Add a JS function that can be called from the client.
        JavaScript.getCurrent().addFunction("centerWindow", args -> {
            popUp.setPositionX((int) ((args.getNumber(1) - args.getNumber(0)) / 2));
        });

        // Execute the function now. In real code you might want to execute the function just after the window is displayed, probably in your enter() method.
        JavaScript.getCurrent().execute("centerWindow(document.getElementsByClassName('window-center')[0].offsetWidth, window.innerWidth)");
    }
}