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

Posted 2021-04-30

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

关闭对话框是这样的：

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

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

为了更好的想象力，我将解释一个用例。在对话框中，我得到一个确定的数字（´int i = 2`）。在用户界面中，有一个创建选项卡的方法。我想要尽可能多的标签。因此，我需要在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是我从对话框中获得的属性。

答案

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

@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();