Разработка интерфейсов для мобильных устройств в среде 1С — это всегда компромисс между универсальностью и особенностями отображения на различных экранах. Часто разработчики сталкиваются с неприятной проблемой: на смартфонах форма выглядит отлично и растягивается на весь экран, но при запуске того же мобильного клиента на планшете вся форма сжимается к верхней части экрана, а снизу образуется огромное пустое серое поле. Из-за этого важные элементы управления (например, кнопки оплаты или завершения операции) улетают наверх, ломая всю эргономику приложения.
В этой статье мы подробно разберем, почему платформа 1С ведет себя подобным образом на планшетных компьютерах, проанализируем внутренние механизмы верстки мобильного клиента и рассмотрим пошаговые решения этой проблемы — от простых настроек в конфигураторе до программного управления интерфейсом.
Прежде чем переходить к настройкам, давайте разберем архитектурную причину такого поведения платформы 1С. Мобильный клиент на уровне ядра разделяет устройства на два типа: смартфона и планшеты. Это разделение базируется на физическом размере экрана и его разрешении.
На смартфонах площадь экрана сильно ограничена. Платформа понимает это и принудительно открывает любые формы в полноэкранном режиме, растягивая элементы по максимуму. На планшетах же пространства предостаточно. С точки зрения платформы 1С, показывать простую вспомогательную форму или форму документа на весь огромный экран планшета нецелесообразно. Поэтому она пытается отобразить ее в виде компактного всплывающего окна (по аналогии с модальным окном в настольной версии). Если высота элементов формы строго не задана и не настроена их эластичность, форма «схлопывается» кверху под действием сил гравитации компоновщика, оставляя под собой то самое серое нерабочее пространство.
Давайте рассмотрим детальные шаги и методы, которые помогут нам заставить форму занимать 100% высоты экрана на любом типе устройств.
Наиболее правильный и «чистый» способ решить проблему — скорректировать свойства элементов формы, чтобы компоновщик мобильного клиента мог корректно рассчитать доступную высоту. Разберем этот процесс по шагам.
Шаг 1. Настройка табличных частей (если они есть на форме).
Очень часто виновниками неправильного расчета высоты становятся динамические списки или табличные части. По умолчанию у них взведены флаги автоматического ограничения высоты, что мешает форме растягиваться. Выполните следующие действия:
АвтоМаксимальнаяВысотаВСтрокахТаблицы и снимите с него флажок (установите в значение Ложь).АвтоМаксимальнаяВысота для этой таблицы и отключите его.Шаг 2. Наведение порядка в группировках элементов.
Мобильный клиент 1С крайне чувствителен к структуре подчиненности элементов на форме. Если у вас на форме создано множество вложенных групп, и у некоторых из них группировка установлена в значение Авто, мобильный клиент может не справиться с расчетом высоты всей цепочки. Выясним, как это исправить:
Горизонтальная, либо строго Вертикальная. Избегайте использования автоматического режима группировки на мобильных формах.РастягиватьПоВертикали в значение Да (или в значение Авто, если родительский элемент уже растягивается).После проведения этих манипуляций платформа перестанет искусственно ограничивать высоту внутренних элементов, и форма заполнит экран планшета.
Для мобильных платформ в 1С реализован механизм адаптивной верстки, основанный на приоритетах элементов. Чтобы подсказать платформе, какие элементы на форме являются критически важными (например, кнопка «Принять оплату» или итоговое поле ввода), используется свойство ВажностьПриОтображении.
Рассмотрим, как его правильно настроить:
ВажностьПриОтображении.Высокая.Обычная или задайте Низкая.Благодаря этому мобильный клиент принудительно выделит максимальный приоритет по высоте для важной кнопки, растянет форму вниз и прижмет кнопку оплаты к нижнему краю экрана планшета.
Если ваша форма представляет собой основное рабочее место пользователя (например, АРМ кассира, терминал сбора данных для кладовщика или интерфейс курьера), лучшим решением будет полностью развернуть приложение в полноэкранный режим. В этом режиме скрываются стандартные панели навигации мобильного клиента, а рабочая область гарантированно занимает 100% экрана без каких-либо серых рамок.
Для реализации этого метода нам потребуется написать небольшой код в модуле управляемого приложения. Разберем этот пример по шагам:
Откройте модуль управляемого приложения и найдите (или создайте) предопределенную процедуру ПриНачалеРаботыСистемы. Вставьте в нее следующий код:
Процедура ПриНачалеРаботыСистемы()
#Если МобильныйКлиент Тогда
// Переводим интерфейс в режим полноэкранного рабочего места
Попытка
КлиентскоеПриложение.УстановитьРежимОсновногоОкна(РежимОсновногоОкнаКлиентскогоПриложения.ПолноэкранноеРабочееМесто);
Исключение
ЗаписьЖурналаРегистрации("ОшибкаИнтерфейса", УровеньЖурналаРегистрации.Ошибка,,, ОписаниеОшибки());
КонецПопытки;
#КонецЕсли;
КонецПроцедуры
Этот код проверяет, запущено ли приложение под мобильным клиентом, и директивно заставляет платформу использовать полноэкранный режим. Все формы, открываемые в рамках этого сеанса, будут автоматически разворачиваться на весь экран планшета, полностью ликвидируя серое поле.
Поведение формы на планшете также сильно зависит от настроек ее открытия. Если форма открывается как вспомогательная, платформа по умолчанию пытается сделать ее блокирующим окном. На планшетах это выглядит как «всплывающая карточка» с серым фоном вокруг.
Чтобы избежать этого, проанализируем настройки свойства РежимОткрытияОкна:
РежимОткрытияОкна.Авто или Блокировать весь интерфейс на значение Независимый.В независимом режиме форма будет открываться в полноценной вкладке мобильного клиента, что заставит платформу применить к ней стандартные правила полноэкранного отображения.
Даже когда форма растянута на весь экран, мобильная платформа 1С может добавлять тонкие горизонтальные серые линии между элементами или группами. Если они портят дизайн вашего мобильного приложения, можно применить одну хитрость верстки:
Объединенная в значение Истина.Объединенная в значение Ложь.Такой трюк с вложенностью и переопределением флага Объединенная на мобильных устройствах во многих случаях заставляет платформу отказаться от отрисовки автоматических серых разделителей между полями ввода и кнопками.
Используя предложенные методики по отдельности или в комплексе, вы сможете добиться идеального отображения интерфейса мобильного клиента 1С как на компактных экранах смартфонов, так и на широкоформатных экранах планшетов.