Мобильный HTML-интерфейс, взгляд изнутри

28.12.20

Разработка - Работа с интерфейсом

Для реализации красивого интерфейса в мобильном приложении 1С удобно использовать возможности стека HTML / CSS / JavaScript. О том, как построить отзывчивый HTML-интерфейс с перехватом событий и выполнением JavaScript-кода в поле HTML-документа на форме 1С, рассказал сотрудник отдела мобильной разработки в компании «1С-Рарус» Роман Сухоруков.

Меня зовут Сухоруков Роман, я сотрудник отдела мобильной разработки в компании «1С-Рарус».

 

 

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

  • На сегодняшний момент наши приложения имеют более 5 000 активных платных подписок в App Store и Google Play.

  • Наши приложения установили более 3 000 000 пользователей.

  • 25 000 из них поставили нам оценку ~ средний бал 4.5 (достаточно неплохой показатель)

  • В разное время наши приложения входили в Топ 10 в 88 странах мира в своих категориях.

 

 

Это наши продукты:

  • Приложение Boss – для автоматизации малого и среднего бизнеса;

  • Fitness – приложение для занятий спортом в зале и дома;

  • Приложение Budget – помощник учета личных финансов;

  • Приложение Diets – поможет составить/ подобрать оптимальную диету по запросам пользователя.

 

Мобильные интерфейсы с использованием HTML/CSS/JavaScript

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

B своих решениях мы чаще всего используем интерфейсы на стеке HTML / CSS / JavaScript. Применение этого стека технологий дает нам большие возможности, и в принципе наши интерфейсы могут в какой-то степени даже конкурировать с интерфейсами нативных приложений.

 

 

Пример формы из приложения Fitness – это форма выполнения тренировки.

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

  • А справа можно увидеть, как нам удалось её улучшить с помощью HTML.

Я думаю, разница очевидна – форма стала более красивой, более удобной, интерактивной и, в принципе, смотрится намного живее.

 

Календарь в мобильном приложении 1С

 

 

Сегодня я хотел бы поделиться некоторыми нашими наработками в этой области на примере вот такой формы календаря для мобильного приложения на 1С.

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

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

Рассмотрим ее логику работы:

  • у нас есть динамический список месяцев, который в один момент времени хранит данные за 6 месяцев (три месяца, которые мы видим на экране и 3 месяца, выходящие за пределы экрана);

  • все остальные данные подгружаются по мере необходимости – во время прокрутки пользователем динамический список генерирует события, которые мы перехватываем на форме 1С, и в ответ отправляем скрипту на JavaScript необходимые ему данные (например, данные за следующий месяц).

 

 

Так структурно выглядит форма календаря в JavaScript:

  • у нас есть базовый класс View, который отвечает за отрисовку всех элементов на экране;

  • от него наследуются три класса – Calendar, Month, Task.

 

 

Класс Calendar, собственно говоря, реализует механизм динамического списка – при прокрутке по достижении предельного положения генерируется событие «MonthRequest», которое передает на форму 1С дату месяца, данные которого нам необходимо получить.

 

 

Класс Month может быть в двух режимах работы:

  • закрытый режим, когда пользователь видит перед собой месяц полностью;

  • и режим списка задач за день.

В момент нажатия на любую дату месяца на форме 1С генерируется событие «GetTasks», по которому мы передаем список задач на эту дату. Впоследствии представление месяца разворачивается на весь экран и становится списком задач.

Класс Task – это представление задачи, которое содержит ссылку 1С на элемент справочника «Задачи» и дату для отображения в списке.

 

Механизм взаимодействия

 

 

Чтобы реализовать такую логику, нам необходимо иметь возможность отправлять на HTML-форму данные (большие данные, не только примитивы) и получать обратную связь от формы в виде событий. Этим в форме календаря как раз и занимается подсистема конвертации.

Основное назначение подсистемы конвертации – это:

  • запуск кода JavaScript и получение переданных параметров из кода 1С;

  • и генерация событий на форме 1С.

 

 

