显示复杂对象列表并发出事件 int vaadin 14 的最佳方式答案

【问题标题】：Best way to show a list of complex objects and emit event int vaadin 14显示复杂对象列表并发出事件 int vaadin 14 的最佳方式
【发布时间】：2021-08-19 12:09:32
【问题描述】：

对于示例，我有一个订单，我的用户可以添加一个商店并在每个商店中添加很多商品：

Amazon
    - cup    - $ 1
    - notebook  - $ 3
                                   - $ 4   Ebay
    -  bike     - $ 10
    - boat      - $ 13
                                   - $ 23


                          Total order: $ 27  [Button to send the order]

在我的项目中，我有 3 个组件：

CartView - （显示订单总数和一个按钮） - StoreView（显示商店名称和总数） ---StoreitemView（显示项目和要移除的按钮）

让我们怀疑： 1 - 显示列表的最佳方式是使用带有一行的网格？有些像这样：

Grid<StoreView> myGrid = new Grid();
myGrid.addComponentColumn(this::createStoreView).setAutoWidth(true);

或者最好像这样使用for：

  Div myDiv = new Div();
for(Store store in StoreList){
   muDiv.add(new StoreView(store);
}

2 - 我如何将事件传递给父母？因此，当我的用户单击 StoreItemView 上的按钮时，我需要将该事件发送到我的 CartView（传递给 StorView，然后转到 CarView 以更新值并重新创建购物车）

tks

【问题讨论】：

我真的不确定你想要达到什么样的布局。介意用 MS Paint 画出来并粘贴到这里吗？
能否请您重新表述您的问题，以便重点关注第二部分并添加您的尝试或失败的代码？ SO 是一个关于具体编程问题的问答页面，第一部分主要是基于意见的，很可能无法回答“什么是最好的”这个问题——没有灵丹妙药。

标签： vaadin vaadin-flow

【解决方案1】：

布局

布局取决于您期望的商店和商品数量。如果数量很少，那么循环并添加组件是一种不错的方法。

如果您有很多项目，使用带有一列的Grid 是一种更好的方法，因为所有项目都不会一次呈现。更好的方法可能是IronList，或者从 Vaadin 21 开始，VirtualList。

如果您的视图很复杂，包含很多组件，最好使用TemplateRenderer 而不是ComponentRenderer。如果您不喜欢用 HTML 而不是 Java 编写视图，您可以继续使用 ComponentRenderer，尤其是在性能看起来不错的情况下。

如果每个商店有很多商品，您也可以考虑为商店内的商店商品创建一个虚拟列表。特别是如果只有几家商店。

活动

这里没有正确答案。看起来你的StoreView 和StoreItemView 是紧耦合的，所以通信也可以紧耦合。比如StoreItemView可以直接用getRemoveButton()方法暴露按钮。

我会使用ComponentEvent 进行删除事件，类似于下面的代码。您创建StoreItemViews 的逻辑会有所不同，您可以在StoreView 中添加一个方法来添加事件侦听器。您可能还想为事件添加一些数据。

public class StoreView extends HorizontalLayout {

  public StoreView() {
    // Create your store items as you see fit
    StoreItemView storeItemView = new StoreItemView();
    storeItemView.getRemoveButton().addClickListener(e -> {
      remove(storeItemView);
      fireEvent(new StoreItemRemovedEvent(storeItemView));
    });
    add(storeItemView);
  }

  public static class StoreItemRemovedEvent extends
      ComponentEvent<StoreItemView> {

    public StoreItemRemovedEvent(StoreItemView source) {
      super(source, false);
    }
  }
}

public class CartView extends VerticalLayout {

  public CartView() {
    StoreView storeView = new StoreView();
    ComponentUtil.addListener(storeView, StoreView.StoreItemRemovedEvent.class, e -> 
        Notification.show("Store item removed"));
    add(storeView);
  }
}

【讨论】：