[mobile] Переносим HTML интерфейс на 1С

Введение

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

 

 Верстка интерфейса для мобильного приложения 1С

 

Задача

Реализовать нижнее меню для мобильного приложения на 1С.

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

Для экспериментов сделал пример в VS Code с которым будем работать:

• Демо верстки
• Исходники на GitHub

Использовались следующие версии 1С:

• Платформа: 8.3.17.1496
• Мобильная платформа: 8.3.16.142

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

Анализ верстки

В исходниках на GitHub нужно обратить внимание на следующие моменты:

• Файл index.js: используются стрелочные функции, они в 1С не будут работать поэтому, когда будем переносить на 1С, нужно будет переделать под обычные функции.

let func = (arg1, arg2, ...argN) => expression

let sum = (a, b) => { 
  let result = a + b;
  return result; 
};

• Файл index.html: в теге script используется атрибут defer, он также не будет работать в 1С т.к. атрибут defer предназначен только для внешних скриптов и для учебного примера содержимое скрипта полностью будет внутри тега. 

Рассмотрим структуру HTML учебного примера в классическом варианте:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>mobile1C</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <main class="main">
        <div class="container">
            <div class="title">Home</div>
        </div>
    </main>
    <footer class="footer">
        <div class="container">
            <div class="footer__inner">
                <a href="/" class="footer__item footer__item--focus">
                    <img class="footer__icon" src="img/home.png" id="home">
                </a>
                <a href="/" class="footer__item">
                    <img class="footer__icon" src="img/bag.png" id="bag">
                </a>
                <a href="/" class="footer__item">
                    <img class="footer__icon" src="img/cart.png" id="cart">
                </a>
                <a href="/" class="footer__item">
                    <img class="footer__icon" src="img/user.png" id="user">
                </a>
            </div>
        </div>
    </footer>
    <script src="js/index.js"></script>
</body>
</html>

Содержимое тегов div с классом title и footer__inner нужно будет менять. 

Первый метод

Идея данного метода заключается в формировании HTML структуры с помощью JavaScript. Примерная логика:

1. 1С формирует строку JSON с данными
2. Передает сформированную строку в функцию JavaScript, которая преобразует ее в массив с объектами
3. Формируем HTML и меняем содержимое с помощью JavaScript функций

В итоге на стороне 1С остается только сформировать строки в формате JSON, передать их в нужные функции и вызвать функции JavaScript для изменения структуры HTML. 

Возвращаемся к исходникам на GitHub и проанализируем основные файлы, там можем увидеть вариант формирования HTML структуры с помощью JavaScript:

1. Файл index.html. Тег body пустой
2. Файл index.js. У нас есть переменная footerMenuJSON, которая содержит пункты меню в формате Json. Данная строка передает функцию setItemsMenu, которая преобразует ее в массив с объектами. Далее вызываются две функции для отрисовки main (generateMain()) и footer (generateFooter())

let footerMenuJSON = `
[{"id":"home","href":"/","icon":"home","active":true},{"id":"bag","href":"/","icon":"bag","active":false},{"id":"cart","href":"/","icon":"cart","active":false},{"id":"user","href":"/","icon":"user","active":false}]`

let PATH = '',
  textHTML = '',
  itemsMenu = []

const setItemsMenu = strJSON => {
  itemsMenu = strJSON !== '' ? JSON.parse(strJSON) : []
}

............................
//остальную часть кода смотрите на GitHub
............................

const generateMain = () => {
  textHTML = `
  <main class="main">
    <div class="container">
        ${getTitle()}
    </div>
    </main>`
  document.body.insertAdjacentHTML('afterbegin', textHTML)
}

const generateFooter = () => {
  const main = document.querySelector('.main')
  textHTML = `
    <footer class="footer">
        <div class="container">
            <div class="footer__inner">
                ${getMenuFooter()}
            </div>
        </div>
    </footer>`
  main.insertAdjacentHTML('beforeend', textHTML)
  updateTitle()
}

setItemsMenu(footerMenuJSON)
generateMain()
generateFooter()

