Пример использования HTML-интерфейса для мобильного приложения (+JS, +CSS)

18.11.24

Разработка - Мобильная разработка

Очередной "эпос" на тему применения HTML для отрисовки интерфейса мобильного приложения с кратким описанием возможностей HTML, JavaScript, CSS и сквозным примером. Статья нацелена на тех, кто только "присматривается" к возможностям интеграции HTML и мобильной 1С, чтобы ответить на основные вопросы, которые возникают в самом начале.

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование По подписке [?] Купить один файл
Пример использования HTML-интерфейса для мобильного приложения (+JS, +CSS):
.zip 180,39Mb
1
1 Скачать (1 SM) Купить за 1 850 руб.

Предисловие

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

Понятно, что этот вариант хоть и рабочий, но далеко не идеальный. Вероятно, для мобильной разработки правильней было бы использовать язык, который  под неё лучше заточен, но лично для меня камнем преткновения становится время, которое необходимо затратить на изучение механизмов хранения структурированных данных, работы с файлами, взаимодействия с другими базами, формирования отчётов и прочих привычных вещей. При этом 1С предоставляет довольно широкий функционал для написания движка мобильного приложения, а поверхностных знаний HTML, CSS, JS и имеющихся в сети готовых библиотек вполне достаточно для возможности отрисовки красивой картинки.

В общем, у каждого самурая свой путь. 

HTML-документ

Итак, в данном подходе рабочей областью является HTML-страница или HTML-документ

Его содержимое представляет собой набор тэгов, который интерпретируется в интерфейс. На текущий момент в 1С за это отвечает встроенная в платформу библиотека WebKit.

Для формирования рабочей области создадим обработку, в форме которой  добавим строковый реквизит (ниже в примерах - ТекстHtml) и выведем его на форму в качестве поля вида Поле HTML документа (ПолеHtml). Саму форму укажем в качестве рабочей области начальной страницы конфигурации.

 
 Вкратце для тех, кто не работал ещё с HTML

 

HTML-документ формируется

  • при изменении содержимого реквизита ТекстHtml
  • интерактивном переходе на страницу группы, где расположено поле HTML
  • при изменении содержимого страницы через свойства HTML-документа 
  • при переходе по гиперссылке 

При этом срабатывает событие поля ДокументСформирован. В обработчике события можно, в том числе, изменять свойства HTML-документа не затрагивая содержимое ТекстаHtml.

ТекстHtml должен содержать описание структуры документа на языке HTML. И чтобы система восприняла его таковым, он обязательно должен содержать тег <html>. То есть система вполне нормально воспринимает 

ТекстHtml  = "<html>Привет мир!</html>" или даже ТекстHtml  = "<html>Привет мир!"

при этом на страницу просто будет выведена надпись Привет мир!

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

К стандарту, например, относится наличие тегов head и body.

 

Body преимущественно содержит видимый пользователю контент страницы, но может включать скрипты, скрытые и неотображаемые элементы и т.п. Подробно писать о нём, особого смысла нет. Если для реализации ваших идей не хватает тех элементов, которые были описаны выше, смело берите справочник HTML и подбирайте теги и атрибуты, которые отвечают вашим потребностям. Главное помните, что html – это только инструкция, поэтому итоговый вид интерфейса будет зависеть как минимум от движка, который будет её обрабатывать, и форм-фактора устройства. В общем, не забывайте делать проверку результата на гаджетах, для которых выполняете разработку.

 

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

  • метатеги <meta />
  • скрипты <script></script>
  • описание стилей <style></style> 

 

Метатеги содержат краткое описание страницы вроде её размера, кодировки, ключевых слов и прочего. Крайне полезным для создания рабочей области является метатег viewport, который определяет размер страницы: 

<meta content="width=device-width, initial-scale=1.0" name="viewport">

Если он не задан, то размер страницы устанавливается по умолчанию в зависимости от браузера (например, для Android WebKit ширина будет равна 800px). На практике это означает, что страница не будет ограничена размерами видимого поля, и будет прокручиваться.

 

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

 
 Пример кода на JS

 

Описание стилей содержит таблицу стилей на языке CSS, иными словами набор правил оформления внешнего вида элементов страницы: размер, форму, цвет, шрифт, положение на странице и т.п. 

 
 О CSS

 

И скрипты, и стили могут быть прописаны непосредственно в элементах (стили в атрибутах style, JS в атрибутах описания событий), а так же вынесены во внешние файлы (css подключается через тег link, JS указывается в атрибуте src тега script). 

 

Назад к 1С

При нажатии на кнопку или гиперссылку может возникнуть событие поля ПриНажатии. Особенностью мобильного приложения является то, что событие возникает только в случае перехода на другую страницу (в тонком клиенте нажатие на любую область ПоляHtml вызывает это событие).

 

В случае с гиперссылкой, достаточно заполнить значение атрибута href.

Пример: 

<a href="//infostart.ru">Инфостарт</a>

