Vaadin 14 - 在嵌套布局中使用时不显示/填充网格

本文介绍了Vaadin 14 - 在嵌套布局中使用时不显示/填充网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在尝试构建 Vaadin/Spring 应用程序.我正在使用 Spring Security 并基于此 但是，如果我从 MainView 中删除 layout = MainLayout.class，它会加载罚款.项目中的另一个视图，同样使用 Vaadin Grid 并引用 MainView，加载得很好:@SpringComponent@UIScope@Route(value = "vendor", layout = MainLayout.class)公共类 VendorView 扩展 VerticalLayout 实现 HasUrlParameter;{私人字符串道具；私有网格项目网格；私有 VendorItemService vendorService；公共 VendorView(VendorItemService vendorService) {this.vendorService = vendorService;}@覆盖public void setParameter(BeforeEvent event, String parameter) {this.prop = 参数；this.setUpUI();}私有无效 setUpUI() {var items = this.vendorService.findByVendor(prop);var h2 = new H2("Items for &" + this.prop);this.itemGrid = 新网格();this.itemGrid.addColumn(VendorItemDTO::getItemName).setHeader(Item");this.itemGrid.addColumn(VendorItemDTO::getTotalPrice).setHeader(总价");this.itemGrid.addColumn(VendorItemDTO::getUnitString).setHeader(单位");this.itemGrid.setItems(items);添加(h2，itemGrid)；}}这是我第一次使用 Vaadin，如果这是一个明显的错误，我深表歉意，但我参考了该项目的文档和视频，但尚未解决问题.谢谢. 解决方案 我遇到了几乎相同的问题，只是设置略有不同，这里是正确代码示例的答案链接，感谢@Erik Lumme - Vaadin 14 - 使用嵌套布局时网格消失就我而言，自从我开始使用嵌套布局引擎以来，我的网格消失了.浏览器工具的使用表明网格存在于 html 中，但具有样式参数 'position:relative' 并且被布局的底部元素溢出.解决方案几乎相同 - 我将 .setFullSize() 添加到包含网格的容器"元素.之后我做了 maven:clean 然后重建项目以使其工作.这是代码引用(完整示例可以通过提供的链接找到):主布局:@Theme(value = Material.class, variant = Material.DARK)公共类 MainLayout 扩展了 Composite实现 RouterLayout {//通过组件来委托内容.私有 Div mainContent = new Div();//**!!!容器"元素**公共主布局(){获取内容().添加(new Span("from MainLayout top"),主要内容，new Span("从 MainLayout 底部"));mainContent.setSizeFull();//**!!!.setFullSize 应用**}@覆盖public void showRouterLayoutContent(HasElement hasElement) {Objects.requireNonNull(hasElement);Objects.requireNonNull(hasElement.getElement());mainContent.removeAll();mainContent.getElement().appendChild(hasElement.getElement());}}LayoutWithMenuBar:@ParentLayout(value = MainLayout.class)公共类 LayoutWithMenuBar 扩展 Composite实现 RouterLayout {私有 Div mainContent = new Div();//**！！！容器元素**私有 Horizo​​ntalLayout menuBar = 新的 Horizo​​ntalLayout(new RouterLink("Tprojects", TProjectDashboard.class));公共 LayoutWithMenuBar() {getContent().add(menuBar, mainContent);mainContent.setSizeFull();//**！！！.setFullSize() 应用**}@覆盖public void showRouterLayoutContent(HasElement hasElement) {Objects.requireNonNull(hasElement);Objects.requireNonNull(hasElement.getElement());mainContent.removeAll();mainContent.getElement().appendChild(hasElement.getElement());}}最后是网格本身:@Route(value = "dashboard/tproject", layout = LayoutWithMenuBar.class)公共类 TProjectDashboard 扩展 VerticalLayout {私有电网<TProject>tprojectGrid = 新网格(TProject.class);公共 TProjectDashboard() {tprojectGrid.setItems(new TProject("Erik", "软件工程师"),new TProject("Fia", "幼儿园老师"),new TProject("Jack", "所有交易"));添加(tprojectGrid)；}}解决方案由@Erik Lumme 提供 - Vaadin 14 -使用嵌套布局时网格消失I am attempting to build a Vaadin/Spring app. I am using Spring Security and have based the security portions of the app around the samples and information in this tutorial. My main/home view is a very simple one with a Vaadin Grid:@SpringComponent@UIScope@Route(value = "", layout = MainLayout.class)public class MainView extends HorizontalLayout { private ItemService itemService; private Grid<ItemDTO> itemGrid; @Autowired public MainView(ItemService itemService) { this.itemService = itemService; var items = this.itemService.getItems(); this.itemGrid = new Grid<>(ItemDTO.class); this.itemGrid.addColumn(ItemDTO::getName).setHeader("Name"); this.itemGrid.addColumn(ItemDTO::getUnitId).setHeader("Unit"); this.itemGrid.setItems(items); add(itemGrid); }}The MainLayout class referenced above is also very simple:@SpringComponent@UIScopepublic class MainLayout extends VerticalLayout implements RouterLayout, HasComponents { private Div childWrapper = new Div(); public MainLayout() { H1 heading = new H1("Price List"); MenuBar menu = new MenuBar(); MenuItem vendor = menu.addItem("Vendor"); vendor.getSubMenu().addItem(new RouterLink("Wal-Mart", VendorView.class, "WMRT")); HorizontalLayout header = new HorizontalLayout(heading, menu); header.setSizeFull(); add(header); add(childWrapper); } @Override public void showRouterLayoutContent(HasElement content) { childWrapper.getElement().appendChild(content.getElement()); }}However, after logging in and being redirected to MainView, the Grid simply does not load:However, if I remove layout = MainLayout.class from MainView, it loads fines. Another view in the project, which similarly uses a Vaadin Grid and references MainView, loads just fine:@SpringComponent@UIScope@Route(value = "vendor", layout = MainLayout.class)public class VendorView extends VerticalLayout implements HasUrlParameter<String> { private String prop; private Grid<VendorItemDTO> itemGrid; private VendorItemService vendorService; public VendorView(VendorItemService vendorService) { this.vendorService = vendorService; } @Override public void setParameter(BeforeEvent event, String parameter) { this.prop = parameter; this.setUpUI(); } private void setUpUI() { var items = this.vendorService.findByVendor(prop); var h2 = new H2("Items for " + this.prop); this.itemGrid = new Grid<>(); this.itemGrid.addColumn(VendorItemDTO::getItemName).setHeader("Item"); this.itemGrid.addColumn(VendorItemDTO::getTotalPrice).setHeader("Total Price"); this.itemGrid.addColumn(VendorItemDTO::getUnitString).setHeader("Units"); this.itemGrid.setItems(items); add(h2, itemGrid); }}This is my first time using Vaadin, so I apologize if it is an obvious mistake, but I referenced the project's documentation and videos and have yet to resolve the issue.Thanks. 解决方案 I have faced almost the same problem with just a bit different setting, here is the link to the answer with proper code examples, thanks to @Erik Lumme - Vaadin 14 - grid disappearing when using nested layoutIn my case i had grid which disappeared since i started to use nested layout engine. Usage of browser tools showed that the grid was present in html but had style parameter 'position:relative' and was overflowed by bottom element of layout.The solution was almost the same - i added .setFullSize() to the "container" element which contained the grid. After that i made maven:clean and then rebuilt the project to make it work.Here is code quotation (full example can be found by the link provided):MainLayout:@Theme(value = Material.class, variant = Material.DARK)public class MainLayout extends Composite<VerticalLayout> implements RouterLayout { //Component to delegate content through. private Div mainContent = new Div(); //**!!!the "conteiner" element** public MainLayout() { getContent().add( new Span("from MainLayout top"), mainContent, new Span("from MainLayout bottom")); mainContent.setSizeFull(); //**!!!.setFullSize applied** } @Override public void showRouterLayoutContent(HasElement hasElement) { Objects.requireNonNull(hasElement); Objects.requireNonNull(hasElement.getElement()); mainContent.removeAll(); mainContent.getElement().appendChild(hasElement.getElement()); }}LayoutWithMenuBar:@ParentLayout(value = MainLayout.class)public class LayoutWithMenuBar extends Composite<VerticalLayout> implements RouterLayout { private Div mainContent = new Div(); //**!!! the container element** private HorizontalLayout menuBar = new HorizontalLayout( new RouterLink("Tprojects", TProjectDashboard.class)); public LayoutWithMenuBar() { getContent().add(menuBar, mainContent); mainContent.setSizeFull(); //**!!! .setFullSize() applied** } @Override public void showRouterLayoutContent(HasElement hasElement) { Objects.requireNonNull(hasElement); Objects.requireNonNull(hasElement.getElement()); mainContent.removeAll(); mainContent.getElement().appendChild(hasElement.getElement()); }}finally the grid itself:@Route(value = "dashboard/tproject", layout = LayoutWithMenuBar.class)public class TProjectDashboard extends VerticalLayout { private Grid<TProject> tprojectGrid = new Grid<>(TProject.class); public TProjectDashboard() { tprojectGrid.setItems( new TProject("Erik", "Software Engineer"), new TProject("Fia", "Kindergarden teacher"), new TProject("Jack", "All trades") ); add(tprojectGrid); }}The solution was provided by @Erik Lumme here - Vaadin 14 - grid disappearing when using nested layout 这篇关于Vaadin 14 - 在嵌套布局中使用时不显示/填充网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！