Подсистема конвертации использует для этого два полезных события поля HTML-документа – это:

  • «ДокументСформирован» – событие, которое возникает, когда у нас в память полностью загружены структура HTML-документа и все скрипты, и мы можем обращаться к JavaScript-коду из кода 1С. Мы используем это событие для инициализации формы и её заполнения данными.

  • «ПриНажатии» – событие, которое возникает перед началом перехода по ссылке в поле HTML-документа, в него мы будем получать все события, которые генерируют HTML-интерфейс.

 

Выполнение JavaScript-кода из 1С

 

 

Чтобы передать какие-то значения, запустить JavaScript-код из кода 1С, нам необходимо воспользоваться свойством поля HTML-документа defaultView.

Свойство defaultView становится доступным на клиенте, когда документ полностью сформирован и загружен в память (после события «ДокументСформирован»).

Свойство defaultView соответствует объекту window в JavaScript и, по сути, является глобальным контекстом нашего скрипта.

 

 

Строго говоря, с помощью свойства defaultView мы можем напрямую из кода 1С вызвать любую функцию JavaScript. Но передавать в качестве параметров и получать в результате можем только примитивы – такие, как Число, Булево или Строка.

Но поскольку нам этого мало, мы путем сериализации в JSON передаем все, что угодно – для этого используется подсистема конвертации.

 

Организация обмена данными с полем HTML-документа

 

 

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

Казалось бы, мы получаем строку, которую уже можно передать и выполнить на стороне JavaScript. Но на самом деле, это не так – мобильная платформа может передавать не все строки. Если в строке присутствуют фигурные скобки, переносы строк, какие-то непечатаемые символы, то она будет проигнорирована и функции JavaScript будет передано пустое значение, как будто мы вообще ничего не передавали. Поэтому дополнительно мы строку JSON кодируем еще в URL.

И на стороне JavaScript это преобразуется обратно – средствами подсистемы конвертации выполняются обратные преобразования и создаются необходимые нам сущности для работы на форме.

 

 

Таким образом мы можем передавать не только примитивы, но и практически любые данные – структуры, массивы, даты, ссылки на справочники и документы.

Например, в форме календаря ссылка на справочник «Задачи» передается в объект TaskRef, который содержит в себе идентификатор и представление ссылки. Получается, что мы с таким объектом можем практически работать так, как если бы мы работали из кода 1С на клиенте со ссылкой.

 

Генерация события из кода JavaScript

 

 

Теперь о получении событий. Как я уже говорил, все события мы получаем в обработчике «ПриНажатии», который срабатывает перед началом перехода по гиперссылке.

 

 

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

В этом нам поможет объект location, а точнее, его метод assign, куда мы передаем URL перехода – только в нашем случае это будет не просто URL, а сериализованное в JSON и кодированное в URL описание случившегося события.

На формуле календаря это выглядит примерно так:

  • мы вызываем метод assign, которому передаем сериализованную структуру с полями name и parameter – поле name содержит имя события, которое необходимо запустить на форме 1С, а поле parameter содержит передаваемый параметр;

  • плюс ко всему перед сериализованной строкой добавляем URL-схему и домен – это необходимая деталь, потому что без домена событие «ПриНажатии» может быть просто проигнорировано платформой.

На слайде показана строка, которая генерируется при получении от динамического списка календаря запроса события «MonthRequest» для вывода следующего месяца.

 

Получение данных события и их обработка

 

 

Строку с событием мы получаем в процедуре «ПриНажатии» в свойстве Href переданного параметра «ДанныеСобытия».

 

 

Вот так выглядит значение свойства href при получении данных от JavaScript-события – в данном случае, мы от динамического списка календаря в подсистему конвертации получили запрос события «MonthRequest», которое должно вывести данные за следующий месяц, и в качестве параметра передана дата 01.06.2020.

Как вы видите, здесь это значение уже автоматически декодировано из URL-формата, то есть нам достаточно только десериализовать и восстановить объектные значения.

 

 

