html

Jmix включает в себя набор HTML-компонентов для стандартных HTML-элементов. Если подходящий компонент отсутствует, или вы хотите включить нативный HTML напрямую, используйте компонент html. Он может отображать HTML, предоставленный в виде строки, CDATA или файла.

  • XML-элемент: html

  • Java-класс: Html

Основы

Этот элемент предназначен для встраивания HTML в структуру XML. Он позволяет встраивать отдельные HTML-элементы или блоки HTML-кода. Блок должен состоять из одного корневого элемента, такого как <header>, <footer>, <main> или <div>. Внутри этого корневого элемента может быть любое количество вложенных элементов <div> для эффективной структуризации содержимого.

Обратите внимание, что разработчик несет ответственность за очистку и удаление любых опасных частей HTML перед отправкой его пользователю через этот компонент. Передача необработанных входных данных пользователю может привести к межсайтовым скриптовым атакам (XSS).

Пакет сообщений

Этот пример демонстрирует, как добавить HTML-контент через строку в пакете сообщений:

html basic
<html content="msg://html.content"/>
messages.properties
com.company.onboarding.view.component.html/html.content=\
<main>\
  <h1>Main Content</h1>\
  <p>This is the main content area.</p>\
    <div>\
      <h2>Section 1</h2>\
      <p>This is the first section of the main content.</p> \
    </div>\
    <div>\
      <h2>Section 2</h2>\
      <p>This is the second section of the main content.</p>\
    </div>\
</main>

Символьные данные

Тот же HTML-блок можно добавить внутри секции CDATA (Character Data):

<html id="html">
    <content>
        <![CDATA[
        <main>
            <h1>Main Content</h1>
            <p>This is the main content area.</p>
            <div>
                <h2>Section 1</h2>
                <p>This is the first section of the main content.</p>
            </div>
            <div>
                <h2>Section 2</h2>
            <p>This is the second section of the main content.</p>
            </div>
        </main>
    ]]>
    </content>
</html>

Содержимое файла

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

Статический ресурс

Файл может обслуживаться приложением статически. Если ваш файл находится по адресу /src/main/resources/META-INF/resources/html/html-file.html, укажите его следующим образом:

<html id="staticHtml" file="META-INF/resources/html/html-file.html"/>
По умолчанию статическое содержимое обслуживается из каталогов /static, /public, /resources или /META-INF/resources в classpath. Подробности смотрите в документации Spring Boot.

Потоковый ресурс

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

Компонент нельзя создать с помощью бина UiComponents, так как он не предоставляет конструктор без аргументов.
protected static final String SRC_PATH = "META-INF/resources/html/html-file.html";
@Autowired
private Resources resources;

@Subscribe
public void onInit(final InitEvent event) {
    InputStream resourceAsStream = resources.getResourceAsStream(SRC_PATH);
    Html html = new Html(resourceAsStream);
}

CSS-свойства

Используйте атрибут css для добавления CSS-свойств декларативно:

<html file="META-INF/resources/html/html-file.html" css="background-color: grey;"/>

Альтернативно, вы можете добавить пользовательские CSS-стили в теме приложения.

Атрибуты

content

Указывает HTML-контент, который будет отображаться компонентом либо в виде строки в пакете сообщений, либо внутри секции CDATA.

file

Указывает путь к файлу, из которого следует получить HTML-код.

Обработчики

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню CodeGenerate (Alt+Insert / Cmd+N).