image

LIVE DEMO

image is designed to display images from different sources. The component can be bound to a data container or configured programmatically.

  • XML element: image

  • Java class: JmixImage

Basics

An image can be represented as an entity attribute of FileRef or byte[] type. In the example below, the picture attribute of the User entity is a reference to a file in file storage:

@JmixEntity
@Entity
@Table(name = "USER_", indexes = {
        @Index(name = "IDX_USER__ON_USERNAME", columnList = "USERNAME", unique = true),
        @Index(name = "IDX_USER__DEPARTMENT", columnList = "DEPARTMENT_ID")
})
public class User implements JmixUserDetails, HasTimeZone {

    /* other attributes */

    @Column(name = "PICTURE", length = 1024)
    private FileRef picture;

}

To display the image provided by this attribute, specify it in the component. For that, specify the data container and property attributes.

<data readOnly="true">
    <instance id="userDc" class="com.company.onboarding.entity.User" >
        <fetchPlan extends="_base"/>
        <loader id="userDl">
            <query>
                <![CDATA[select u from User u where u.username = 'bob']]>
            </query>
        </loader>
    </instance>
</data>
<facets>
    <dataLoadCoordinator auto="true"/>
</facets>
<layout>
        <image id="fileRefImage"
               dataContainer="userDc"
               property="picture"/>
</layout>

Resources

Alternatively, the image component can display images from different resources. You can set the resource type declaratively using the nested XML elements described below, or programmatically using the setSrc() method.

Static Resource

An image 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).

  • In XML:

    For example, if your image is located under /src/main/resources/META-INF/resources, such as /src/main/resources/META-INF/resources/icons/icon.png, you can specify the resource as follows:

    <image id="staticImage" resource="icons/icon.png"/>

  • In Java:

    image.setSrc("icons/icon.png");

URL Resource

Similarly, an image can be loaded from an arbitrary URL.

  • In XML:

    <image id="urlImage"
       resource="https://www.jmix.io/uploads/framework_image_9efadbc372.svg"/>

  • In Java:

    image.setSrc("https://www.jmix.io/uploads/framework_image_9efadbc372.svg");

Stream Resource

An image can be provided by an InputStream.

  • In Java: StreamResource interface.

    StreamResource streamResource = new StreamResource("icon",
        ()-> getClass().getResourceAsStream("/META-INF/resources/icons/icon.png"));
image.setSrc(streamResource);

Attributes

id - alignSelf - alternateText - ariaLabel - classNames - colspan - dataContainer - enabled - height - maxHeight - maxWidth - minHeight - minWidth - property - resource - text - themeNames - title - visible - whiteSpace - width

alternateText

Sets an alternate text for an image in case the resource is not set or unavailable.

ariaLabel

MDN

Sets a separate, visually hidden label for accessibility technologies, such as screen readers.

resource

Specifies the resource from which the image is obtained.

themeNames

Adds a theme to the component. Possible values are:

  • fill

  • contain

  • cover

  • scale-down

whiteSpace

MDN

Defines the component’s white-space style value. Possible values are:

  • NORMAL

  • NOWRAP

  • PRE

  • PRE_WRAP

  • PRE_LINE

  • BREAK_SPACES

  • INHERIT

  • INITIAL

Handlers

AttachEvent - ClickEvent - 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).

ClickEvent

com.vaadin.flow.component.ClickEvent is sent when the user clicks on the image.