image 图片

在线示例

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

  • XML 元素：image

  • Java 类：JmixImage

基本用法

图片可以作为 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 属性

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

alternateText

设置替换文本，当资源未设置或加载失败时展示。

ariaLabel

MDN

设置一个单独的用于辅助功能的隐形标签，比如用于屏幕阅读器。

resource

设置图片的资源。

themeNames

为组件添加主题。支持：

  • fill

  • contain

  • cover

  • scale-down

whiteSpace

MDN

定义组件的 white-space 样式值。支持：

  • NORMAL

  • NOWRAP

  • PRE

  • PRE_WRAP

  • PRE_LINE

  • BREAK_SPACES

  • INHERIT

  • INITIAL

事件和处理器

AttachEvent - ClickEvent - DetachEvent

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

ClickEvent

com.vaadin.flow.component.ClickEvent 在用户点击时发送。