1С html – 1С html в табличный документ 1с – 1С 8.2 УП : ПолеHTMLДокумента ~ Программное формирование HTML-документа, содержащего Ссылки на объекты БД » Работа с Формой (Диалог) и её элементами » FAQ 1С 8.2 УП : » HelpF.pro

Профессия — 1С » Поле HTML документа

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

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


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

java script. И тут уже возможности ограничиваются только вашей фантазией. Рассмотрим на примере оба вышеперечисленных варианта. Для демонстрации создадим внешнюю обработку на управляемых формах.

Просмотр веб страницы через поле 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С:Предприятие запускаем)).

Метатег X-UA-Compatible

Когда речь не идет о просмотре сайтов и мы пишем полностью свой код для поля html документа, то нам нет необходимости редактировать реестр для того чтобы воспользоваться всеми прелестями CSS3 и HTML5. Для этого воспользуемся метатегом X-UA-Compatible. Это специфический метатег предназначенный для браузера Internet Explorer. Он позволяет устанавливать режим совместимости для IE. Если быть точным, то X-UA-Compatible — это значение аттрибута http-equiv, который в свою очередь используется вместе с аттрибутом content. Короче говоря нам необходимо в разделе head нашего html документа прописать вот такую строчку:

<meta http-equiv='X-UA-Compatible' content='IE=edge'>

которая говорит браузеру Internet Explorer, что он должен работать в режиме совместимости с самой последней его версией. В которой нам конечно же доступны CSS3 и HTML5.

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

А теперь создадим свою мини веб страничку и отобразим ее в другом поле HTML документа. По аналогии с предыдущим примером создадим реквизит СтилиCSS и разместим его в отдельной закладке на форме.

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

<!DOCTYPE html>
<html lang='ru'>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  </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'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <style>

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

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

    </style>
  </head>

  <body>

    <div></div>

  </body>

</html>
 

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

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

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

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

Проверяем как это выглядит в режиме 1С:Предприятия

Наводим курсор на квадрат и наблюдаем как он в течение 5 секун плавно растягивается на всю ширину нашего поля:

   

Редактор HTML-документа

HTML-редактор используется для создания пользовательских описаний в виде HTML-документов. Окно редактора содержит три закладки, позволяющие осуществлять просмотр и редактирование документа.

На закладке Редактирование документ отображается в текстовом и графическом виде:

На закладке Текст разработчик имеет возможность редактировать HTML-текст документа:

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

Работа с HTML-документом напоминает работу в обычном текстовом редакторе, однако HTML-редактор предоставляет ряд дополнительных возможностей, которые обусловлены использованием формата HTML:

Форматирование текста

Текст HTML-документа можно форматировать: устанавливать его стиль, абзацные отступы, выбирать размер шрифта, параметры, гарнитуру и т. д.:

При копировании текста из других текстовых редакторов (например, Word) HTML-редактор сохраняет исходное форматирование текста.

Таблицы

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

Картинки

В HTML-документе могут быть размещены картинки. Разработчик имеет возможность задавать размеры картинки, ее положение и толщину рамки вокруг картинки:

Надписи

HTML-редактор позволяет использовать в документах надписи — специальные объекты HTML-документа. В надписи можно разместить текст, таблицу, картинку или другую надпись. При просмотре документа вложенные объекты надписи будут непрерывно прокручиваться справа налево:

Гиперссылки

