image

ДЕМО

image предназначен для отображения изображений из различных источников. Компонент может быть привязан к контейнеру данных или настроен программно.

XML-элемент

image

Java-класс

JmixImage

Атрибуты

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

Обработчики

AttachEvent - ClickEvent - DetachEvent

Основы

Изображение может быть представлено как атрибут сущности типа FileRef или byte[]. В примере ниже атрибут picture сущности User является ссылкой на файл в файловом хранилище:

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

}

Для отображения изображения, предоставляемого этим атрибутом, укажите его в компоненте. Для этого задайте атрибуты dataContainer и property.

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

Ресурсы

Кроме того, компонент image может отображать изображения из различных ресурсов. Вы можете задать тип ресурса декларативно с помощью вложенных XML-элементов, описанных ниже, или программно с помощью метода setSrc().

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

Изображение может быть предоставлено приложением статически.

По умолчанию статический контент загружается из каталогов /static, /public, /resources или /META-INF/resources в classpath (подробности смотрите в документации Spring Boot).

  • В XML:

    Если ваше изображение находится в /src/main/resources/META-INF/resources, например, /src/main/resources/META-INF/resources/icons/icon.png, вы можете указать ресурс следующим образом:

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

  • В Java:

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

Ресурс URL

Аналогично, изображение может быть загружено из произвольного URL.

  • В XML:

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

  • В Java:

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

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

Изображение может быть получено из потока InputStream.

  • В Java: интерфейс StreamResource.

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

Атрибуты

В Jmix существует множество общих атрибутов, которые служат одной цели для всех компонентов.

Следующие атрибуты специфичны для image:

Название

Описание

Значение по умолчанию

alternateText

Задает альтернативный текст для изображения на случай, если ресурс не задан или недоступен.

-

resource

Указывает расположение изображения. Смотрите ресурсы.

-

themeNames

Добавляет тему к компоненту. Возможные значения: fill, contain, cover, scale-down.

-

Обработчики

В Jmix существует множество общих обработчиков, которые настраиваются одинаково для всех компонентов.

Следующие обработчики специфичны для image:

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

Название

Описание

ClickEvent

com.vaadin.flow.component.ClickEvent возникает при клике на компонент. Этот обработчик должен указывать один из трех субъектов для определения количества кликов:

click – событие возникает при любом клике на компонент.

singleClick – событие возникает после таймаута, чтобы убедиться, что это не двойной клик.

doubleClick – событие возникает при двойном клике на компонент.