Vaadin 14 - 在嵌套布局中使用时不显示/填充网格 [英] Vaadin 14 - Grid not Displaying/Populating When Used in Nested Layout
问题描述
我正在尝试构建 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();//**!!!容器元素**私有 HorizontalLayout menuBar = 新的 HorizontalLayout(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
@UIScope
public 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 layout
In 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 - 在嵌套布局中使用时不显示/填充网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!