Редактор позволяет вставлять в текст документа гиперссылки. Гиперссылка может представлять собой как обычный URL (например, http://nashe1c.ru), так и ссылку на другой HTML-документ, содержащийся в прикладном решении:

Поле HTML документа в управляемом и обычном приложении в 1С 8.3, 8.2

Поле HTML документа — этот элемент позволяет выводить на форму HTML страницы, полученные по URL адресу.

ПолеHTMLДокумента в обычном приложении

Для примера, во внешней обработке, создаём реквизит формы —

ПолеHTMLДокумента1. Для перехода на страницу в интернете, воспользуемся методом «Перейти».

Процедура КнопкаПерейтиНажатие(Кнопка)   ЭлементыФормы.ПолеHTMLДокумента1.Перейти(«http://www.okolokompa.ru»);   КонецПроцедуры

 

ПолеHTMLДокумента в управляемом приложении

Для примера, во внешней обработке, создаём реквизит формы — ПолеHTMLДокумента1 (с типом — строка). На самой форме создаём элемент, указывающий на наш, только что созданный реквизит. Вид его указываем — Поле HTML документа.

В управляемом приложении метод «Перейти» недоступен.

По этой причине, для перехода на страницу, URL-адрес установим не полю формы, а реквизиту формы.

&НаКлиенте Процедура ПерейтиНаСтраницу(Команда)   ПолеHTMLДокумента1 = «http://www.okolokompa.ru»;   КонецПроцедуры

 

Веб браузер в 1С

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

&НаКлиенте Процедура Команда1(Команда) Объект.HTML = Адрес; КонецПроцедуры   &НаКлиенте Процедура Назад(Команда) Элементы.HTML.Назад(); КонецПроцедуры   &НаКлиенте Процедура АдресОкончаниеВводаТекста(Элемент, Текст, ДанныеВыбора, ПараметрыПолученияДанных, СтандартнаяОбработка) Объект.HTML = Текст; Адрес = Текст; КонецПроцедуры   &НаКлиенте Процедура HTMLДокументСформирован(Элемент) Адрес = Элемент.Документ.url; КонецПроцедуры

Весь прикол в том, что Поле HTML документа — это всеми любимый Internet Explorer, только в режиме совместимости с IE7. Поэтому, в некоторых случаях, вас будет ждать такое уведомление)))

---

Вконтакте

Facebook

Twitter

Google+

Одноклассники

Мой мир

E-mail

Интеграция HTML движка в нативное Windows приложение – выбор и архитектура

Как мы перевели работу с HTML в 1С:Предприятии с Internet Explorer на WebKit

Возможность отображать HTML в формах 1С появилась в платформе 1С:Предприятие в 2003 г. версии 8.0. Для работы с HTML в платформе использовался движок браузера Internet Explorer (1С:Предприятие на тот момент работало только под Windows). Движок браузера использовался платформой для утилитарных целей. Например, писать с нуля полноценный элемент для редактирования текста а-ля Word – с возможностью различных цветовых и шрифтовых решений, вставки картинок и т.д. – весьма непростая задача. А если задействовать для этих целей HTML и использовать в качестве средства отображения движок интернет-браузера, то задача сильно упрощается. Также при помощи движка был реализован ряд других механизмов (например, отображение справочной информации) и элементов (например, Планировщик).

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

Время шло, платформа стала поддерживать сначала Linux, а потом и macOS. Для работы с HTML в этих ОС Internet Explorer не подходил по понятным причинам; в Linux нами был задействован WebKitGTK+, а в macOs — библиотека на основе Cocoa. Таким образом, единство кодовой базы для разных ОС (которое мы стараемся поддерживать для клиентского кода на уровне 95%) в этой области было нарушено. Ну и движок IE к этому времени стал источником ряда проблем.


Проблемы:

• У движка IE закрытый исходный код – значит:
  
  • Невозможна гибкая настройка движка под нужды платформы
  • Невозможны отладка и понимание процессов, происходящих внутри
  • Невозможно устранение багов и ошибок путем обновления версии движка
• Движок не подходит для реализации современных задач веб-программирования
• Проблемы производительности на слабых машинах

Итак, напрашивался перевод работы с HTML в версии 1С:Предприятия для Windows с движка IE на что-то другое. Что же выбрать?

Для начала мы сформулировали требования к движку:

• Поддержка современных технологий веб-программирования
• Открытый исходный код для возможности гибкой настройки движка и понимания логики его работы
• Высокая производительность на слабых компьютерах
• Желательно, чтобы движок требовал для работы небольшое количество сторонних библиотек

Выбор движка

Из чего выбирать? Начали мы, естественно, с WebKit, с которым уже работали в версиях платформы для Linux и macOS.

WebKit был разработан в Apple в начале 2000-х на основе движков с открытым исходным кодом KHTML и KJS. На основе WebKit был создан браузер Safari, позже – Chrome (еще позже Chrome перешел с WebKit на Blink, который опять-таки создан на основе кода WebCore из WebKit).

