Перейти к содержанию

Блок "HTML-статика"

Блок доступен начиная с версии 0.10

Назначение блока

Блок предназначен для отображения статического HTML-содержимого на пресете.

Позволяет:

  • размещать произвольную HTML-разметку;
  • применять CSS-стили для оформления.

Используется:

  • когда нужна гибкая верстка, не предусмотренная стандартными визуализаторами;
  • для создания информационных блоков, панелей, подсказок;
  • для встраивания ссылок, изображения, кнопок.

Tip

Ограничение: содержимое не обновляется автоматически — только при пересчете блока.

Не может содержать шаблоны Jinja. Для шаблонов используется Блок "HTML-шаблон".

Для начала работы с блоком его необходимо выбрать в библиотеке блоков и перенести в область графа.

Настройки блока

Для работы с настройками блока необходимо открыть локальное меню и выбрать пункт Настройки:

Общие настройки блоков описаны в отдельном разделе.

Раздел "HTML статика"

Наименование Тип Обязательное Описание Пример
Содержимое HTML Строка (HTML) Нет Код html, который будет отображен в визуализаторе. Может включать в себя стили css.
Разрешать копировать текст Флаг Да Определяет разрешение копирования содержимого в визуализаторе при отображении пользователю
Строгая валидация HTML Флаг Нет Включает строгую валидацию HTML: в случае ошибки валидации блок выдаст ошибку. По умолчанию будет выдано предупреждение.
Пример HTML кода 
<style>
    .my_h1 {color:red;}
    .my_p {color:blue;}
</style>

<h1 class="my_h1">A heading</h1>

<p class="my_p">A paragraph.
<a goto="b65e11ba-fa0a-450e-8e43-a5d1e34183a3">Диаграмма 3</a>
</p>

Входы блока

Общие настройки входов блока описаны в отдельном разделе.

Название входа Тип Обязательный Описание
Данные для отображения Строка (HTML) Нет HTML-код в виде строки, который необходимо отобразить в визуализаторе.

При передаче данных на этот вход содержимое поля настроек "Содержимое HTML" игнорируется при расчете.

Выходы блока

Общие настройки выходов блока описаны в отдельном разделе.

Название входа Тип Обязательный Описание
HTML (Строка) Строка Нет HTML-код в виде строки, отображаемый на визуализаторе

Если на вход пришел массив с несколькими HTML, то в выходе будет отображен только первый из них.

События блока

В блоке нет событий

Описание работы блока

Блок "HTML-статика" предназначен для размещения в пользовательском приложении произвольной html-верстки. Верстка может быть задана как статично прямо в блоке (настройка "Содержимое HTML"), так и передана на вход "Данные для отображения". В случае, если верстка передана через вход, содержимое настройки блока будет игнорироваться, даже если заполнено. В HTML-коде допускается использование CSS-стилей, однако разработчик должен контролировать область их применения. Например, при переопределении стиля границ для всех таблиц (border-style) изменения затронут все таблицы на странице, поскольку браузер интерпретирует такие стили как глобальные для всей страницы.

После расчета блока HTML-код передается в визуализатор в неизменном виде. Поддерживаются стандартные HTML-конструкции, а также вставка медиаконтента (изображения, видео, аудио)..

На вход блока можно передать статичный HTML-код (например, из блока «Python»). Это позволяет генерировать содержимое «на лету» — в ответ на события от других блоков или при открытии страницы пользователем.

Info

Дополнительно:

В HTML-коде можно создавать гиперссылки, при клике на которые выполняется переход на указанный визуализатор. Для этого используется специальный тег goto с указанием идентификатора (GUID) целевого визуализатора.

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

Пример ссылки на визуализатор 
<ul>
    <a goto="0722f50b-ea85-440c-8337-e9a399e96d21">Диаграмма 1</a>
</ul>

<ul>
    <a goto="02496f8b-baf1-4ec0-8be9-45314dd843fe">Диаграмма 2</a>
</ul>

<ul>
    <a goto="b65e11ba-fa0a-450e-8e43-a5d1e34183a3">Диаграмма 3</a>
</ul>

Валидация HTML

В блоке расположен валидатор HTML и санитайзер, которые, в случае некорректного HTML на входе, выдадут соответствующие ошибки (код ошибки 141 для валидатора и код ошибки 152 для санитайзера). HTML имеет сложную структуру, поэтому не все ошибки могут быть обнаружены. Например, встроенный валидатор не проверяет наличие закрывающих тегов. Для более полной и корректной проверки рекомендуется использовать сторонние сервисы (validator.w3.org).

Подробнее о санитайзере можно узнать здесь

Описание работы визуализатора

  • Представляет собой контейнер для отображения пользовательского html-кода;
  • Доступен в режиме отладки графа;
  • Поддерживает выделение содержимого мышью.

Настройки визуализатора

Визуализатор не имеет специфических настроек. Общий список доступен на странице Настройки визуализаторов

Полезные ссылки

Дополнительно

Блок не поддерживает шаблонизацию.