Разработка интерфейсов для мобильных устройств в среде 1С:Предприятие требует особого подхода, так как стандартные механизмы компоновки элементов (потоковая модель) существенно отличаются от классических десктопных приложений. Часто перед разработчиком встает задача создать аналог Floating Action Button (FAB) — круглой кнопки, которая «парит» над основным списком или формой в нижнем углу экрана. В этой статье мы подробно разберем, как реализовать такую кнопку, используя стандартные средства платформы и расширенные возможности Поля HTML-документа.
Начнем с классического способа, который обсуждался участниками форума. Основная проблема 1С заключается в том, что элементы интерфейса выстраиваются друг за другом. Чтобы «прижать» кнопку к правому нижнему углу, нам необходимо использовать пустые элементы-распорки.
Проанализируем шаги по настройке формы:
Обычная группа. В свойствах группы укажем Группировка — «Вертикальная» или «Горизонтальная» в зависимости от структуры. Очень важно установить свойство Отображение в значение «Нет», чтобы скрыть границы группы.Декорация - надпись. У этой декорации свойство РастягиватьПоВертикали должно быть установлено в значение Истина, а текст должен быть пустым. Это «вытолкнет» все, что находится ниже, к нижнему краю экрана.РастягиватьПоГоризонтали, а справа разместим нашу кнопку. Таким образом, кнопка всегда будет прижата к правому краю.Вид значение «Гиперссылка» или выберем Отображение — «Картинка». В качестве картинки лучше использовать PNG с прозрачным фоном.Важное ограничение: Этот метод позволяет зафиксировать кнопку внизу экрана, но она все равно будет занимать физическое место в структуре формы. Если у вас на форме расположен динамический список, кнопка будет находиться под списком, а не поверх него.
Если задача стоит именно в наложении (перекрытии) элементов, когда кнопка должна визуально находиться над таблицей или списком, стандартных групп будет недостаточно. Здесь на помощь приходит Поле HTML-документа. Этот метод позволяет обойти ограничения потоковой компоновки 1С.
Рассмотрим алгоритм реализации:
Строка (неограниченной длины) и вынесем его на форму как Поле HTML-документа.ПриСозданииНаСервере или ПриОткрытии сформируем HTML-код кнопки с использованием CSS-позиционирования fixed.Проанализируем пример кода для инициализации такой кнопки:
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
ТекстHTML =
"<html>
|<head>
|<style>
| .fab {
| position: fixed;
| bottom: 20px;
| right: 20px;
| width: 56px;
| height: 56px;
| background-color: #ff4081;
| border-radius: 50%;
| box-shadow: 0 4px 8px rgba(0,0,0,0.3);
| display: flex;
| align-items: center;
| justify-content: center;
| color: white;
| font-size: 24px;
| cursor: pointer;
| z-index: 999;
| }
|</style>
|</head>
|<body>
| <div class='fab' onclick='fire1CEvent()'>+</div>
| <script>
| function fire1CEvent() {
| // Передача события обратно в 1С
| window.location.href = 'v8action:ClickFAB';
| }
| </script>
|</body>
|</html>";
КонецПроцедуры
Для обработки нажатия в 1С необходимо использовать событие ПриНажатии (или ПриИзменении в зависимости от версии платформы) для поля HTML-документа. Мы можем перехватить изменение URL и выполнить нужную команду 1С.
Разберем ситуацию, когда нам не обязательно перекрывать контент, но нужно обеспечить быстрый доступ к действию. В мобильной платформе 1С предусмотрена системная командная панель, которая автоматически адаптируется под интерфейс устройства.
Выясним, как правильно настроить этот элемент:
ОсновныеДействияДобавить).Командная панель в дереве элементов формы.ТолькоВоВсехДействиях в значение Ложь.В современных версиях платформы 1С появились дополнительные возможности для тонкой настройки интерфейса мобильного клиента. Рассмотрим подробнее, что можно использовать:
Прозрачность и слои: Теперь разработчик может управлять свойством ЦветФона. Если установить прозрачный фон для группы, в которой находится кнопка (используя Цвет.ПустаяСсылка или специфические настройки стиля), можно добиться более эстетичного вида «плавающих» элементов.
Картинки из библиотеки: Для мобильных приложений 1С подготовила набор стандартных картинок, которые корректно масштабируются под разные разрешения экранов (Retina, OLED). Рекомендуется использовать именно их для обеспечения единообразия интерфейса.
Подводя итог, можно выделить следующие рекомендации по выбору метода:
Посмотрим на финальный совет по оформлению: всегда задавайте кнопке Имя и Подсказку. В мобильных приложениях при длительном нажатии на кнопку часто всплывает подсказка, что улучшает UX (User Experience) вашего продукта.