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

Attributes

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

Handlers

AttachEvent - ClickEvent - DetachEvent

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

In Jmix there are many common attributes that serve the same purpose for all components. The following are attributes specific to span:

Name

Description

Default

alternateText

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

-

resource

Specifies the location of the image. See resources.

-

themeNames

Adds a theme to the component. Possible values: fill, contain, cover, scale-down.

-

Handlers

In Jmix there are many common handlers that are configured in the same way for all components. The following are handlers specific to image:

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

Name

Description

ClickEvent

The com.vaadin.flow.component.ClickEvent is fired when the component is clicked. This handler must specify one of the three subjects to detect the number of clicks:

click – fires the event whenever the component is clicked.

singleClick – fires the event after a timeout to ensure it is not a double click.

doubleClick – fires the event when the component is double-clicked.