我正在使用Vaadin 8.5.1和Vaading Desiin与Spring Boot 2.0.4的组合。
目前，我正在尝试在页面底部添加一个弹出视图，该视图在单击按钮时打开。在弹出窗口中有一个垂直布局，包括两个组件：水平拆分面板和按钮。弹出窗口视图应具有当前浏览器窗口的宽度和高度的三分之一。 水平拆分面板应使用弹出窗口中的所有空间，按钮不需要这些空间。
我做了什么：
@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 实现(是在较早阶段计算的，并在调整窗口大小时再次触发。但是，我不知道何时以及需要做什么来触发它。
有没有人有想法，如何解决这个问题？
编辑：当我在弹出窗口视图中有一个树组件或日期字段组件，然后展开树元素或通过从日期弹出窗口中选择一个值来更改日期字段的值时，调整大小正确完成，一切都很好。
我认为在您的情况下，检查浏览器窗口大小和计算目标像素大小的方法对于您的情况来说太复杂了。我建议将弹出窗口的宽度设置为 100%，高度设置为 33%，例如component.setHeight("33%")，是的，您可以使用宽度和高度的百分比而不是像素。然后大小调整由 CSS 完成，它将更快地响应浏览器窗口大小，而无需服务器往返。