Исходный код WebKit – открытый, под лицензией LGPL. WebKit написан под macOS, под Windows есть несколько портов:

WebKit AppleWin

Это порт, который разработчики WebKit предлагают собирать под Windows по умолчанию. Был сделан сотрудниками Apple в середине-конце нулевых. Использует графическую библиотеку CoreGraphics, которая является упрощенной версией библиотеки под macOS, портированной на Windows. Для выполнения JavaScript порт использует библиотеку JavaScriptCore c тем же API, что используется в реализации платформы под Linux. Это делает его основным кандидатом для использования.

WebKit WinCairo

Этот порт использует для графики библиотеку Cairo. Этот порт Apple какое-то время активно развивала как аналог основному порту AppleWin. Преимущество этого порта в том, что он менее зависим от macOS-специфичных библиотек, которые необходимы для работы CoreGraphics. Помимо этого порт использует ту же библиотеку для графики (Cairo), что и движок WebKitGTK+, который используется нами в Linux-реализации платформы, а это хорошо для стандартизации поведения нашего кода.

QtWebKit

Ещё одна реализация движка WebKit под Windows, теперь уже независимая от разработчиков самого движка. Qt – популярная кроссплатформенная библиотека с собственной графической библиотекой QtGui. Этот порт также использует библиотеку JavaScriptCore для обработки JavaScript, однако у него есть минусы:

• Сильная зависимость от основных компонент Qt, которые в случае использования в стороннем программном обеспечении нужно будет поставлять вместе с ним
• Отличающийся набор интерфейсов для работы с компонентами для отрисовки HTML по сравнению с WebKitGTK и собственная логика работы с ними.

WebKitGtk+ for Windows

Мы уже использовали WebKitGtk+ в Linux-версии платформы. Но вариант задействовать его в Windows был исключен из-за сложности сборки, плохой документированности этого процесса и отсутствия постоянной поддержки этого направления развития от разработчиков WebKitGTK+.

Chromium(Blink)

Первый и единственный не WebKit-подобный движок, который рассматривался как кандидат для решения задачи. Был отвергнут из-за больших различий в логике работы компонент для отрисовки HTML по сравнению с WebKitGTK+ и другой библиотеки для работы с JavaScript (V8).

Что выбрать?

После исследований в финал вышли AppleWin и WinCairo.
Чтобы сделать окончательный выбор, мы изучили, как работает WebKit.

Структура движка WebKit

Обычно разные порты WebKit отличаются двумя вещами. Первая – это непосредственно реализация для конкретной ОС с задействованием ОС-специфичных компонент. Вторая – это графическая библиотека. На рисунке ниже описаны различия в этом смысле между портами WebKit. Для Windows разработчиками WebKit были написаны порты на адаптированной CoreGraphics и библиотеке Cairo.

Упрощенная модель работы движка: три традиционных механизма форматирования веб-страницы — HTML, JavaScript и CSS — подаются на вход движку, а он из них формирует и отображает страницу:

Сам движок состоит из нескольких компонент:

• WTF (Web Template Framework, а не то, что вы, возможно, подумали): здесь находятся собственные реализации структур данных для функционирования движка, а также осуществляется работа с потоками
• JavaScriptCore: компонента, как ясно из названия, для работы с языком JavaScript
• WebCore: здесь написана вся работа с DOM, стилями, парсингом HTML и XML. Здесь делается вся основная «магия» движка
• Platform: выполняет технические действия для взаимодействия с сетью, помещение данных в БД, декодирование изображений, работа с медиа
• WebKit и WebKit2 API – связывание всех компонент и предоставление доступа к ним

Взаимосвязь компонент WebKit и ОС-специфичных особенностей — на рисунке ниже. Как видно, есть довольно много специфичных моментов, которые нужно реализовывать для каждой ОС отдельно. Хотя JavaScriptCore позволяет использовать себя в каждом порте без отдельных реализаций.

Как формируется веб-страница

Из сети приходит ответ на запрос к серверу с данными для загрузки. Загрузчик передает данные в парсер, который, взаимодействуя с компонентой для JavaScript, формирует DOM и таблицу стилей. Далее сформированные данные передаются в дерево рендеринга и отображаются графическим контекстом.

