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();//**！！！容器元素**私有 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
@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屋！