Переходим к 1С. В исходниках файл с конфигурацией первого метода называется mobile1c_adapt_js.cf. В конфигурации добавлена единственная обработка на форме которой расположено ПолеHTML и реквизит формы с типом строка, с аналогичным названием. Код формы рассмотрим ниже:

&НаКлиенте
Процедура ПриОткрытии(Отказ)
	ФормаКлиент.СформироватьСтраницу(ПолеHTML, ЭтаФорма);
	ПодключитьОбработчикОжидания("ПослеОткрытия", 1, Истина);	
КонецПроцедуры

&НаКлиенте
Процедура ПослеОткрытия()
	
    Документ         = ЭтаФорма.Элементы.ПолеHTML.Документ; 
    ДанныеНижнееМеню = ОбщегоНазначенияВызовСервера.НижнееМенюJSON();

    Документ.defaultView.setItemsMenu(ДанныеНижнееМеню);
    Документ.defaultView.generateMain(); 
    Документ.defaultView.generateFooter();

КонецПроцедуры;

В процедуре СформироватьСтраницу получаем стартовою структуру HTML, которая заполнена по шаблону.

Функция ПолучитьШаблонHTML() Экспорт
	
	ШаблонHTML = "
	|<!DOCTYPE html>
	|<html lang=""ru"">
	|<head>
	|	 <meta name=""viewport"" content=""user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"">
	|	 <meta http-equiv=""Content-Type"" content=""text/html; charset=utf-8"">
	|	 <meta name=""format-detection"" content=""telephone=no"">
	|    <style>
	|    	%1
	|    </style>
	|</head>
	|<body>
	|
	| <script>
	|	 %2
	|</script>
	|</body>
	|</html>";
	
	Возврат ШаблонHTML;
	
КонецФункции

Первая проблема, которая возникает, это невозможность вызвать функции JavaScript ПриОткрытии формы т.к. они еще не доступны. Для обхода данной проблемы используется обработчик ожидания. За все остальное дальше будет отвечать JavaScript.

Плюсы

1. Большая часть логики для работы с HTML размещена в JavaScript. Для 1Сника все сводится к правильному формированию строк Json и вызову нужных функций JavaScript, как работа с каким-либо api. Данный подход будет удобен если версткой и адаптацией под 1С занимаются разные люди.
2. Интерфейс более плавно перерисовывается по сравнению, если структура формировалась и изменялась на стороне 1С (об этом в след методе).

Минусы

1. На конкретном примере пришлось подключать обработчик ожидания, чтобы отрисовать начальную страницу, эта задержка заметна в пользовательском режиме. Но она связана с особенностью, что данные  пунктов меню хранятся в справочнике в мобильном приложении, альтернативой можно забирать эти данные сразу с сервера методами JavaScript (если они будут работать в 1С) или формировать начальные пункты в начальной структуре HTML.
2. Отладка. Т.к объем кода JavaScript заметно увеличится при таком методе, вы можете столкнутся с проблемой, когда итоговая строка HTML будет на столько большая, что при попытке открыть ее в конфигураторе он будет зависать, а при копировании строки из окошка ниже она может обрезаться. С данной проблемой вы так же можете столкнуться если подключаете много дополнительных компонентов JavaScript.  Предполагаю, что данный метод Инструменты отладки Web-страниц в приложении на устройстве Android позволяет обойти данную проблему (не тестировался).

Второй метод

Он основывается на подходе описанным в статье Асинхронный обмен данными с JavaScript (и не только) без потерь.

Данный метод был изучен на занятии по разработке HTML интерфейса, автор Илья Низамов (ютуб).

Несколько полезных статей на взаимодействия 1С и JavaScript:

• Выполнение JavaScript кода из 1С в объекте Поле HTML Документа (HTML 5) и вызов события в 1С ПриНажатии
• Javascript и 1С. Кросс-платформенное взаимодействие

В исходниках файл с конфигурацией второго метода называется mobile1c_adapt_1c.cf.

Здесь шаблон HTML в 1С выглядит по-другому:

