image 图片

在线示例

image 用户展示不同来源的图片。该组件可以与 数据容器 绑定或通过编程的方式设置。

XML 元素

image

Java 类

JmixImage

XML 属性

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[] 类型的实体属性。下面的示例中，User 实体的 picture 属性关联 文件存储 中的某个文件：

@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() 方法编程式设置。

静态资源

应用程序可以提供静态图片地址。

默认情况下，静态内容在 classpath 的 /static、/public、/resources 或 /META-INF/resources 文件夹（详情请参考： 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);

XML 属性

在 Jmix 中，所有组件都有一些作用一致的 通用属性。 下面是 image 的特殊属性：

名称

描述

默认值

alternateText

设置图片的替代文本。如果图片资源未设置或不可用。

-

resource

设置图片的资源位置。参阅 资源。

-

themeNames

为组件添加一个样式版本。支持：fill、contain、cover、scale-down。

-

事件和处理器

在 Jmix 中，所有组件都有一些 通用事件和处理器，可以按相同的方法设置。 下面是 image 的特殊事件和处理器：

在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。

名称

描述

ClickEvent

当点击组件时触发 com.vaadin.flow.component.ClickEvent 事件。该事件的处理方法需要指定处理的是以下哪种点击事件：

click – 当用户点击组件时触发。

singleClick – 当用户在单击组件一小段时间后会（确保不是双击）触发。

doubleClick – 当用户在短时间内点击组件两次时触发。