7.4. 加载和显示图片

我们看看加载、存储和显示员工图片的任务：

• 员工由 Employee 实体表示。

• 图片文件存储在 FileStorage 中。Employee 实体包含指向相应 FileDescriptor 的链接。

• Employee 编辑界面显示图片，还支持上传，下载和清除图片。

带有图片文件链接的实体类：

@Table(name = "SAMPLE_EMPLOYEE")
@Entity(name = "sample$Employee")
public class Employee extends StandardEntity {
...
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "IMAGE_FILE_ID")
    protected FileDescriptor imageFile;
    public void setImageFile(FileDescriptor imageFile) {
        this.imageFile = imageFile;
    }
    public FileDescriptor getImageFile() {
        return imageFile;
    }
}

同时加载 Employee 和 FileDescriptor 的视图需要包含 FileDescriptor 的所有本地属性：

<view entity="demo_Employee"
      name="employee-edit"
      extends="_local">
    <property name="imageFile"
              view="_local"/>
</view>

Employee 编辑界面 XML 描述的一个片段：

<groupBox caption="Photo" spacing="true"
          height="300px" width="300px" expand="image">
    <image id="image"
           width="100%"
           align="MIDDLE_CENTER"
           scaleMode="CONTAIN"/>
    <hbox align="BOTTOM_LEFT"
          spacing="true">
        <upload id="uploadField"/>
        <button id="downloadImageBtn"
                caption="Download"
                invoke="onDownloadImageBtnClick"/>
        <button id="clearImageBtn"
                caption="Clear"
                invoke="onClearImageBtnClick"/>
    </hbox>
</groupBox>

用于显示、上传和下载图片的组件包含在 groupBox 容器中。容器顶部使用 image 组件显示一张图片，而它的底部从左到右包含上传控件以及下载和清除图片的按钮。因此，界面的这一部分如下所示：

现在，现在我们来看看编辑界面控制器。

import com.company.sales.entity.Employee;
import com.haulmont.cuba.core.entity.FileDescriptor;
import com.haulmont.cuba.core.global.DataManager;
import com.haulmont.cuba.core.global.FileStorageException;
import com.haulmont.cuba.gui.Notifications;
import com.haulmont.cuba.gui.components.Button;
import com.haulmont.cuba.gui.components.FileDescriptorResource;
import com.haulmont.cuba.gui.components.FileUploadField;
import com.haulmont.cuba.gui.components.Image;
import com.haulmont.cuba.gui.export.ExportDisplay;
import com.haulmont.cuba.gui.export.ExportFormat;
import com.haulmont.cuba.gui.model.InstanceContainer;
import com.haulmont.cuba.gui.screen.*;
import com.haulmont.cuba.gui.upload.FileUploadingAPI;
import javax.inject.Inject;
@UiController("sales_Employee.edit")
@UiDescriptor("employee-edit.xml")
@EditedEntityContainer("employeeDc")
@LoadDataBeforeShow
public class EmployeeEdit extends StandardEditor<Employee> {
    @Inject
    private InstanceContainer<Employee> employeeDc;
    @Inject
    private Image image;
    @Inject
    private FileUploadField uploadField;
    @Inject
    private FileUploadingAPI fileUploadingAPI;
    @Inject
    private DataManager dataManager;
    @Inject
    private Notifications notifications;
    @Inject
    private Button downloadImageBtn;
    @Inject
    private Button clearImageBtn;
    @Subscribe
    protected void onInit(InitEvent event) { (1)
        uploadField.addFileUploadSucceedListener(uploadSucceedEvent -> {
            FileDescriptor fd = uploadField.getFileDescriptor(); (2)
            try {
                fileUploadingAPI.putFileIntoStorage(uploadField.getFileId(), fd);
            } catch (FileStorageException e) {
                throw new RuntimeException("Error saving file to FileStorage", e);
            }
            getEditedEntity().setImageFile(dataManager.commit(fd)); (3)
            displayImage(); (4)
        });
        uploadField.addFileUploadErrorListener(uploadErrorEvent ->
                notifications.create()
                        .withCaption("File upload error")
                        .show());
        employeeDc.addItemPropertyChangeListener(employeeItemPropertyChangeEvent -> { (5)
            if ("imageFile".equals(employeeItemPropertyChangeEvent.getProperty()))
                updateImageButtons(employeeItemPropertyChangeEvent.getValue() != null);
        });
    }
    @Subscribe
    protected void onAfterShow(AfterShowEvent event) { (6)
        displayImage();
        updateImageButtons(getEditedEntity().getImageFile() != null);
    }
    public void onDownloadImageBtnClick() { (7)
        if (getItem().getImageFile() != null)
            exportDisplay.show(getItem().getImageFile(), ExportFormat.OCTET_STREAM);
    }
    public void onClearImageBtnClick() { (8)
        getEditedEntity().setImageFile(null);
        displayImage();
    }
    private void updateImageButtons(boolean enable) {
        downloadImageBtn.setEnabled(enable);
        clearImageBtn.setEnabled(enable);
    }
    private void displayImage() { (9)
        if (getEditedEntity().getImageFile() != null) {
            image.setSource(FileDescriptorResource.class).setFileDescriptor(getEditedEntity().getImageFile());
            image.setVisible(true);
        } else {
            image.setVisible(false);
        }
    }
}