Профессия — 1С

Рукопашный бой Карташ

Категории

Поле HTML документа

рубрики: Работа с формами | Дата: 10 Август, 2018
Скачать обработку с примерами из статьи: professia1c_html_document.epf
Платформа: 8.3; Тип формы: управляемая.

Сегодня рассмотрим такой элемент форм как Поле HTML документа.




Название его говорит само за себя и предназначено это поле для отображения кода в формате html. Первое, что приходит на ум это конечно же организовать просмотр сайтов. И такая возможность действительно есть. И второе — для тех кто немного знаком с html и css есть возможность самим написать код для отображения в html поле. Учитывая, что у css3 достаточно широкие возможности стилизации, и в том числе присутствует возможность анимации, может получится достаточно живая и красочная картинка. Плюс, как известно, в html можно включать и код на языке java script. И тут уже возможности ограничиваются только вашей фантазией. Рассмотрим на примере оба вышеперечисленных варианта. Для демонстрации создадим внешнюю обработку на управляемых формах.

Просмотр веб страницы через поле HTML документа

Эта возможность реализуется очень просто. В реквизиты формы добавим реквизит Сайт с типом «Строка»:
Реквизит
Разместим этот реквизит на форме и в свойствах выберем вид — «Поле HTML документа»:
Вид html
И конечно же добавим строку для ввода адреса сайта.

Остальное делается практически одной строчкой кода, которую мы вставим в обработчик события ПриИзменении адресной строки сайта:




&НаКлиенте
Процедура АдресСайтаПриИзменении(Элемент)
	Сайт = АдресСайта;
КонецПроцедуры

Теперь опробуем обработку в режиме 1С:Предприятия. Ввожу адрес своего сайта www.professia1c.ru и получаю вот такое сообщение об ошибке:
Ошибка
Это связано с тем, что по умолчанию поле HTML документа работает в режиме совместимости с древней версией браузера Internet Explolrer. И естественно, что очень многие владельцы сайтов уже не заморачиваются с поддержкой старых версий. Хотя если ввести адрес сайта самой 1С — www.1c.ru, мы увидим, что он успешно отобразится в нашем поле. В сети предлагается несколько разных способов как победить эту ошибку. От редактирования настроек браузера IE, до редактирования реестра. Мне на моей домашней 32-разрядной версии Windows 10 помогло редактирование реестра. Для этого необходимо найти ветку «HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION» и добавить в нее параметр 1Cv8c.exe со значением 11000 в десятичной системе исчисления.
Реестр
После этого все встает на свои места и сайт отображается корректно. Понятно, что когда речь идет о крупном предприятии, то отредактировать реестр на десятках и сотнях машин может быть проблематично. Но в каких-то отдельных случаях может выручить.

На самом деле не совсем понятно где это может пригодится, если есть стандартный браузер. Ну с фирмой 1С все понятно — она таким образом рекламу нам показывает каждый раз когда мы 1С:Предприятие запускаем)).

Пишем свой код для поля HTML документа

А теперь создадим свою мини веб страничку и отобразим ее в другом поле HTML документа. По аналогии с предыдущим примером создадим реквизит СтилиCSS и разместим его в отдельной закладке на форме.
Стили css
Далее перейдем к написанию кода html. Минимально необходимый код, так сказать заготовка нашей странички выглядит следующим образом:


<!DOCTYPE html>
<html lang='ru'>
  <head>
    <meta charset='utf-8'>
  </head>

  <body>

  </body>

</html>

Внутри тега <head></head> обычно прописывают различные метатеги, а также мы поместим в него тег <style></style> в котором пропишем стили css. Как правило стили css размещают в отдельном файле, но поскольку у нас нет такой возможности воспользуемся тегом style. Содержимое же самой страницы размещают внутри тега <body></body>. В качестве примера нарисуем внутри нашего поля html квадрат, а с помощью стилей css заставим его при наведении курсора мыши растягиваться на всю ширину.




Итоговый код html будет выглядеть следующим образом:


<!DOCTYPE html>
<html lang='ru'>
  <head>
    <meta charset='utf-8'>
    <style>

      .move {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
      }

      .move:hover {
        width: 100%;
        transition-property: width;
        transition-duration: 5s;
      }

    </style>
  </head>

  <body>

    <div class='move'></div>

  </body>

</html>

Теперь вставим этот код в процедуру ПриСозданииНаСервере:





Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)

	СтилиCSS =
	"<!DOCTYPE html>
	|<html lang='ru'>
	|  <head>
	|    <meta charset='utf-8'>
	|    <style>
	|      
	|      .move {
	|        width: 100px;
	|        height: 100px;
	|        background-color: aquamarine;
	|      }
	|      
	|      .move:hover {
	|        width: 100%;
	|        transition-property: width;
	|        transition-duration: 5s;
	|      }
	|      
	|    </style>
	|  </head>
	|  
	|  <body>
	|  
	|    <div class='move'></div>
	|  
	|  </body>
	|  
	|</html>";

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

   

2018г. Профессия — 1С. Обмен опытом по программированию в 1С