显示复杂对象列表和发出事件int vaadin14的最佳方法
对于示例，我有一个订单，我的用户可以添加一个商店，并在每个商店中添加许多iten：
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);或者最好像这样使用a：
Div myDiv = new Div();
for(Store store in StoreList){
muDiv.add(new StoreView(store);
}2-如何将事件传递给父级？因此，当我的用户单击StoreItemView上的按钮时，我需要将该事件发送到我的CartView(传递给StorView，然后转到CarView以更新值并重新创建购物车)
tks
回答 1
Stack Overflow用户
发布于 2021-08-19 12:53:18
布局
布局取决于您期望的商店和商品的数量。如果数量很少，那么只需循环并添加组件就是一种不错的方法。
如果您有许多项，则使用具有一列的Grid是一种更好的方法，因为不会一次呈现所有项。一个更好的方法可能是IronList，或者自VirtualList以来的Vaadin 21。
如果您的视图很复杂，包含很多组件，那么使用TemplateRenderer而不是ComponentRenderer是一个好主意。如果您不喜欢用HTML语言而不是Java语言编写视图，那么您可以继续使用ComponentRenderer，尤其是在性能似乎很好的情况下。
如果每个商店有很多商品，你也可以考虑为商店内的商品建立一个虚拟列表。特别是如果只有几家商店的话。
事件
这里没有正确的答案。看起来您的StoreView和StoreItemView是紧密耦合的，所以通信也可以紧密耦合。例如，StoreItemView可以使用getRemoveButton()方法直接公开按钮。
我将使用移除事件的ComponentEvent，类似于下面的代码。您创建StoreItemView的逻辑将有所不同，您可以在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);
}
}https://stackoverflow.com/questions/68847613
复制相似问题
腾讯云开发者
