向 UI 发送参数并使用 Java/Vaadin 更新 UI

Question

初始情况如下图所示。我有一个创建对话框的主 UI。在此对话框中会生成一些属性。我想在按钮单击时将属性传输到主 UI，然后关闭对话框。然后我想刷新 UI，以便 UI 使用新的属性/参数进行更新。

关闭对话框的工作方式如下：

this.getParent().ifPresent(parent -> {
            if(parent instanceof Dialog)
            {
                ((Dialog)parent).close();
            }
        });

但现在我不知道如何将属性传输到主 UI 并在之后刷新它。

为了更好的想象，我将解释一个用例。 在对话框中我得到一个特定的数字（´int i = 2`）。在 UI 中有一个创建选项卡的方法。我想要和我说的一样多的标签。所以我需要在 UI 类中声明 i 才能成功执行该方法。

创建标签的代码： 构造函数（MainView）：

final Tabs tabs = this.createTabs();
    this.add(this.div, tabs);
    tabs.addSelectedChangeListener(e -> {
        this.div.removeAll();
        this.div.add(this.tabComponentMap.get(e.getSelectedTab()));
    });
    this.div.add(this.tabComponentMap.get(tabs.getSelectedTab()));

方法创建标签：

private Tabs createTabs()
{
    for(int i = 0; i <= h; i++)
    {
        if(i == 0)
        {
            this.tabComponentMap.put(new Tab("Tab" + i), new SubView1());
        }
        else
        {
            this.tabComponentMap.put(new Tab("Tab" + i), new SubView2());
        }
    }
    return new Tabs(this.tabComponentMap.keySet().toArray(new Tab[]{}));
}

h 是我从对话框中获得的属性。

Answer 1

有不同的方法可以做到这一点。我会（并且实际上会）解决这个问题的方法是将视图传递给对话框，因此对话框可以调用视图的方法来更新某些值。

@Route("dialog-test")
public class MyViewWithDialog extends VerticalLayout {
    private int tabsAmount = 0;
    public MyViewWithDialog(){
        TabsAmountDialog dialog = new TabsAmountDialog(this);
        Button openTabsAmountDialog = new Button("Open Dialog", click -> dialog.open());
        // adding of components omitted
    }

    public void setTabsAmount(int tabsAmount){
        this.tabsAmount = tabsAmount;
        // TODO: update tabs accordingly
    }
}

public class TabsAmountDialog extends Dialog {
    public TabsAmountDialog(MyViewWithDialog view){
        NumberField tabsAmountInput = new NumberField(); 
        Button confirmBtn = new Button("Confirm", click -> {
            // update tabsAmount value in view
            view.setTabsAmount(tabsAmountInput.getValue()); // converters omitted 

            // close Dialog
            this.close();
        });

        // adding of components omitted
    }
}

编辑：从您的评论中，我可以看到您没有直接扩展 Dialog 的组件，而是添加了另一个 View 作为新 Dialog 的组件。这也有效。在您的情况下，您需要做的就是

Dialog dialog = new Dialog(); 
dialog.add(new DialogView(this)); // pass this view into the other view, and do the same as I did there 
dialog.open();