Сама страница состоит также из отдельных компонент. В компоненте WebCore реализован класс Page, который позволяет получить доступ ко всей странице. У Page есть главная рамка – MainFrame, в рамке всегда есть документ. В главной рамке может быть любое количество других рамок, также с документами внутри. Для каждой рамки отдельно формируются некоторые события, а также специфичные графический и JavaScript контексты.

Упрощенно HTML-парсер работает так. Из набора полученных от сервера байт декодер формирует набор символов для разбора. Символы преобразуются в лексемы или токены, которые обычно представляют собой элементарные части кода с мета-информацией о том, что это за текст, является ли он частью синтаксиса языка или контентом. Затем из токенов формируются узлы для построения DOM-дерева. Строитель дерева из набора узлов формирует полноценную объектную модель документа веб-страницы.

Окончательный выбор

• AppleWin
  • Плюсы:
    • Реализован на графической библиотеке, которая работает в macOS – главной целевой платформе для разработчиков WebKit
  • Минусы:
    • Отсутствие реализации механизма печати
    • Большое количество зависимостей
• WinCairo
  • Плюсы:
    • Та же графическая библиотека (Cairo), что и в используемом Linux-порте платформы 1С
  • Минусы:
    • Существенных для наших задач не обнаружено

Победил WinCairo. Для разработки взята последняя доступная на тот момент версия WebKit – 605.1.11.

Реализация

Хотя движок довольно неплохо покрыт юнит-тестами (около 30 000 на все компоненты движка, написаны авторами движка), в реализациях для “непрофильных” ОС (т.е. для всего, что не macOS), существуют ошибки и недоработки. Эти пробелы реализации постепенно обнаруживались по мере разработки и тестирования работы движка в составе платформы 1С:Предприятие.

Загрузка HTML-кода через Drag&Drop

При перетаскивании текста в окно обнаружилось, что если перетаскиваемый текст содержит не-ASCII символы, то в финальный документ вставляются иероглифы. Ошибка проявлялась только в Windows-реализации движка, потому что она работала со ОС-специфичным механизмом перетаскивания элементов. Оказывается, текст не декодировался из UNICODE в UTF-16 перед передачей в обработчик события вставки.

Изменение поведения по комбинации клавиш Shift+Enter

В большинстве текстовых редакторов (включая Microsoft Word) эта комбинация вставляет перенос строки. Стандартное же поведение WebKit – вставка нового параграфа (как при простом нажатии на Enter). Мы изменили движок, сделав поведение более привычным для пользователей.

Организация механизма Undo&Redo.

WebKit предоставляет API для реализации собственного механизма отмены и повторения действия пользователя. Его схема такова: когда пользователь совершает некое дискретное с точки зрения движка действие (например, переход к новому параграфу, форматирование курсивом, вставка), то WebKit сообщает об этом разработчику средствами API, чтобы он мог зарегистрировать это действие.

В процессе тестирования реализованного механизма выяснилась неприятная вещь: движок не сообщает об изменениях в структуре таблиц. Были добавлены команды добавления и удаления ячеек и изменения атрибута colSpan, которые стали частями составных действий, таких как, например, добавление/удаление столбца или строки таблицы. Такие составные команды регистрируются в тот же стек undo&redo, и вместе с командами из движка обеспечивают корректную работу механизма.

Вставка из Excel

Те, кто работал с буфером обмена Windows и Excel, возможно, знают, что, во-первых, при копировании из Excel в HTML формат буфера обмена в копируемый фрагмент помещаются только теги ячеек и рядов, но не тег самой таблицы, во-вторых, в ячейки не передаются стили из Excel документа. Из-за этого, вставка, например, в редактируемый элемент в Chrome цветной таблицы выглядит так:

Оригинал:

В Chrome:

Оба этих фактора не учли и разработчики WebKit. Открытость кода движка позволила нам доработать механизм вставки, и теперь вставленный в ПолеHTMLДокумента фрагмент таблицы близок к оригинальному:

Генерация курсивных шрифтов

