Разработка мобильных приложений на платформе 1С позволяет невероятно быстро развернуть готовую бизнес-логику и связать её с базами данных на сервере. Однако стандартный интерфейс мобильного клиента или мобильной платформы часто выдает свое «происхождение». Желтые тона, характерные кнопки, выдвижное боковое меню (так называемая «шторка») и, главное, стартовая заставка с логотипом фирмы «1С» внизу экрана могут не соответствовать корпоративному стилю компании или требованиям заказчика к уникальности продукта.
В рамках этой статьи мы подробно разберем, как преодолеть стандартные ограничения мобильной платформы 1С. Мы научимся полностью скрывать логотип при запуске, убирать системное боковое меню без использования сомнительных «костылей», создавать потрясающие анимации с помощью гибридного интерфейса на HTML5/CSS3/JS, а также разберемся, как правильно настроить отладку мобильного приложения, избегая проблем с модальностью.
При стандартной сборке мобильного приложения через штатный инструмент «Сборщик мобильных приложений» разработчик может указать собственные сплэш-скрины (заставки). Однако платформа накладывает жесткое ограничение: в нижней части экрана (около 10% высоты в портретном режиме и 15% в ландшафтном) поверх вашей картинки все равно выводится неудаляемый серый блок с копирайтом и логотипом «1С».
Выясним, какими путями можно решить эту задачу, начиная от штатной замены иконок и заканчивая радикальной модификацией готового пакета.
Штатная замена графических ресурсов через Сборщик
Для того чтобы как минимум заменить иконки приложения во всех системных диалогах мобильной операционной системы, нам потребуется подготовить специальный ZIP-архив графических ресурсов. В Сборщике мобильных приложений этот архив загружается в поле «Графические ресурсы». Мы должны строго соблюдать структуру каталогов внутри архива:
Android должна содержать подкаталоги для различных разрешений (например, drawable-mdpi, drawable-hdpi, drawable-xhdpi и т.д.), в которых располагаются файлы icon.png. Также для современных версий Android крайне рекомендуется использовать адаптивные иконки, разделенные на фоновый и передний слои в формате XML.iOS должна содержать иконки всех требуемых Apple разрешений (от 29х29 до 1024х1024 пикселей) с жестко заданными именами файлов, описанными в документации к сборщику.Радикальный метод удаления копирайта 1С (Модификация APK)
Если перед нами стоит задача сделать приложение абсолютно бесшовным (White Label), чтобы конечный пользователь даже не догадывался, что внутри работает среда исполнения 1С, стандартных средств сборщика не хватит. Единственный технически возможный способ полностью убрать нижнюю плашку «1С» при старте — это прямая модификация скомпилированного пакета приложения. Рассмотрим этот процесс по шагам:
.apk с помощью специализированных утилит, например, apktool.assets/logo/ или заглянуть в системные ресурсы res/drawable/. Именно там лежат скомпилированные платформой изображения стартовых экранов.res/values/strings.xml, если там присутствуют нежелательные текстовые упоминания платформы.Важное примечание: Подобная декомпиляция и модификация бинарных файлов платформы может нарушать условия лицензионного соглашения с фирмой «1С». Используйте данный метод исключительно в ознакомительных целях или для внутреннего тестирования внутри компании.
Начиная работу с мобильной платформой, разработчики часто сталкиваются с проблемой: по умолчанию в приложении всегда доступна левая «шторка» — системное меню навигации. Если мы хотим построить собственный интерфейс, это меню ломает всю логику дизайна. В обсуждениях на форумах часто предлагают «костыльное» решение: открывать формы модально или использовать свойство формы РежимОткрытияОкна в значении БлокироватьВесьИнтерфейс.
Давайте проанализируем, почему это плохой путь. Использование модальных окон блокирует отладку кода (особенно на старых релизах платформы) и ломает современную асинхронную модель разработки 1С. Режим блокировки всего интерфейса также накладывает ограничения на поведение дочерних окон.
К счастью, в современной платформе 1С существует красивое, полностью штатное решение этой проблемы с помощью управления режимами основного окна.
Рассмотрим, как это реализовать программно. Нам потребуется обратиться к глобальному контексту клиентского приложения в модуле управляемого приложения. Переключение режима нужно выполнять исключительно при старте системы — в обработчике ПередНачаломРаботыСистемы.
Посмотрим на пример кода, который полностью убирает все стандартные панели 1С:
Процедура ПередНачаломРаботыСистемы(Отказ)
#Если МобильноеПриложениеКлиент Тогда
// Переключаем интерфейс в режим "Рабочее место"
// Этот режим скрывает панель разделов, боковое меню и панели навигации
КлиентскоеПриложение.УстановитьРежимОсновногоОкна(РежимОсновногоОкнаКлиентскогоПриложения.РабочееМесто);
#КонецЕсли
КонецПроцедуры
Если нам требуется еще более жесткий контроль над интерфейсом, мы можем использовать режим киоска. Разберем разницу между этими режимами:
Применим режим киоска в коде:
Процедура ПередНачаломРаботыСистемы(Отказ)
#Если МобильноеПриложениеКлиент Тогда
// Включаем полноэкранный режим киоска
КлиентскоеПриложение.УстановитьРежимОсновногоОкна(РежимОсновногоОкнаКлиентскогоПриложения.Киоск);
#КонецЕсли
КонецПроцедуры
Стандартные элементы управления мобильной платформы 1С (кнопки, списки, поля ввода) выглядят довольно утилитарно и не поддерживают сложные визуальные эффекты. Если перед нами стоит задача сделать плавные анимации переходов, красивые круглые кнопки с эффектом пульсации или интерактивные графики, стандартных средств платформы нам не хватит.
Решением является гибридный подход: весь интерфейс приложения (или его ключевые экраны) создается на HTML5, CSS3 и JavaScript, а бизнес-логика и хранение данных остаются на стороне 1С.
Как устроен гибридный интерфейс
Мы создаем обычную форму 1С, на которую добавляем единственный элемент — поле HTML-документа. Растягиваем его на всю доступную площадь формы. В это поле мы программно загружаем HTML-код, содержащий ссылки на локальные CSS-стили и JavaScript-сценарии. Так как внутри мобильной платформы 1С работает полноценный движок WebKit (на Android и iOS), мы получаем в свое распоряжение современный браузерный стек технологий.
Реализация плавных анимаций
Поскольку мы работаем внутри веб-контекста, нам доступны любые современные методы анимации интерфейса:
lottie-web. Это позволяет добавлять в приложение невероятно красивые стартовые анимации или интерактивных персонажей-помощников.Hammer.js, мы сможем перехватывать любые тач-события и мгновенно реагировать на них.Организация связи между HTML/JS и 1С
Один из ключевых вопросов: как передать команду из веб-интерфейса обратно в код 1С? Например, пользователь нажал на анимированную HTML-кнопку «Оформить заказ». Как запустить проведение документа в 1С?
Разберем, как устроен этот мост (Bridge) обмена данными. При клике на элемент в HTML мы вызываем JavaScript-функцию, которая меняет адрес страницы или генерирует специальное событие. Мы используем схему протокола v8://, которую платформа 1С перехватывает автоматически.
Посмотрим на пример JavaScript-кода на нашей веб-странице:
function sendDataTo1C(actionName, payload) {
// Формируем специальный URL с параметрами
var url = "v8://custom-action?action=" + encodeURIComponent(actionName) + "&data=" + encodeURIComponent(payload);
// Осуществляем переход, который будет перехвачен платформой 1С
window.location.href = url;
}
Теперь рассмотрим, как перехватить это событие на стороне встроенного языка 1С. В свойствах элемента формы «Поле HTML-документа» (допустим, мы назвали его ПолеИнтерфейса) создаем обработчик события ПриНажатии (или ПриИзмененииСодержимого в зависимости от задач):
&НаКлиенте
Процедура ПолеИнтерфейсаПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
// Получаем URL, к которому обратился JavaScript
АдресПерехода = ДанныеСобытия.Url;
// Проверяем, наш ли это протокол
Если Найти(АдресПерехода, "v8://custom-action") > 0 Тогда
// Отменяем стандартный переход браузера по ссылке
СтандартнаяОбработка = Ложь;
// Разбираем параметры запроса
ПараметрыЗапроса = РазобратьURL(АдресПерехода);
ИмяДействия = ПараметрыЗапроса.Получить("action");
ПереданныеДанные = ПараметрыЗапроса.Получить("data");
// Выполняем соответствующую бизнес-логику в 1С
Если ИмяДействия = "create_order" Тогда
ВыполнитьСозданиеЗаказаНаСервере(ПереданныеДанные);
КонецЕсли;
КонецЕсли;
КонецПроцедуры
Благодаря такому подходу, скорость отклика интерфейса возрастает в разы. В веб-компонентах отсутствуют микрозадержки при кликах (click delay), которые иногда заметны на стандартных мобильных формах 1С (особенно в среде iOS).
В процессе обсуждения кастомизации интерфейса мобильного приложения разработчики часто сталкиваются со следующей проблемой: при открытии форм в модальном режиме (чтобы перекрыть стандартное меню) полностью перестает работать отладка кода. Мобильное приложение не останавливается на точках останова в конфигураторе на ПК.
Давайте выясним причину этого поведения и найдем правильное современное решение.
Использование модальности в платформе 1С уже много лет считается устаревшим подходом (deprecated). В мобильной платформе модальные окна могут приводить к непредсказуемому поведению операционной системы, зависанию потоков отрисовки интерфейса и полной блокировке сетевых сокетов, через которые конфигуратор общается с отладочным клиентом на смартфоне.
Для того чтобы интерфейс вашего приложения оставался отзывчивым, а отладка работала корректно, необходимо:
ОткрытьФормуМодально).РежимИспользованияМодальности в значение Не использовать.ПоказатьВопрос, ПоказатьВводЧисла, ПоказатьВводДаты.РежимОткрытияОкна со значением БлокироватьОкноВладельца или БлокироватьВесьИнтерфейс.При соблюдении этих правил отладка мобильного приложения по протоколу HTTP или TCP/IP будет работать стабильно, позволяя вам без проблем отслеживать состояние переменных даже внутри сложных обработчиков гибридного HTML-интерфейса.