Sending parameters to UI and updating UI with Java/Vaadin

Question

The intial situtation is as shown in the picture below. I have a main UI that creates a dialog. In this dialog some attributes are generated. I want to transfer the attributes to the main UI on button click and close the dialog afterwards. Then i want to refresh the UI, so that the UI gets updated with the new attributes/parameters.

Closing the dialog works like this:

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

But right now i have no clue how to transfer the attributes to the main UI and refresh it afterwards.

For better imagination i will explain a use case. In the dialog i get a certain number (´int i = 2`). In the UI there is a method that creates tabs. I want as many tabs as i says. So i need to declare i in the UI class in order to execute the method successfully.

Code that creates the tabs: Contructor (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()));

Method create tabs:

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 is the attribute that i get from the dialog.

If i just use `UI.getCurrent().navigate("");` the attributes are gone respectively not transferred to the UI. — , Oct 16 '19 at 06:24
Did you consider to just store the values in variables available in the scope of the parent component? That's how we normally do it. — Ben, Oct 16 '19 at 06:38
@Ben how do i store it in the parent component of the dialog? Can you give an example? — , Oct 16 '19 at 06:40
Have you checked this question ? [Vaadin (Flow): Navigating to destination with a shared object](https://stackoverflow.com/questions/54442697/vaadin-flow-navigating-to-destination-with-a-shared-object) You could pass info you need via VaadinSession or via navigation route. This seems like what you are looking for — anasmi, Oct 16 '19 at 06:44
Another way to go is to pass your view into the Dialog, so before closing the dialog you can then call `myView.setValuesFromDialog(amountOfTabs);`. No refreshing of the ui would be needed for this, and no navigation. — kscherrer, Oct 16 '19 at 07:00
@KasparScherrer I do not get what you mean. So i create the dialog in my MainView: `Dialog dialog = new Dialog(); dialog.add(new DialogView()); dialog.open();` In this DialogView my number of tabs gets defined, e.g. `int i = 3;` — , Oct 16 '19 at 07:17

kscherrer · Answer 1 · 2019-10-16T07:42:25.520

0

There are different ways how to do this. The way that I would (and actually do) solve this, is by passing the View into the Dialog, so the dialog can call a method of the view to update some value(s).

@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
    }
}

Edit: From your comment, I can see that you don't have a Component that extends Dialog directly, but instead you add another View as component of a new Dialog. That works as well. All you need to do in your case is

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

edited Oct 16 '19 at 07:42

answered Oct 16 '19 at 07:28

kscherrer

5,486
2
19
59

Thnak you, that seems to work. But how do i update the Main View, so that the method for creating the tabs gets executed again? – Oct 16 '19 at 08:01
I tried to reload the page by doing `this.getParent().get().getUI().get().getPage().reload();`, but the number of tabs was not updated – Oct 16 '19 at 08:08
This would fall into `TODO: update tabs accordingly` in `MyViewWithDialog::setTabsAmount`. I don't know how you implemented your tabs, and even if I knew this would break the scope of this question. But you obviously need to update or re-create your tabs, simply reloading a view will never magically change things. One thing is for sure, you won't need to reload the page. – kscherrer Oct 16 '19 at 08:12
So can you tell me what do i have to look for if i want to update vaadin components at a certain moment? – Oct 16 '19 at 10:28
I'm not sure I understand. You don't have to do anything, except update said component. The changes will immediately apply, and be displayed in the browser, as long as the changes are made within some kind of Event Listener. However if the change is made in a background Thread (**In your case, it isn't!**) then you would need to make the change within a `ui.access()` block and enable @Push mode. To illustrate my point, you can try changing the text of a `Label` in a button-clicklistener. You will see that this change is displayed instantly upon clicking the button. – kscherrer Oct 16 '19 at 10:45
What you probably should have asked (or wanted to ask), is how do you update the `Tabs` component specifically. This very much depends on how you built your Tabs and would be a great **new** question. – kscherrer Oct 16 '19 at 10:48
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/200945/discussion-between-nidaav-and-kaspar-scherrer). – Oct 16 '19 at 11:12
Exactly! i want to know how to update the tabs. Should i start a new question or can you answer it here? – Oct 16 '19 at 12:10
please start a new question, if [the explanation in the chat](https://chat.stackoverflow.com/rooms/200945/discussion-between-nidaav-and-kaspar-scherrer) is not sufficient. – kscherrer Oct 16 '19 at 12:16

Sending parameters to UI and updating UI with Java/Vaadin

1 Answers1