Если в Windows отсутствует italic-версия нестандартного шрифта, большинство текстовых редакторов умеет генерировать такой шрифт по его regular-версии. Однако WebKit такого не умел и пару раз ввёл разработчиков в заблуждение: как же так, в коде HTML документа мы помещаем текст в тег , но несмотря на это текст оставался прямым. Причина в алгоритме подбора движком WebKit нужного шрифта в используемом нами порте WinCairo – в случае, если курсивной версии нет, движок использует regular-версию. Это поведение было заменено на использование генерируемого графической библиотекой Cairo курсивного шрифта.

Ошибки при декодировании изображений и анимации

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

Опытным путём было выяснено, что при линковке библиотеки libpng динамическим способом вместо статического, проблема устраняется. Кстати, в актуальной версии движка линковка выполнена именно этим способом. Было решено поступить так же.

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

Поддержка правописания

В сборке с Internet Explorer, в Windows версии 8 и новее у редактируемого поля HTML можно было включить проверку правописания. Для этого достаточно было атрибут «spellcheck» сделать равным «true». У WebKit для разных портов были свои решения: в Linux это библиотека Enchant, в macOS — собственный механизм, знакомый всем пользователям продукции Apple. А вот для Windows реализации нет, но предоставляется API для собственного решения. Мы использовали Windows Spell Checking API, доступный начиная с Windows 8, и реализовали механизм по аналогии со сборкой с Internet Explorer. Кстати, теперь в форматированном документе в нативных клиентах 1С:Предприятия тоже работает эта функциональность. До версии 8.3.14 она была отключена из-за низкой производительности Internet Explorer.

Поддержка Windows XP

Часть наших клиентов до сих пор работает на Windows XP, и в ближайшее время апгрейдить ОС не собирается. Печально для нас как разработчиков, но факт. А значит — нам надо их поддерживать. И тут нас ждал неприятный сюрприз: разработчики WebKit уже около года не поддерживали работу движка в WinXP. Попытка собрать версию движка с набором средств сборки для WinXP не привела к успеху — разработчики WebKit используют библиотеки, доступные только с версии Windows Vista и более поздних.

Что делать? Варианты были такие:

1. Оставить в WinXP реализацию с движком Internet Explorer, а в старших версиях Windows использовать WebKit
2. Взять для разработки более раннюю версию движка WebKit, работоспособную в WinXP, и использовать эту версию во всех ОС
3. Использовать в WinXP подходящую версию WebKit, а в старших версиях Windows использовать свежий движок
4. Портировать актуальную версию движка на WinXP самостоятельно и использовать её везде

Вопрос стоял непростой. Первый вариант позволял использовать самую свежую версию движка WebKit, но вынудил бы вернуть старую реализацию с Internet Explorer. В таком решении было бы тяжело обеспечивать безошибочную работу программы, а также сам код сильно бы усложнился. Второй вариант обеспечивал одинаковое поведение на всех ОС Windows, однако не оставлял бы нам возможности для развития – обновления движка для исправления ошибок и получения новых возможностей от разработчиков движка в более поздних версиях. Третий вариант позволял задействовать актуальную версию движка в старших версиях Windows, но сильно усложнял логику установки и обеспечение одинакового поведения версий во всех ОС. Четвёртый вариант выглядел предпочтительнее всех остальных, однако было невозможно спрогнозировать сложность и вообще возможность такого решения.

Решили все же рискнуть и реализовать четвертый вариант, самый правильный с архитектурной точки зрения (использование единого исходного кода движка на всех версиях Windows). Портированная версия WebKit по-разному работает в WinXP и более новых версиях Windows:

• Пришлось отказаться от средств нового DirectX (d3d11) в пользу старого DirectX9 (d3d9) и адаптировать его заголовочные файлы к младшей версии SDK.
• Функции из нового SDK при выполнении на новых версиях Windows вызываются по адресу (получаемому через GetProcAddress).
• Для передачи в движке данных между потоками в WinXP используется Thread local storage, в новых версиях — Fiber local storage.

Итог

Итак, теперь у нас в платформе 1С:Предприятие начиная с версии 8.3.14 (релиз — конец 2018 г.) HTML будет поддерживаться по высшему разряду – HTML5, OpenGL и т.д. И количество, и качество изюминок, которые можно привнести в решения на нашей платформе, ограничиваются только фантазией разработчика. И еще, конечно, операционной системой клиента – на WinXP многие вкусные плюшки из HTML5 работать, по понятным причинам, не смогут.