В качестве кнопки, по сути, может выступать любой элемент, для которого доступны атрибуты событий, воспринимаемые мобильным приложением. Т.е. подойдёт всё, что может вызвать выполнение скрипта: button, input типа button, img и пр. Для инициации перехода нужно присвоить значение свойству документа location.href.

Пример:

<button ontouchstart="location.href='//infostart.ru'">Инфостарт</button>

Стоит учитывать, что если адрес ссылки начинается с символа #, то обработчик события ПриНажатии не сработает, т.к. это не будет переходом на другую страницу. Такие ссылки считаются якорными. Они обеспечивают переход (прокрутку страницы) к элементу с указанным после решётки id.

Если адрес ссылки не соответствует стандарту URL, то система дополнит его адресом локальной директории, приводя к нужному формату, вроде такого (пример из эмулятора): 

http://localhost:1250/144153773/ТекстСсылки

 

Обработчик ПриНажатии имеет три параметра:

  • Элемент - поле формы - ПолеHTML
  • ДанныеСобытия - фиксированная структура с ключами (описание из СП)
    • Anchor - Неопределено или элемент А, если нажали на ссылку
    • Element - элемент, на который нажали
    • Button - Неопределено или элемент input c типом button или элемент button, если нажали на кнопку
    • Event - передаётся информация о событии, специфичная для используемого браузера
    • Document - документ, являющийся владельцем элемента, на котором было произведено нажатие
    • Href - Неопределено или значение поля Href элемента А. При этом, если в событии браузера используется ссылка с закодированными символами, не являющимися символами латинского алфавита, то в данном свойстве строка будет содержать раскодированные символы
  • СтандартнаяОбработка - булево - признак, определяющий, будет ли выполнена стандартная обработка события

На момент написания статьи в мобильном приложении у параметра ДанныеСобытия заполняются только значения ключей Document и Href.

Через Document происходит обращение к тому же объекту, что и через ПолеHtml.Документ. Это ВнешнийОбъект содержащий в себе свойства HTML-документа. К ним относятся различные счётчики, характеристики документа, коллекции элементов разбитые по типам (например forms, images), элементы верхнего уровня (body, head), обработчики событий и пр. Значения некоторых свойств доступны только для чтения, другие можно менять. 

Пример чтения значения свойства:

Сообщить(Элементы.ПолеHTML.Документ.body.children["div1"].innerHTML)

Пример программной установки содержимого HTML-документа:

Элементы.ПолеHtml.Документ.documentElement.innerHTML = "<head></head><body><div id='div1'>Привет мир!</div></body>"

Из особенностей программной установки/чтения свойств HTML-документа можно выделить то, что система не выдаёт ошибок, если имя свойства написано неправильно. Она просто игнорирует действие.

ПриНажатии срабатывает до формирования документа и, соответственно, до события ДокументСформирован. В рамках обработчика можно отменить переход, установив СтандартнаяОбработка в значение Ложь, выполнить нужные действия  средствами 1С и при необходимости изменить содержимое страницы. 

 
 Дополним пример таймера чтением заранее заданных значений

 

Собственно, на этом всё. Надеюсь, что информация была полезной 


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

Разработка конфигурации велась на платформе 8.3.24.1586. Мобильная сборка выполнена на 8.3.25.52.

 

P.S.: Если будете копировать код HTML из статьи, то обратите внимание на то, что  в нём могут присутствовать непереносимые пробелы (это особенность редактора). Замените их обычными пробелами, иначе система может проигнорировать часть кода.

мобильное приложение HTML JavaScript JS CSS

См. также

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

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

13200 руб.

27.12.2021    38775    109    163    

203

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

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

3000 руб.

03.12.2018    59649    194    103    

173

Сканер штрих-кода Терминал сбора данных Мобильная разработка Монитор заказов Оптовая торговля Розничная торговля Ценообразование, анализ цен Программист Пользователь Платформа 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    97912    592    189    

323

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

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

3450 руб.

28.04.2023    9687    15    1    

9

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

Мобильное приложение и конфигурация 1С для автоматической торговли на бирже через API Тинькофф банка. Достаточно задать настройки, нажать «Пуск», и робот сам торгует ежедневно.

7000 руб.

25.05.2022    4799    1    0    

6

Мобильная разработка WEB-интеграция Программист Мобильная платформа Абонемент ($m)

Экспериментальный релиз и простенький скрипт к нему закрывает потребности в любых видах синхронизации между устройствами Simple и между Simple и бек-системами (например 1С). По сути – это очень простой python-скрипт, который можно запустить на доступной машине, сервере или VPS и он будет связывать клиентские устройства между собой и с 1С или другими бек-системами. В самой платформе появилось для этого множество доработок для поддержки стабильного постоянного соединения, докачки больших файлов и работе в фоне. Дополнение к основной статье https://infostart.ru/1c/tools/1153616/

1 стартмани

23.08.2024    1303    6    informa1555    1    

13
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. Константин С. 675 21.11.24 17:27 Сейчас в теме
Избитая тема)
Но описана в доступной форме.
Пробуй выложить apk в свободный доступ)
Оставьте свое сообщение