html + css + js в поле HTML документа 1С на примере решения задачи ханойских башен

11.11.19

Разработка - Универсальные функции

Рассматривается пример использования html + css + js в полеHTMLдокумента 1с. Вызов функций javascript со стороны 1С с передачей параметров. Решение головоломки "Ханойская башня" с визуализацией в среде 1С.

Файлы

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

Наименование Скачано Купить файл
html + css + js в полеHTMLдокумента 1c на примере решения задачи ханойских башен:
.epf 8,19Kb
22 1 850 руб. Купить

Подписка PRO — скачивайте любые файлы со скидкой до 85% из Базы знаний

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

Оформить подписку и скачать решение со скидкой

Задача ханойских башен

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

Существует несколько подходов к решению. В данной публикации приведено решение с использованием рекурсивного метода.

Суть метода. Пусть есть 3 стержня (Стержень1, Стержень2, Стержень3). Переложим n-1 дисков с Стержень1 на Стержень3. Затем перенесём оставшийся (самый большой) диск с Стержень1 на Стержень2. Наконец, снова, переложим n-1 дисков с Стержень3 на Стержень2 (поверх того, самого большого диска). Таким образом, задача по переносу n дисков с Стержень1 на Стержень2 решена, а её код на 1С будет иметь вид:

Процедура ПеренестиДиски (НомерДиска,Стержень1,Стержень2,Стержень3)         // переложить n-й диск с Стержень1 на Стержень2, используя Стержень3
	Если НомерДиска <= 0 Тогда             		   							// (0) дисков нет - конец
		Возврат;
	КонецЕсли;
	ПеренестиДиски(НомерДиска-1,Стержень1,Стержень3,Стержень2);             //     перекладываем n-1 диск с Стержень1 на Стержень3	
	Сообщить(Стержень1+"->"+Стержень2);              	   					// (1) переносим     1 диск   c Стержень1 на Стержень2	
	ПеренестиДиски(НомерДиска-1,Стержень3,Стержень2,Стержень1);             //     перекладываем n-1 диск с Стержень3 на Стержень2
	Возврат;                               									// (2) конец
КонецПроцедуры

 

Реализация

Для начала "нарисуем" внешний вид ханойских башен используя HTML и CSS, и создадим метод который будет передвигать указанный диск на заданный стержень:

Далее сгенерируем получившийся код в форме 1С, используя Поле HTML Документа.

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

В нашем случае HTML форма будет генерироваться при открытии формы:

 
Показать/Скрыть

 

В секции <script></script> описана функция MoveDisk(disk, st), которая принимает значение параметров из 1с, и двигает диски согласно этим параметрам. 

Теперь перепишем процедуру "Переставить", таким образом, чтобы:

  • каждый следующий шаг происходил по нажатию на кнопку формы;
  • в алгоритме происходил вызов js функции MoveDisk. 

Процедура примет вид:

&НаКлиенте
Процедура Переставить(ОбъектWindow,НомерДиска,Стержень1,Стержень2,Стержень3,ТекущийШаг)
	Если НомерДиска <= 0 Тогда 
		Возврат;
	КонецЕсли;
	Переставить(ОбъектWindow,НомерДиска-1,Стержень1,Стержень3,Стержень2,ТекущийШаг);
	Если ТекущийШаг = СледующийШаг Тогда 
		ОбъектWindow.MoveDisk("disk" + НомерДиска,Стержень2);
		ТекущийШаг = ТекущийШаг +1;
		Возврат;
	КонецЕсли;	
	ТекущийШаг = ТекущийШаг +1;
	Переставить(ОбъектWindow,НомерДиска-1,Стержень3,Стержень2,Стержень1,ТекущийШаг);
	Возврат;
КонецПроцедуры

Вызов функции "Переставить" происходит по нажатию на кнопку:

&НаКлиенте
Процедура ВыполнитьПерестановку(Команда)
	ОбъектWindow = Элементы.ПолеHTMLДокумента.Документ.parentWindow;    // IE-only 
	Если ОбъектWindow = Неопределено Тогда
        ОбъектWindow = Элементы.ПолеHTMLДокумента.Документ.defaultView; // Другие браузеры
	КонецЕсли;
	ТекущийШаг = 1;
	Переставить(ОбъектWindow,КоличествоБашен,"st1","st2","st3",ТекущийШаг);
	СледующийШаг = СледующийШаг +1;
КонецПроцедуры

ОбъектWindow является корневым объектом JavaScript. Все объекты JavaScript, а также переменные и функции определяемые пользователем хранятся в объекте window.

В контексте данного объекта и хранится javascript функция MoveDisk(disk, st).

Таким образом, используя связку html css javascript, реализовано решение головоломки в элементе формы 1с Поле HTML Документа.

 

Ссылки:

1с + js:

//infostart.ru/public/398366/

Ханойские башни:

http://synset.com/ai/ru/search/Towers_of_Hanoi.html

https://ru.wikipedia.org/wiki/%D0%A5%D0%B0%D0%BD%D0%BE%D0%B9%D1%81%D0%BA%D0%B0%D1%8F_%D0%B1%D0%B0%D1%88%D0%BD%D1%8F

 

Тестировалось на платформе 8.3.12.

Обработка с реализацией прикреплена.

Вступайте в нашу телеграмм-группу Инфостарт

javascript css html 1c полеHTMLдокумента рекурсия

См. также

Универсальные функции Работа с интерфейсом Программист 1С:Предприятие 8 Бесплатно (free)

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

14.05.2025    5417    DeerCven    15    

57

Универсальные функции Программист 1С:Предприятие 8 1C:Бухгалтерия Бесплатно (free)

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

21.05.2024    46342    dimanich70    83    

164

Универсальные функции Программист 1С:Предприятие 8 1C:Бухгалтерия Абонемент ($m)

Задача: вставить картинку из буфера обмена на форму средствами платформы 1С.

1 стартмани

18.03.2024    6851    6    John_d    13    

59

Универсальные функции Программист Стажер 1С:Предприятие 8 1C:Бухгалтерия Бесплатно (free)

Пришлось помучиться с GUID-ами немного, решил поделиться опытом, мало ли кому пригодится.

12.02.2024    57386    atdonya    31    

68

Универсальные функции Программист 1С:Предприятие 8 Бесплатно (free)

На заключительных этапах, когда идет отладка или доработка интерфейса, необходимо много раз переоткрыть внешний объект. Вот один из способов автоматизации этого.

30.11.2023    8618    ke.92@mail.ru    17    

68

WEB-интеграция Универсальные функции Механизмы платформы 1С Программист 1С:Предприятие 8 1C:Бухгалтерия Бесплатно (free)

При работе с интеграциями рано или поздно придется столкнуться с получением JSON файлов. И, конечно же, жизнь заставит проверять файлы перед тем, как записывать данные в БД.

28.08.2023    22776    YA_418728146    8    

174
Для отправки сообщения требуется регистрация/авторизация