Блокировка UI до загрузки экрана

Вопросы и проблемы
#1

Добрый день.

Подскажите, пожалуйста, есть ли в Cuba возможность блокировать UI до окончания загрузки экрана?

Допустим, я нажимаю на какой-то элемент экрана, происходит взаимодействие фронта и бека, которое занимает какое-то время; в этот момент на экране сверху грузится полоса загрузки. Если в этот момент я нажму на какой-то элемент формы или меню (или на несколько), то после того, как пройдет первая загрузка, приложение попытается отобразить результаты моих нажатий.

Можно ли сделать так, чтобы в процессе загрузки нажатия на UI никак не обрабатывались? Или чтобы экран становился “серым” в момент загрузки, и не давал не на что нажать?
Цель - исключить лишние нажатия, пока не загрузится то, что вызвано первым кликом пользователя.

#2

Посмотрите на этот пример. Такую функциональность можно получить, переопределяя поведение основного приложения, посмотрите на класс CustomAppUI и соответствующий раздел документации. Для красивого индикатора были переопределены стили, посмотрите на файл modules/web/themes/helium/com.company.demo/helium-ext.scss. .

#3

Добрый день!

Ознакомлюсь, о результате напишу.
Спасибо!

#4

Попробовал переопределить класс таким образом, как в примере.
В код дебаггер в код проваливается, но разницы я не заметил…

#5

А пример-то запускали? Работает?

#6

Запустил ваше приложение.

Отчасти в нем реализовано то - что нам нужно:
Например, когда я открываю окна экранов Users и Roles одновременно один за другим (в меню) открывается только первый экран (крутится колесо, в момент чего все другие нажатия игнорируются).

В окне самого экрана (Roles, например) я могу переключатся между записями одна за другой, и переключение в любом случае произойдет, даже если я переключился на запись в момент загрузки другой записи (то есть я жму на запись А, она начинает грузится, в этот момент я жму на запись Б и С, и после загрузки записи А у меня открывается запись С). Мне нужно, чтобы Б и С не открывалась.

#7

Ну, вы спрашивали про загрузку экрана изначально, в примере она сделана. Про переход по записям ничего не было сказано :slight_smile: Что касается перехода по записям, то нужно посмотреть, что можно сделать. А можно видео (или gif), который показывает такой быстрый переход по записям?

#8

С открытием экрана все ок, нас устраивает! Теперь мне нужно понять, что именно из переопределенного за это отвечает.

По поводу переключения записей вероятно не до конца донес.
Приложил гиф. В момент загрузки и листать могу, и Edit нажимаю

#9

ezgif.com-gif-maker

#10 
        getLoadingIndicatorConfiguration().setFirstDelay(0);

Ровно вот это. Это Vaadin’овский API. Из CUBA API мы не можем очень сильно влиять на поведение UI при загрузке данных. По идее, эти состояния должны проявляться, чтобы предупредить пользователя, что UI может делать не совсем то, что ожидается, поскольку идет запрос а сервер. Для этого как раз там выставлены таймауты. Но, как я понимаю, это работает только с экранами, а не с элементами, поэтому могут быть такие спецэффекты.

#11

В своем локальном проекте я переопределил класс AppUi и добавил getLoadingIndicatorConfiguration().setFirstDelay(0); в метод init(), но это не помогло даже на уровне открытия экранов…(

То есть для работы с элементами этого эффекта добиться невозможно, верно понимаю?

#12

Ответ выше.

#13

Нужно в web-spring.xml добавить строчку

    <bean id="cuba_AppUI" class="com.company.demo.web.CustomAppUI" scope="prototype"/>

Для работы с элементами блокировки экрана добиться можно, но пока непонятно, какой ценой. Скорее всего, быстро и просто не получится, мы над этим не работали, когда адаптировали Vaadin.

#14

В web-spring.xml тоже вносил.
Еще раз проверю и гиф запишу

#15

Добрый день!

Дебагер проваливается в переопределенный код, с этим проблем нет.
Но когда я нажимаю на элементы меню, экраны открываются всегда, даже если сейчас идет загрузка.

bandicam 2020-10-21 12-29-28-217

Давайте тогда попробуем с вашим рабочим кейсом разобраться. подскажите, пожалуйста, что у нас может быть не так?
В web-screens у нас указано переопределение (45)
image

Так выглядит переопределенный класс:
image

#16

Добрый день.

А попробуйте ещё применить те же стили, там есть интересный момент:

    pointer-events: unset !important

Похоже, что это тоже играет свою роль, только на уровне браузера, чтобы он локально не реагировал на ваши действия.

#17

Добрый день!
Спасибо, позже попробую и сообщу о результате.

#18

Да, получилось, спасибо!
Закрываем тему

1 симпатия
#19

Отлично! Я рад, что все хорошо закончилось :slight_smile:

1 симпатия