Функция ПолучитьШаблонHTML() Экспорт
	
	ШаблонHTML = "
	|<!DOCTYPE html>
	|<html lang=""ru"">
	|<head>
	|	 <meta name=""viewport"" content=""user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"">
	|	 <meta http-equiv=""Content-Type"" content=""text/html; charset=utf-8"">
	|	 <meta name=""format-detection"" content=""telephone=no"">
	|    <style>
	|        %1
	|    </style>
	|</head>
	|<body>
	|
	|<main class=""main"">
	|	<div class=""container"">
	|    	%2
	|	</div>
	|</main>
	|
	|<footer class=""footer"">
	|     <div class=""container"">
	|         <div class=""footer__inner"">
	|            %3
	|         </div>
	|     </div>
	| </footer>
	|
	|<!-- Script start --> 
	|	%4
	|<!-- Script end -->
	|
	|</body>
	|</html>";
	
	Возврат ШаблонHTML;
	
КонецФункции

Добавляется функция для формирования пунктов меню:

Функция ПолучитьМеню(ВыбранID = "") Экспорт
	
	ШаблонПункта = "
	|<a href=""%1"" class=""footer__item %4"" on click=""paramChange('menu', '%2')"">
	|<img src=""%3"" class=""footer__icon"">
	|</a>";
	
	Меню = "";
	МассивПунктов = ОбщегоНазначенияВызовСервера.ПунктыМеню();
		
	Для Каждого СтрокаПункт Из МассивПунктов Цикл
		
		Если (ВыбранID = "" И СтрокаПункт.active) 
			ИЛИ ВыбранID = СтрокаПункт.id 
		Тогда
			ДопКласс = "footer__item--focus";
		Иначе
			ДопКласс = "";
		КонецЕсли;	
			
		Меню = Меню + СтрШаблон(ШаблонПункта, СформироватьСсылку(СтрокаПункт.id), СтрокаПункт.id, 	
			СтрокаПункт.icon, ДопКласс);
			
	КонецЦикла;
	
	Возврат Меню;
	
КонецФункции

&НаКлиенте
Процедура ПриОткрытии(Отказ)
	ФормыКлиент.СформироватьФорму(ПолеHTML, ЭтаФорма);
	ПодключитьОбработчикОжидания("ПолучитьИОбработатьДанные", 1);
КонецПроцедуры

&НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
	СтандартнаяОбработка = Ложь;
	ПолучитьИОбработатьДанные();
КонецПроцедуры

&НаКлиенте
Процедура ПолучитьИОбработатьДанные() Экспорт
	
	Документ = ЭтаФорма.Элементы.ПолеHTML.Документ; 
	Если Документ = Неопределено Тогда
		Возврат;
	КонецЕсли;
	
	Пока ОкноДокумента.queueHead < ОкноДокумента.queueTail Цикл 
		Данные = ПрочитатьДанныеИзJSON(ОкноДокумента.getEvent(ОкноДокумента.queueHead + 1));
		ОкноДокумента.queueHead = ОкноДокумента.queueHead + 1;
		Если Данные = Неопределено Тогда
			Возврат;	
		КонецЕсли; 
		
		Если НЕ Данные["menu"] = Неопределено Тогда
			ОбработатьМеню(Данные["menu"]);
		КонецЕсли; 
	КонецЦикла; 
	
КонецПроцедуры 

&НаСервереБезКонтекста
Функция ПрочитатьДанныеИзJSON(СтрокаJSON)
	Результат = ОбщегоНазначения.ПрочитатьСтрокуJSON(СтрокаJSON);
	Если ТипЗнч(Результат) = Тип("Строка") Тогда
		Возврат ОбщегоНазначения.ПрочитатьСтрокуJSON(Результат);
	Иначе
		Возврат Результат;
	КонецЕсли; 
КонецФункции

&НаКлиенте
Процедура ОбработатьМеню(Данные)

	Документ = ЭтаФорма.Элементы.ПолеHTML.Документ; 
	Если Документ = Неопределено Тогда
		Возврат;
	КонецЕсли;
	ЗаголовокСтраницы = html.ПолучитьЗаголовок(Данные);
	Меню              = html.ПолучитьМеню(Данные);
	
	html.ВставитьВHTML(Документ, ".title", ЗаголовокСтраницы);
	html.ВставитьВHTML(Документ, ".footer__inner", Меню);
	