На слайде показано, как выглядит обработчик оповещения формы календаря – здесь мы обрабатываем все события.

На основании структуры, которая передается в событии «ПриНажатии», мы запускаем процедуру «Оповестить» и оповещаем все обработчики оповещений 1С о случившемся событии – передаем имя события и параметр.

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

При клике на определенный месяц календаря возникает событие «GetTasks», чтобы его обработать, мы передаем список задач методу «showTasks».

 

Преимущества использования web-стека

 

 

Формы web-стека дают нам дополнительные возможности, такие как:

  • возможность детально проработать любой пиксель на экране, любой отступ, генерировать анимацию каждого элемента;

  • мы можем обрабатывать touch-события – любой жест пользователя, свайп, движение одним-двумя-тремя пальцами тоже можно перехватить на форме и создать функциональный отзывчивый интерфейс;

  • это работает быстрее, чем форма 1С – например, в системе Android нажатия по ссылкам проходят без задержки. В iOS же при каждом клике генерируется задержка порядка полсекунды, в этот момент отрабатывает встроенная анимация нажатия Safari;

  • есть огромное количество готового кода, уже адаптированного под мобильные экраны – можно использовать любой фреймворк, который существует на JavaScript, мы в форме календаря для создания анимаций используем jQuery.

Как я и обещал, ссылка на исходный код календаря – кому интересно, можете посмотреть.

 

*************

Данная статья написана по итогам доклада (видео), прочитанного на INFOSTART MEETUP Krasnodar.

 

30 мая - 1 июня 2024 года состоится конференция Анализ & Управление в ИТ-проектах, на которой прозвучит 130+ докладов.

Темы конференции:

  • Программная инженерия.
  • Инструментарий аналитика.
  • Решения 1С: архитектура, учет и кейсы автоматизации на 1С.
  • Управление проектом.
  • Управление продуктом.
  • Soft skills, управление командой проекта.

Конференция для аналитиков и руководителей проектов, а также других специалистов из мира 1С, которые занимаются системным и бизнес-анализом, работают с требованиями, управляют проектами и продуктами!

Подробнее о конференции.

 


См. также

"Штрихкод-информер" - мобильный ТСД и прайс-чекер в смартфоне

Мобильная разработка Сканер штрих-кода Терминал сбора данных Управляемые формы Мобильная платформа 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Управленческий учет Платные (руб)

Сбор заказов, инвентаризация, проверка ценников, просмотр полной информации об остатках и ценах со смартфона Онлайн. Отправка данных со смартфона выполняется либо напрямую в открытую форму документа, отсканировав QR-код, либо в общую корзину учетной системы, не подходя к компьютеру. Кассир или оператор сможет просмотреть список присланных данных и загрузить в любую форму, поддерживающую работу с ТСД. Для работы с мобильным приложением требуется опубликовать HTTP-сервис из поставляемого расширения.

2880 руб.

03.12.2018    55823    166    102    

163

SALE! 25%

Что нам стоит бота построить? Нарисуем - будет жить! Графический конструктор телеграм-ботов/Telegram

Мобильная разработка Мессенджеры и боты Платформа 1С v8.3 Платные (руб)

Теперь создать telegram-бота - элементарно. Достаточно просто нарисовать блок-схему телеграм-бота, и он сразу заработает. Это возможно при использовании Графического конструктора телеграм-ботов. Это единственный конструктор ботов для telegram, чье качество и функционал подтверждены фирмой 1С, есть сертификат 1С:Совместимо. Расширение в интерактивном режиме, с помощью блок-схем, позволяет с минимальными трудозатратами создать телеграм-ботов в любой конфигурации, работающей на платформе «1С:Предприятие 8.3».

13200 9900 руб.

27.12.2021    34524    87    161    

183

Программа "Мобильный ТСД сканер для 1С" - приложение для телефона для инвентаризации и сбора штрихкодов для iOS и Android