Теперь на Windows приложения на платформе 1С:Предприятие смогут показывать вот такое:

Но, используя «вкусности» HTML в прикладных решениях, не стоит забывать и здравый смысл. Использование HTML целесообразно и рекомендуется для специализированных задач (отображения справки, методик, описаний товаров, …), но не для реализации задач бизнес-логики (ввода/вывода структурированной информации). Для этого нужно использовать штатные механизмы интерфейса 1С:Предприятия, обеспечивающие автоматическую поддержку прав доступа, управления функциональностью, адаптации к форм-фактору устройства, поддержку пользовательских настроек и работу многих других механизмов, без которых полноценная работа бизнес-приложения становится практически невозможной.

Некоторые секреты подключения веб-интерфейса 1C 8.2 / Habr

Работа с альтернативным интерфейсом на управляемых формах 1С доступна через HTML. Альтернативный интерфейс может понадобиться, если стандартных элементов управления 1С недостаточно, но хочется чего-то большего. В данной статье перечислены некоторые секреты работы с веб-интерфейсом на управляемых формах 8.2.

Показ Html-страницы на управляемой форме 1С

Для показа Html-страницы необходимо на форму вставить Поле Html Документа и в источник данных поместить html-код. Нужно иметь ввиду следующее: тонкий и веб-клиент на Internet Explorer работают по-особенному. В двух этих случаях используется Internet Explorer в режиме совместимости с IE 7.
Первый секрет заключается в том, что тонкий клиент можно перевести в режим совместимости с более старшей версией IE. Для этого нужно использовать meta X-UA-Compatible. Так на Windows 7 после добавления

<meta http-equiv="X-UA-Compatible" content="IE=9" >

можно использовать SVG-объекты, например:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle></svg>

Перевести веб-клиент IE на более современную версию совместимости можно, поместив веб-клиент 1С в IFrame и задав в родительском html meta-тэг совместимости. Пример, как это можно сделать показан здесь: habrahabr.ru/post/183016
Но при этом не гарантируется нормальная работа и отображение веб-клиента, поскольку 1С изначально проектировала веб-клиент из расчета совместимости с IE6/7.
Второй секрет заключается в том, что верстка html-макетов в режиме текста без визуального редактора 1С портится после закрытия макета в конфигураторе. Например, если вы вставите svg-определения на html-макете, то после переоткрытия конфигуратора увидите испорченный html (обратите внимание на head-заголовок).

Поэтому, если ваша верстка сложнее, чем показ рисунка, то советую сохранить html-код еще и в другом месте.

Хранение всего подряд в общих картинках

Современная веб-страница не ограничена одним только html. К ней в дополнение идут картинки, js/css-файлы. Традиционный подход допускает хранение и обращение к картинкам, помещенным в общие картинки конфигурации, но с js/css 1С-разработчикам приходится исхитряться. Текстовые файлы или записывают в архив и распаковывают перед показом страницы или целиком помещают в html. Такой подход не задействует встроенный практически в каждый браузер кэш для get-запросов.
Мой опыт состоял в том, чтобы поместить в общие картинки java-скрипт. Этот опыт частично удался, т.е. все браузеры и тонкий клиент запустили jQuery, кроме IE. Если кто-нибудь знает секрет и сможет заставить работать этот способ на IE, прошу, отписаться. Действия необходимо делать следующие:
1. Создать общую картинку и поместить в нее любую картинку
2. На html-макете в режиме редактирования выделить любой текст и через меню Элементы-Ссылка выбрать общую картинку
3. Текст из ссылки вставить в блок script
4. Заменить общую картинку на JavaScript-содержимое

Встроенный фреймворк 1С для веб-клиента

Мало кто знает, что веб-клиент 1С включает в себя фреймворк, упрощающий работу с элементами форм. Фреймворк работает на JavaScript. Обращение к нему возможно через parent.WebUI. функции его требуют дополнительных исследований, но свойства выглядят следующим образом:

