3.5.2.1.21. 图片组件

在线示例

API 文档

Image 图片组件可以显示不同源的图片。可以绑定到数据容器或通过代码设置。

该组件的 XML 名称为: image

Image 图片组件可以显示实体属性为 FileDescriptorbyte[] 类型的数据。下面是一个简单的通过 dataContainerproperty 属性设置图片的例子:

  1. <image id="image" dataContainer="employeeDc" property="avatar"/>

该组件展示 employeeDc 数据容器中 Employee 实体的 avatar 属性。

Image 图片组件还可以展示其它源的图片。可通过以下 image 的元素设置不同的源类型:

  • classpath - classpath 中的某个资源

    1. <image>
    2. <classpath path="com/company/sample/web/screens/myPic.jpg"/>
    3. </image>
  • file - 文件系统中的某个资源

    1. <image>
    2. <file path="D:\sample\modules\web\web\VAADIN\images\myImage.jpg"/>
    3. </image>
  • relativePath - 应用程序目录中的某个资源

    1. <image>
    2. <relativePath path="VAADIN/images/myImage.jpg"/>
    3. </image>
  • theme - 主题资源,例如 VAADIN/themes/customTheme/some/path/image.png

    1. <image>
    2. <theme path="com.company.sample/myPic.jpg"/>
    3. </image>
  • url - 可以从指定 URL 加载的资源

    1. <image>
    2. <url url="https://www.cuba-platform.com/sites/all/themes/cuba_adaptive/img/lori.png"/>
    3. </image>

image 图片组件的属性:

  • scaleMode - 缩放模式,有以下几种模式可选:

    • FILL - 根据组件大小拉伸图片。

    • CONTAIN - 保留长宽比压缩图片到能刚好在组件中全部展示。

    • SCALE_DOWN - 在 NONECONTAIN 中选择图片能全部展示并且尺寸最小的方式。

    • NONE - 按实际大小显示。

  • alternateText - 设置替换文本,当资源未设置或找不到时显示该文本。

    1. <image id="image" alternateText="logo"/>

image 资源设置:

  • bufferSize - 下载该资源时的缓存大小,以字节为单位。

    1. <image>
    2. <file bufferSize="1024" path="C:/img.png"/>
    3. </image>
  • cacheTime - 该资源缓存过期时间,以毫秒为单位。

    1. <image>
    2. <file cacheTime="2400" path="C:/img.png"/>
    3. </image>
  • mimeType - 该资源的 MIME 类型。

    1. <image>
    2. <url url="https://avatars3.githubusercontent.com/u/17548514?v=4&#38;s=200"
    3. mimeType="image/png"/>
    4. </image>

Image 图片组件接口的方法:

  • setDatasource() - 设置图片数据源类型,只支持 FileDescriptorbyte[] 两种类型。

    数据源可以通过编辑的方式设置,比如在表单元格中显示图片:

    1. frameworksTable.addGeneratedColumn("image", entity -> {
    2. Image image = uiComponents.create(Image.NAME);
    3. image.setDatasource(frameworksTable.getItemDatasource(entity), "image");
    4. image.setHeight("100px");
    5. return image;
    6. });

    gui Image 1

  • setSource() - 设置图片源内容。输入源类型,返回源对象,并继续通过流式接口配置源内容。每种源类型都有各自设置源内容的方法,比如 ThemeResource 主题源用 setPath()StreamResource 流资源用 setStreamSupplier()

    1. Image image = uiComponents.create(Image.NAME);
    2. image.setSource(ThemeResource.class)
    3. .setPath("images/image.png");

    或:

    1. image.setSource(StreamResource.class)
    2. .setStreamSupplier(() -> new FileDataProvider(fileDescriptor).provide())
    3. .setBufferSize(1024);

    使用以下实现了 Resource 接口的资源类型,或者通过扩展它实现自定义资源:

    • ClasspathResource - 位于 classpath 中的图片. 这类资源还可以通过 image 组件的 classpath 元素以声明的方式设置。

    • FileDescriptorResource - 通过 FileDescriptorFileStorage 中获取的图片。

    • FileResource - 文件系统中的图片。这类资源还可以通过 image 组件的 file 元素以声明的方式设置。

    • RelativePathResource - 应用程序中的图片。这类资源还可以通过 image 组件的 relativePath 元素以声明的方式设置。

    • StreamResource - 来自于流的图片。

    • ThemeResource - 主题的图片,比如 VAADIN/themes/yourtheme/some/path/image.png。这类资源还可以通过 image 组件的 theme 元素以声明的方式设置。

    • UrlResource - 从 URL 中加载的图片。这类源还可以通过 image 组件的 url 元素以声明的方式设置。

  • createResource() - 根据图片源类型创建图片资源。创建的对象可以传入 setSource() 方法。

    1. FileDescriptorResource resource = image.createResource(FileDescriptorResource.class)
    2. .setFileDescriptor(avatar);
    3. image.setSource(resource);
  • addClickListener() - 设置点击图片区域的监听器。

    1. image.addClickListener(clickEvent -> {
    2. if (clickEvent.isDoubleClick())
    3. notifications.create()
    4. .withCaption("Double clicked")
    5. .show();
    6. });
  • addSourceChangeListener() - 设置图片源改变的监听器。

Image 图片组件的属性列表

align - alternateText - caption - captionAsHtml - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - datasource - description - descriptionAsHtml - editable - enable - box.expandRatio - height - icon - id - property - required - requiredMessage - responsive - rowspan - scaleMode - stylename - stylename - visible - width

Image resources 图片源的属性列表

bufferSize - cacheTime - mimeType

Image 图片组件的元素

classpath - file - relativePath - theme - url

API

addClickListener - addSourceChangeListener - createResource - setScaleMode - setDatasource - setSource