Расширение компонента в PopupView - Vaadin - PullRequest
0 голосов
/ 12 сентября 2018

Я использую Vaadin 8.5.1 с комбинацией Vaading Desiin с Spring Boot 2.0.4.

В настоящее время я пытаюсь добавить PopupView внизу страницы, которая открывается при нажатии кнопки.Во всплывающем окне есть вертикальная компоновка, включающая два компонента: HorizontalSplitPanel и Button.PopupView должен иметь ширину текущего BrowserWindow и одну треть высоты.HorizontalSplitPanel должен использовать все пространство во всплывающем окне, которое не нужно для кнопки.

Что я сделал:

@SpringComponent
@UIScope
public class View extends VerticalLayout implements Observer {

    private final PopupContentView popupContentView;

    private PopupView popup;

    @Autowired
    public View(PopupContentView popupContentView) {
        this.popupContentView = popupContentView;
    }

    @PostConstruct
    void init() {
        button.addClickListener(clickEvent -> openPopup());
    }

    private void openPopup() {
        if (popup == null) {
            setSizeOfPopUp();
            // popup will adjust automatically to size of content
            popup = new PopupView(null, popupContentView);
            popup.addPopupVisibilityListener(event -> {
                if (event.isPopupVisible()) {
                    popupContentView.build(this::submitted);
                }
            });
            popup.setHideOnMouseOut(false);
            this.addComponent(popup);
        }
        popup.setPopupVisible(true);
    }

    private void setSizeOfPopUp() {
        if (popupContentView != null) {
            popupContentView.setWidth(Page.getCurrent().getBrowserWindowWidth(), Unit.PIXELS);
            popupContentView.setHeight(((float) Page.getCurrent().getBrowserWindowHeight()) / 3, Unit.PIXELS);
        }
    }

    private void submitted() {
        // do some stuff
    }

    @Override
    public void update(Observable observable, Object o) {
        if (observable instanceof BrowserWindowResizeListenerObservable) {
            setSizeOfPopUp();
        }
    }
}

@Service
public class BrowserWindowResizeListenerObservable extends Observable implements Page.BrowserWindowResizeListener {

    @Override
    public void browserWindowResized(Page.BrowserWindowResizeEvent browserWindowResizeEvent) {
        this.setChanged();
        this.notifyObservers();
    }
}

@SpringComponent
@UIScope
public class PopupContentView extends VerticalLayout {

    private SubmitCallback submitCallback;
    private Button submitBtn;

    @PostConstruct
    void init() {
        super.init();
    }

    void build(@NotNull SubmitCallback) {
        removeAllComponents();
        this.addComponent(horizontalSplitPanel);
        this.addComponent(submitBtn);
        this.setExpandRatio(horizontalSplitPanel, 1.0f);
        this.submitCallback = callback;
    }

    private void submit() {
        submitCallback.submit(someContent);
    }

    @FunctionalInterface
    public interface SubmitCallback {

        void submit(SomeContent someContent);
    }
}

Как вы можете видеть, у меня есть основной вид,просмотр содержимого и класса слушателя.Я хочу, чтобы всплывающее окно отображалось при нажатии кнопки и содержало представление содержимого с панелью и кнопкой отправки.Панель занимает оставшееся место, которое не нужно для кнопки.и всплывающее окно полностью заполнено содержимым.

На самом деле происходит следующее: панель занимает все пространство всплывающего окна, а кнопка будет отображаться под всплывающим окном.Тем не менее, когда я изменяю размер окна и происходит событие изменения размера, все в порядке, и кнопка больше не находится ниже всплывающего окна.Похоже, что отступы и поля (которые являются реализацией коэффициента расширения в Vaadin в HTML) вычисляются на более ранней стадии и снова запускаются при изменении размера окна.Тем не менее, я понятия не имею, когда и что мне нужно сделать, чтобы вызвать его.

У кого-нибудь есть идеи, как это можно исправить?

РЕДАКТИРОВАТЬ: КогдаУ меня есть компонент Tree или DateField в PopupView, а затем разверните элемент дерева или измените значение DateField, выбрав значение во всплывающем окне Date, изменение размера выполнено правильно, и все в порядке.

1 Ответ

0 голосов
/ 13 сентября 2018

Я думаю, что в вашем случае метод проверки размера окна браузера и расчета размера целевого пикселя слишком сложен для вашего случая. Я бы порекомендовал просто установить ширину всплывающего окна равной 100%, а высоту - 33%, например component.setHeight("33%"), да, вы можете использовать проценты для ширины и высоты вместо пикселей. После этого CSS выполняется определение размера, и оно быстрее реагирует на изменение размера окна браузера без обращения к серверу.

...