Глава 3. Отображение. Компоновка виджетов. Асинхронное взаимодействие

После того как мы создали в контексте нужные свойства, перейдём к настройке отображения. В данной главе разберём, как располагать компоненты на форме, почему важно их группировать и какие есть способы добиться лучшей производительности виджетов.

Для начала рассмотрим, как взаимодействуют контекст и отображение:



Взаимодействие с данными на форме приложения происходит через контекст. Работа с данными на форме реактивна: при изменении контекста отображение автоматически обновляется.

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

Кроме редактирования значений вручную, источником изменения могут быть сценарии, процессы и API. Суть проста: изменился контекст — обновится отображение.

Компоновка виджетов

Как говорилось выше, виджет — это минимальный рабочий компонент для построения интерфейсов. Из виджетов можно собирать формы, карточки приложений и задач, а также другие виджеты.

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

Рассмотрим базовые правила компоновки виджетов:

• Группируйте связные элементы.
• Держите во внимании пользователя 5±2 элемента одновременно.

Реализовать данные правила помогут два стандартных виджета системы — Вкладки и Панель с заголовком. С их помощью можно разделять отображаемые данные.

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

Например, по умолчанию форма создания приложения Кредитная заявка выглядит следующим образом:



Сейчас все поля приложения перечислены как один длинный список. Можно улучшить интерфейс, объединив их в логические группы. Например, на данной форме часть полей относится к кредиту, другая часть — к самому клиенту. Почти всегда можно найти способы разделить поля на группы.

Откроем форму в дизайнере интерфейсов. Сгруппируем поля на форме с помощью панелей и сделаем их расположение более удобным, используя колонки. Форма будет выглядеть следующим образом:



Теперь информация считывается легче, так как на форме есть четыре большие группы, и в каждой из них не более семи полей.

Можно применить и другой подход — использовать вкладки. В этом случае содержимое нескольких групп уже нельзя увидеть на одном экране. Однако интерфейс получается чистый и не перегружает пользователя обилием информации.

Форма приложения Кредитная заявка с использованием вкладок выглядит следующим образом:



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

Асинхронное взаимодействие

Помимо способности организовывать пространство, у вкладок и панелей есть ещё одна важная опция — возможность загружать содержимое асинхронно.



Если данная опция включена в настройках виджета, то при загрузке формы его отрисовка будет отложена до тех пор, пока не загрузятся все остальные виджеты. Загрузка формы происходит следующим образом: сначала считывается вся структура и все вложенности, затем начинаются загружаться виджеты, происходит подготовка данных и формирование разметки, после этого готовая разметка встраивается в нужное место формы. Во время выполнения этих операций пользователь видит лоадер (скелетон).

Как только заканчивается загрузка всех виджетов, которые не отмечены флажком Загружать содержимое асинхронно, пользователь видит форму.

Затем загружаются асинхронные виджеты. По мере их загрузки форма обогащается информацией: данные виджетов автоматически появляются в разметке.

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

Рекомендации по настройке асинхронного отображения:

1. Выделите топ-5 самых важных и необходимых свойств из контекста.
2. Вынесите их на первую вкладку или панель.
3. Разделите остальную информацию на логические группы.
4. Если используются вкладки, то для всех, кроме первой, поставьте в настройках флажок Загружать содержимое при активации вкладки.

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

Про загрузку данных рассказано в главе «Сценарии».