В теории этот фреймворк можно задействовать для вызова серверных процедур 1С. В этом случае произойдет полная интеграция html-поля с другими элементами управляемой формы, что повлечет платформенную независимость. Сейчас обратная связь достигается за счет WebBrowser Control, который привязан к Windows.

Ключевое слово __STYLE__

Долго ломал голову, что же означает ключевое слово __STYLE__, которое 1С автоматически подставляет в шаблон пустого html-макета. Но исследования запросов показало, что __STYLE__ ничем не заменяется, и на этот запрос сервер возвращает 500 ошибку: Internal Server Error.

Программное формирование HTML-документа, содержащего ссылки на объекты базы данных 1С. Часть I

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

Предисловие

Однажды, дописывая обработку, создающую и модифицирующую, не суть важно какие документы, я подумал, что неплохо было бы вывести для пользователя некое резюме:
“Создан документ такой-то”
“Изменен документ такой-то” и т.д.
От обычного, в таких случаях, вывода информации в окно сообщений я сразу отказался, так как не удобно это, сначала читать в окне сообщений “Создан документ … ” а потом запоминать его номер, открывать соответствующий журнал (или форму списка) и искать там этот документ. А если документов много и пользователь хочет посмотреть все документы?(или выборочно) Насколько это неудобно я убедился при отладке обработки …
То, что в форме есть элемент управления именуемый ПолеHTMLДокумента я конечно знал, но вот представилась возможность познакомиться с ним поближе. Было решено реестр обработанных документов выводить в виде html документа содержащего ссылки на эти самые документы, а по клику на ссылке открывать форму соответствующего документа. Здесь мне многие могут возразить: “А почему бы для этих целей не использовать обычный макет, выводимый в табличный документ, а для открытия документов использовать расшифровку? И чем Ваш способ лучше?” Отвечаю: Конечно можно использовать, и мой способ ничем не лучше. Он просто другой. Ведь у хорошего программиста для решения одной задачи должно быть в арсенале несколько инструментов.
Итак, перейдем от слов к делу, в рамках данной статьи рассмотрим следующую задачу: Сформировать html-документ, содержащий ссылки на элементы справочника номенклатура, по клику требуется открывать форму соответствующего элемента. Создаем новый отчет, его форму, на форме размещаем элемент управления ПолеHTMLДокумента.

Текст модуля формы:

