Using Threads to Update UI in Vaadin 14

Question

I created a thread (via a lambda expression) to fetch some data based on user input fields but when I try to click on dropdown menus while it is retrieving data I get the mini progress bar indicator. So is a new thread even being created? What am I doing wrong here?

Button doComputation = new Button("Get Results);
doComputation.addClickListener(event -> {
        UI ui = UI.getCurrent();
        new Thread(() -> {
             
             // Do some work
             ui.access(() -> layout.add(results);

        }).start();
});

UPDATE: RESOLVED! Unneccesary ui.access calls were made, which locked up resources. Thank you to all that commented and helped.

What is the actual problem? Is your layout not modified? Are you sure results has a sane value? Are there errors, logs, ...? — cfrick, Jun 14 '21 at 06:50
@cfrick the results are fine (no error logs) but while generating them, the input fields like comboboxes are unresponsive — samwatts, Jun 14 '21 at 16:22
@samwatts only when you make changes to a UI from another thread (and push them to the active session) should you call ui.access(). Any work being done in the background is just that - work. It does not entail accessing/updating the UI until something is being explicitly added (like a chart or Grid). — schaphekar, Jun 14 '21 at 17:13

score 2 · Accepted Answer · answered Jun 14 '21 at 04:28

2

The code looks correct to me (apart from the missing end parenthesis after ui.access). Is that the only ui.access call, and is that all you do inside it?

I made this example for reference, and the combo box stays responsive while the background task is running.

@Route
public class ThreadView extends VerticalLayout {

    public ThreadView() {
        Button runThreadButton = new Button("Start thread", e -> {
            UI ui = UI.getCurrent();
            new Thread(() -> {
                try {
                    Thread.sleep(5000);
                } catch (InterruptedException ex) {
                    ex.printStackTrace();
                }
                ui.access(() -> Notification.show("Completed"));
            }).start();
        });
        ComboBox<String> comboBox = new ComboBox<>("Items", "One", "Two", "Three");
        add(runThreadButton, comboBox);
    }
}

answered Jun 14 '21 at 04:28

Erik Lumme

5,202
13
27

1

so I do have multiple ui.access calls, and there are some other things I've added in the thread including data parsing and reading/writing to files. so everything works except the concurrency – samwatts Jun 14 '21 at 04:43
4

Two additional thoughts @samwatts: 1) Is the stuff _within_ `ui.access()` taking a lot of time? 2) Do the comboboxes access something that the computation (started by the button) might be blocking (i.e threads might be blocking on some other resource)? – Marc Englund Jun 14 '21 at 06:51
1

@samwatts Have you enabled `@Push`? – cfrick Jun 14 '21 at 06:52
@MarcEnglund depending on the input parameters a given data retrieval phase could take several minutes. your second suggestion to see if the thread is blocking resources is likely - although I have not yet pinpointed the exact step responsible – samwatts Jun 14 '21 at 16:20
3

@MarcEnglund you were indeed correct - I made an unnecessary ui.access() call which locked the resource I needed to proceed! – samwatts Jun 14 '21 at 16:54

score 1 · Answer 2 · answered Jun 14 '21 at 06:03

So is a new thread even being created?

You can verify that by adding a System.out.println("Thread started") and checking whether that message is printed, or by running your application in debug mode and setting a breakpoint on the part that you're interested in.

What am I doing wrong here?

The code that you showed looks fine. I would guess there's a problem outside the shown code, namely that you have forgotten that you also need to add the @Push annotation. Without that annotation, the server will have no way of directly sending messages to the client.

i have added the @Push annotation, and the outputs are being displayed correctly - however, while the computation is happening the input fields are unresponsive — samwatts, Jun 14 '21 at 16:17

Using Threads to Update UI in Vaadin 14

2 Answers2