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
18
18 Скачать (1 SM) Купить за 1 850 руб.

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

Одна из популярных головоломок 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С v8.3 Конфигурации 1cv8 Бесплатно (free)

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

21.05.2024    20123    dimanich70    81    

144

Универсальные функции Программист Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

1 стартмани

18.03.2024    4091    3    John_d    11    

57

Универсальные функции Программист Стажер Платформа 1С v8.3 Конфигурации 1cv8 Бесплатно (free)

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

12.02.2024    18059    atdonya    24    

56

Универсальные функции Программист Платформа 1С v8.3 Бесплатно (free)

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

30.11.2023    5502    ke.92@mail.ru    16    

65

WEB-интеграция Универсальные функции Механизмы платформы 1С Программист Платформа 1С v8.3 Конфигурации 1cv8 Бесплатно (free)

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

28.08.2023    14730    YA_418728146    7    

166

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

Расширение для программ 1С:Управление торговлей, 1С:Комплексная автоматизация, 1С:ERP, которое позволяет распечатывать печатные формы для непроведенных документов. Можно настроить, каким пользователям, какие конкретные формы документов разрешено печатать без проведения документа.

2 стартмани

22.08.2023    3580    56    progmaster    8    

4

Инструментарий разработчика Универсальные функции Платформа 1С v8.3 Конфигурации 1cv8 1С:Розница 2 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х 1С:Зарплата и Управление Персоналом 3.x Абонемент ($m)

Копирует в буфер значения из списков, из ячеек отчетов, таблиц, настроек списков, других отборов и вставляет в выбранную настройку отбора. Работает с Объект не найден. Работает как в одной так и между разными базами 1С. Использует комбинации [Alt+C] Копировать список, [Alt+V] Вставить список. Также для копирования данных используется стандартная [Ctrl+C] (например из открытого xls, mxl, doc и т.п. файла скопировать список наименований)

1 стартмани

13.10.2022    18478    171    sapervodichka    112    

135
Оставьте свое сообщение