Сканер штрих-кода Терминал сбора данных Мобильная разработка Монитор заказов Оптовая торговля Розничная торговля Ценообразование, анализ цен Платформа 1С v8.3 Мобильная платформа 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Розничная и сетевая торговля (FMCG) Оптовая торговля, дистрибуция, логистика Управленческий учет Платные (руб)

Простой мобильный ТСД (терминал сбора данных) сканер для 1С для смартфонов на iOS и Android, не требующий сложных настроек и установки дополнительных программ. Обмен между Вашей 1С и мобильным приложением осуществляется через облачный сервис и расширение конфигурации. Работает с конфигурациями УТ 11, ERP, КА2, Розница 2, Розница 3, УНФ 1.6, УНФ 3.0. Полнофункциональный демо-доступ для своей конфигурации можно запросить в настройках мобильного приложения - все необходимое придет на почту автоматически.

2000 руб.

22.04.2019    93024    532    186    

302

Склад 15 ВЕЩЕВОЙ - автоматизация складов с маркированным товаром

Логистика, склад и ТМЦ Мобильная разработка Платформа 1С v8.3 1С:Управление торговлей 10 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 Россия Платные (руб)

Программное обеспечение для автоматизации складских операций со встроенными функциями работы с маркированной продукцией. Предназначено для автоматизации всех товароучетных операций на складах, обычных и адресного хранения. «Склад 15 ВЕЩЕВОЙ» объединил в себе несколько товарных групп маркированного товара (ОБУВЬ, ОДЕЖДА, ШИНЫ, ПАРФЮМ, БАДы, ЮВЕЛИРНЫЕ ИЗДЕЛИЯ), которые чаще всего встречаются в складской логистике вместе.

33550 руб.

02.06.2023    3142    2    0    

0

Магазин 15 - приемка товара по штрихкодам или инвентаризация в торговом зале

Логистика, склад и ТМЦ Мобильная разработка Платформа 1С v8.3 1С:Комплексная автоматизация 1.х 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 1С:Розница 3.0 Розничная и сетевая торговля (FMCG) Россия Платные (руб)

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

12950 руб.

30.05.2023    3551    2    0    

4

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    62236    43    59    

81

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    17071    23    4    

36
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. Tahallus 440 28.12.20 20:24 Сейчас в теме
Если весь интерфейс на HTML то зачем тогда брать мобильную платформу 1С(кроме политических)?
Есть react native и flutter которые куда гибче чем 1С.
Может быть есть у Вас какое-то сравнение данных платформ чтобы понимать в чем экономический смысл взять мобильную платформы 1С для таких типов приложений.
Оставим за скобками реализацию внутренних приложений для компаний, где UI в основном на последнем месте.
acvatoris; privin731; FesenkoA; ltfriend; bashinsky; +5 Ответить
2. TitanLuchs 399 30.12.20 10:37 Сейчас в теме
(1) Бывают случаи, когда реализация на мобильной платформе 1С - это одно из условий. Обычно это заказы через тендеры, где все регламентировано вышестоящими организациями. Вот там важно, чтобы основа была на МП, а то, что внутри все на html и js - это уже не проблема.
3. Tahallus 440 30.12.20 12:19 Сейчас в теме
(2) это я понимаю, из-за этого и написал что оставим за скобками реализацию для внутреннего использования.
Но такие приложения как fitness или Diets который изначально ЦА их была массовый клиент и при этом весь интерфейс сделан не на 1С, а на html, вот в данной реализации выбор не понятен ну кроме как политических что мы пиарим 1С в угоду удобству и практичности.
acvatoris; FesenkoA; Daruma; +3 Ответить
5. V1V 112 10.01.21 12:40 Сейчас в теме
(3) во-первых, да мы все тут так или иначе пиармим 1с.
Во-вторых, 1с это ещё и база данных. Где то надо хранить и уроки для фитнеса и картинки и т.д. и т.п. в этом случае 1с ничем не хуже и не лучше любой другой СУБД.
Ну и в-третьих, упомянутые приложения раруса это же частный случай. Все таки пока что основная масса приложений это фронт для 1с. Как следствие возможность использовать встроенные механизмы обмена, архитектуру и уже имеющихся штатных специалистов для поддержки.