КонецПроцедуры

Процедура ВставитьВHTML(document, querySelector, htmlText) Экспорт
	Selector = document.querySelector(querySelector);
	Selector.innerHTML = htmlText;
КонецПроцедуры

Принцип работы:

1. Все пункты меню и заголовок формируются в начальной структуре HTML в процедуре СформироватьФорму
2. Каждому пункту меню присваивается событие клика on click=""paramChange(Имя, Значение)"
3. Функция paramChange создает объект из параметров, который передает в функцию pushEvent
4. Функция pushEvent добавляет объект в массив очереди queue
5. На стороне 1С в процедуре ПолучитьИОбработатьДанные получаем значения из очереди и обрабатываем в зависимости от ключа
6. В процедуре ОбработатьМеню выполняем замену содержимого блоков с классом title и footer__inner

Основной минус метода, что он не отрабатывает в веб клиенте.

Заключение

В заключение можно посмотреть видео с демонстрацией результата каждого метода:

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

Объемы нашего приложения пока не такие большие и визуальная разница пока не настолько заметна.

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

UPDATE

05/11/20

Внесем следующие улучшения для первого метода:

1) Откажемся от обработчика ожидания. Будем использовать обработчик события ПолеHTML ДокументСфомирован (Спасибо Владимиру Голованову):

&НаКлиенте
Процедура ПриОткрытии(Отказ)
	ФормаКлиент.СформироватьСтраницу(ПолеHTML, ЭтаФорма);
КонецПроцедуры

&НаКлиенте
Процедура ПолеHTMLДокументСформирован(Элемент)
	
    Документ         = ЭтаФорма.Элементы.ПолеHTML.Документ; 
    ДанныеНижнееМеню = ОбщегоНазначенияВызовСервера.НижнееМенюJSON();

    Документ.defaultView.setItemsMenu(ДанныеНижнееМеню);
    Документ.defaultView.generateMain(); 
    Документ.defaultView.generateFooter();

КонецПроцедуры

2) Начальное формирование пунктов меню сделаем при формирование начальной структуры:

Функция ПолучитьСкрипт() Экспорт
	
    ДанныеНижнееМеню	= ОбщегоНазначенияВызовСервера.НижнееМенюJSON();
	
    Текст =  "'use strict'
    |let footerMenuJSON = `" + ДанныеНижнееМеню + "`
    ...
    ...
    ...
    |setItemsMenu(footerMenuJSON)
    |generateMain()
    |generateFooter()
    |";

&НаКлиенте
Процедура ПриОткрытии(Отказ)
	ФормаКлиент.СформироватьСтраницу(ПолеHTML, ЭтаФорма);
КонецПроцедуры

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

Ссылка на все исходники и материалы

Мой список. Управляй своими заметками. JavaScript внутри 1С

Приложение доступно в Play market

Следите за проектом в телеграмм канале ovmst

ver 1.0

ver 1.1

Другие материалы, которые могут вас заинтересовать:

• [mobile] Взаимодействие с NFC через мобильную платформу 1С

• [mobile] Простое мобильное приложение на мобильной платформе 1с 

• Видео: Верстка интерфейса для мобильного приложения на 1С

• Видео: Функционал для корзины на JavaScript

• Перенос документов из УТ 10.3 в УТ 11.4

• Перенос остатков из КА 2.4 в БП 3.0

• [Специалист-консультант] ERP (Производство и ремонты, Управленческий учет, Бюджетирование) + УТ. Решения и шпаргалки к четырем экзаменам

• [ERP] Бюджетирование. 1С:Специалист-консультант. Часть 2

• [ERP] Бюджетирование. 1С:Специалист-консультант. Часть 1

• [ERP] Планирование и выполнение ремонтов

• Решение задач и материалы для подготовки в одном архиве для "1С:Специалист по конфигурированию и внедрению торговых решений" / "Специалист УТ 11"