Как сделать так, чтобы компоненты Vaadin 10 менялись один за другим из события клика?

Question

По какой-то причине компоненты всегда меняются от нажатия кнопки одновременно.
Мне нужно изменить их один за другим. Вот пример:

countButton.addClickListener(buttonClickEvent -> {
    int input = Integer.parseInt(inputTextField.getValue());

    long factorialResult = countFactorial(input);
    resultFactorialLabel.setText("Factorial: " + factorialResult);

    //just for example, could be processing that takes really long
    try {
        sleep(1000);
    } catch (InterruptedException ignored) {
    }

    int fibonacciResult = countFibonacci(input);
    resultFibonacciLabel.setText("Fibonacci: " + fibonacciResult);
});

Когда я запускаю его - проходит 10 секунд, то resultFactorialLabel и resultFibonacciLabel изменяются одновременно, когда я хочу, чтобы resultFactorialLabel менялся, и после этого, через 10 секунд, resultFibonacciLabel изменяется. Как мне это сделать?
И как это сделать так, чтобы ярлыки менялись одновременно?

Vaadin версия: 10.0.1

Answer 1

Это обычный жизненный цикл:

• На клиентской стороне (в браузере) происходит событие, например, нажатие кнопки.
• Это делает HTTP-вызов на сервер (ваше приложение Vaadin).
• Vaadin обрабатывает вызов, вызывая событие на сервере, т.е. выполняет все зарегистрированные прослушиватели события, например, прослушиватель щелчка.
• В слушателе вы вносите некоторые изменения в компоненты (на стороне сервера), например, обновляете метку.
• После этого клиенту отправляется ответ, содержащий информацию обо всех измененных компонентах.
• Затем на стороне клиента HTML-код обновляется для отражения измененных компонентов.

Так что если вы делаете sleep в вашем слушателе, это просто задержит ответ клиенту.

Если вам нужно выполнить дорогостоящую операцию, вызываемую нажатием кнопки, вы должны сделать это в фоновом потоке и обновить пользовательский интерфейс после завершения операции. Смотрите документацию о том, как обновить пользовательский интерфейс из фонового потока.