Процедура ДобавитьТекстHTML(ТекстHTML, Элемент);
    // Ссылку будем формировать хитро:
    // Предполагаем что символ "-" не входит в имена объектов метаданных, 
    // учавствующих в формировании html
    // Тогда ссылка будет иметь следующий вид: 
    // Номенклатура-d341d377-b3b1-11dc-a100-0011d85708ff
    // Передавать нашу ссылку будем через атрибут id
    СсылкаНаЭлемент = Элемент.Метаданные().Имя+"-"
    +Элемент.Ссылка.УникальныйИдентификатор();
    ТекстHTML.ДобавитьСтроку("<A" + СсылкаНаЭлемент + """ href= """ 
    + Элемент + """ >"+Элемент+"</A><BR>");
КонецПроцедуры

Процедура ДействияФормыСформировать(Кнопка)
    Запрос = Новый Запрос("
    |ВЫБРАТЬ
    |    Номенклатура.Ссылка
    |ИЗ
    |    Справочник.Номенклатура КАК Номенклатура");
    ТекстHTML = Новый ТекстовыйДокумент;
    Выборка = Запрос.Выполнить().Выбрать();
    Пока Выборка.Следующий() Цикл
        ДобавитьТекстHTML(ТекстHTML, Выборка.Ссылка);
    КонецЦикла;
ЭлементыФормы.ПолеHTMLДокумента.УстановитьТекст(ТекстHTML.ПолучитьТекст());
КонецПроцедуры

Ну вот html мы сформировали, теперь чтобы ссылки “ожили” надо написать обработчик события OnClick элемента управления ПолеHTMLДокумента.

// Функция получает элемент - <A> по данному элементу
// Производит поиск элемента <A> среди родительских элементов данного
//
// Параметры:
// Элемент - COMОбъект, элемент HTML документа,
// по которому нужно найти ссылку
//
// Возвращаемое значение:
// COMОбъект - если ссылка обнаружена, иначе - Неопределено

Функция НайтиСсылку(Элемент)
    Врем = Элемент;
    Пока Врем <> Неопределено Цикл
        Если НРег(Врем.tagName) = "a" Тогда
            Возврат Врем;
        КонецЕсли;
        Врем = Врем.parentElement;
    КонецЦикла;
    Возврат Неопределено;
КонецФункции    // НайтиСсылку(Элемент)

Процедура ПолеHTMLДокументаonclick(Элемент, pEvtObj)
    htmlElement = НайтиСсылку(pEvtObj.srcElement);
    // Анализируем если произошло нажание не ссылку
    Если htmlElement <> Неопределено Тогда
        // Если у ссылки есть идентификатор
        Если СокрЛП(htmlElement.id) <> "" Тогда
            // Получаем адрес ссылки из атрибута id
            СсылкаНаЭлемент = htmlElement.id;
            Разделитель = Найти(СсылкаНаЭлемент,"-");
            Если Разделитель > 0 Тогда
                // Получаем тип элемента
                ТипЭлемента = Лев(СсылкаНаЭлемент,Разделитель-1);
                // Получаем УникальныйИдентификатор
                ГУИД = Сред(СсылкаНаЭлемент,Разделитель+1);
                Справочники[ТипЭлемента].ПолучитьСсылку(
             Новый УникальныйИдентификатор(ГУИД)).ПолучитьФорму().Открыть();
            КонецЕсли;
            // Не отработали нажатие
            pEvtObj.returnValue = Ложь;
        КонецЕсли;
    КонецЕсли;
КонецПроцедуры

Всё можно пробовать!

Заключение

Обратите внимание что ссылку я формировал следующим образом:
— это сделано для того, чтобы в обработчике onclick можно было определить к какому объекту метаданных относится данный УникальныйИдентификатор, потому что имея ТОЛЬКО УникальныйИдентификатор невозможно определить к какому объекту метаданных он относиться. Точнее возможно, но уж слишком долго и неудобно – путем перебора всех метаданных в цикле, для каждого объекта метаданных выполнять попытку .ПолучитьСсылку(Новый УникальныйИдентификатор(НашУникальныйИдентификатор))
Хотя в нашем примере только один справочник, и указывать его вид было необязательно, и так понятно что это УникальныйИдентификатор элемента справочника Номенклатура, но вдруг Вам потребуется работать с несколькими справочниками, вот тут то мой способ задания ссылки Вам и пригодится.
P.S. Платформа 8.2 имеет встроенный механизм работы со ссылками на объекты БД и данная задача наверняка упростится, но это уже другая тема.

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

Категории: Полезные технологии разработки в 1С. Автор Администратор
2 комментариев »

Оставить комментарий

HTML-редактор в 1С Предприятии

В 1С Предприятии для работы с html документами реализован специальный редактор, который позволяет просматривать и редактировать HTML. Это простой редактор, который содержит самые основные возможности для работы с html документами. HTML редактор содержит три вкладки: редактирование, текст, просмотр. При хороших знаниях html верстки, можно создавать документы различной степени сложности на вкладке «Текст». Для создания простых документов достаточно вкладки «Редактирование». Результат можно посмотреть на вкладке «Просмотр».

Открыть редактор можно в 1С Предприятии или Конфигураторе.
Для этого нужно перейти в главном меню: Файл->Новый->HTML документ

Вкладка «Редактирование»

На этой вкладке отображается визуальное представление html документа. Редактирование осуществляется с помощью привычной панели инструментов для редактирования текста. Для текста можно установить: размер, стиль, цвет, заливку цветом, позиционирование. Для того чтобы применить настройку достаточно выделить часть текста и нажать в панели инструментов требуемое действие. Можно вставить таблицу через главное меню Таблица->Вставить таблицу… При этом на вкладке «Редактирование» не происходит работы непосредственно с html кодом.

Вкладка «Текст»

Вкладка текст содержит исходный html-код документа. Для редактирования необходимо обладать знаниями в html верстке.

Вкладка «Просмотр»

На данной вкладке можно посмотреть как будет выглядеть html документ в браузере или в другой программе для просмотра html документов.