html

LIVE DEMO

Jmix includes a set of HTML components for standard HTML elements. If no suitable component is included, or you want to include native HTML directly, use the html component. It can render HTML provided as a string, CDATA, or file.

  • XML element: html

  • Java class: Html

Basics

This example demonstrates how to add HTML content via a string in a message bundle:

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>

The same HTML block can be added within a CDATA (Character Data) section:

<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>

This ensures that your HTML code will not be interpreted as part of the XML, allowing it to be displayed correctly.

The block must contain exactly one root element such as <header>, <footer>, <main>, or <div>. Inside the root element can be any number of nested <div> elements to structure the content.

File Content

The code for HTML block can be also obtained from a file using one of the following methods.

Static Resource

The file can be served statically by the application.

By default, static content is served from /static, /public, /resources, or /META-INF/resources directories of the classpath. See details in the Spring Boot documentation.

If your file is located at /src/main/resources/META-INF/resources/html/html-file.html, specify it as follows:

<html id="staticHtml" file="META-INF/resources/html/html-file.html"/>

Stream Resource

The HTML code can be supplied as a file through the InputStream and then the component can be initialized by passing it in.

The component cannot be created using the UiComponents bean, as it does not provide a no-arguments constructor. 
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 Properties

Use the css attribute to add CSS properties declaratively:

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

Alternatively, you can add custom CSS styling within the application’s theme.

Attributes

id - alignSelf - classNames - colspan - content - css - file - visible

content

Specifies the HTML content to be rendered by the component, either as a string in a message bundle or within a CDATA section.

file

Specifies the file path to retrieve the HTML code from.

Handlers

AttachEvent - DetachEvent

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).