Так что html это красивый интерфейс, как дополнение к 1с)
7. memb3r 31.01.21 12:01 Сейчас в теме
(5) 2) что в Android, что в iOs есть SQLLite внутри операционной системы, которая применяется в большинстве приложений.
3) вот это скорее всего и есть, т.к.есть свои разработчики, изначально написали мобильное приложение, оно выстрелило, и чтобы переписать его нужно огромные вложения, а так только сопровождай и все. Минус костыли ток :)
4. user642382_gv1c 09.01.21 09:49 Сейчас в теме
Использовал данную технологию в своих проектах. Работает быстро. Интерфейс можно любой создать. Пишу в VS интерфейс делаю отладку там же. Для ТСД это удобнее потому как драйвер сканера работает через 1С. Пробуйте сами а потом пишите.
6. neikist 14.01.21 19:16 Сейчас в теме
Какая жесть и извращения когда можно было сразу взять флаттер или реакт нейтив. К которым сразу и куча готовых библиотек на все случаи жизни прилагаются.
acvatoris; +1 Ответить
8. memb3r 31.01.21 12:03 Сейчас в теме
(6) если уже есть готовый проект, который, скорее всего, взлетел после мвп, то представь сколько нужно денег, чтобы переписать такое приложение, а потом держать в штате флаттер разработчика? Его и найти ещё нужно постараться.
9. neikist 02.02.21 13:01 Сейчас в теме
(8) Угу, то то 1сников хорошо умеющих в js/html/css у нас пруд пруди. Как и веб разрабов готовых в мобильной платформе 1с ковыряться. Т.е. надо сначала найти такого, а потом все равно переписывать на что то нормальное. Натив, или адекватную кроссплатформу, неважно.
10. memb3r 20.02.21 22:07 Сейчас в теме
(9) а как связаны умения js и html с 1с? Один веб разработчик стоит недорого, и их много. Штат 1с разрабов тоже есть, т.к специализация компании это разработка под 1С. И зачем переписывать, как вы говорите, на что-то нормальное, если уже есть решение и оно вполне рабочее, что подтверждает количество скачиваний.
12. skyadmin 58 19.01.22 21:36 Сейчас в теме
(10)
Один веб разработчик стоит недорого, и их много. Штат 1с разрабов тоже есть, т.к специализация компании это разработка под 1С. И зачем переписывать, как вы говорите, на что-то нормальное, если уже есть решение и оно вполне рабочее, что подтверждает количество скачиваний.

я хоть и 1сник, но для меня оказалось куда быстрей сделать мобильное приложение на C# нежели на 1с с даже обычным интерфейсом.
acvatoris; +1 Ответить
15. crismar24 14.07.22 00:12 Сейчас в теме
(12) А как именно делали, не поделитесь ? Я тоже 1Сник )
16. skyadmin 58 14.07.22 07:04 Сейчас в теме
(15) на фреймворке XAMARIN инструкция к применению на METANIT.COM
acvatoris; +1 Ответить
11. serverstar 65 13.10.21 21:08 Сейчас в теме
Здравствуйте. Вопрос от джуна. На управляемой форме создаю элемент полеHTML. в нем ПриОткрытии() формы динамически создаю простенькую HTML-форму с 3 текстовыми полями и кнопкой отправить. НО засада в том, что не удается ДАЖЕ сфокусироваться курсором на текстовом поле для ввода текста. и тем более ввести текст. КАК быть?
13. Sedaiko 580 28.04.22 13:17 Сейчас в теме
Кто-нибудь пытался запустить React на мобильной платформе?
crismar24; serverstar; +2 Ответить
14. serverstar 65 28.04.22 19:12 Сейчас в теме
Оставьте свое сообщение