SAP CAP篇十一：支持Media Object：图片、附件等

本系列文章

SAP CAP篇一: 快速创建一个Service，基于Java的实现
SAP CAP篇二：为Service加上数据库支持
SAP CAP篇三：定义Model
SAP CAP篇四：为CAP添加Fiori Elements程序(1)
SAP CAP篇五：为CAP添加Fiori Elements程序(2)
SAP CAP篇六：为CAP添加Fiori Elements程序(3)
SAP CAP篇七：为CAP添加Fiori Launchpad入口 (Sandbox环境)
SAP CAP篇八：为CAP添加App Router并支持Fiori Launchpad (Sandbox环境)
SAP CAP篇九：升级为SAP CDS 7.0, CAP Java 2以及Spring Boot 3
SAP CAP篇十：理解Fiori UI的Annoation定义
SAP CAP篇十一：支持Media Object：图片、附件等
SAP CAP篇十二：AppRouter 深入研究

官方文档

官方文档关于Media Object：链接

详细修改

更新数据库

虽然一直以来，使用关系型数据库来存储Media data并不是很适合。但是本篇只是学习用途，所以这里将其存储在关系型数据库。

如果只是在数据库中存储URL，参见官方文档的示例（如下）：

entity Books { //...
  imageUrl  : String @Core.IsURL @Core.MediaType: imageType;
  imageType : String @Core.IsMediaType;
}

本篇中，更新数据库如下：

entity Books { //...
    image : LargeBinary @Core.MediaType: imageType @Core.ContentDisposition.Filename: fileName;
    fileName : String;
    imageType : String  @Core.IsMediaType;
}

修改Annotation使其显示在Object Page上

将新增加的三个Field归类为一个Facet（标题为Attachment）。

更新App文件夹中的Manage Books的fiori-service.cds文件：

annotate service.Books with @(

    UI.FieldGroup #GeneratedGroup2 : {
        $Type : 'UI.FieldGroupType',
        Data : [
            {
                $Type : 'UI.DataField',
                Value : image,
            },
        ],
    },
    UI.Facets : [

        {
            $Type : 'UI.ReferenceFacet',
            ID : 'GeneratedFacet2',
            Label : 'Attachment',
            Target : '@UI.FieldGroup#GeneratedGroup2',
        },
    ]
);

运行结果

Fiori Object Page上的Attachment Facet

创建新Object时，运行效果为：

选择完文件后的UI效果

点击’Upload’按钮并选择任意文件后，其显示效果为：

前台与后台的交互

这时，观察前台和后台的交互，其具体的交互如下：

2023-07-25T22:44:06.409+08:00  INFO 24008 --- [nio-8080-exec-5] c.sap.cds.adapter.odata.v4.BatchAccess   : $batch POST /Books 201
2023-07-25T22:44:06.501+08:00  INFO 24008 --- [nio-8080-exec-6] c.sap.cds.adapter.odata.v4.BatchAccess   : $batch GET /Books(ID=cfbfa76b-a3a3-4ba5-98e1-ca2d897e70a0,IsActiveEntity=false)?$select=HasActiveEntity,HasDraftEntity,ID,IsActiveEntity,category_ID,currency_code,descr,fileName,image,imageType,price,stock,title&$expand=DraftAdministrativeData($select=DraftIsCreatedByMe,DraftUUID,InProcessByUser),category($select=ID,name) 200
2023-07-25T22:44:08.774+08:00  INFO 24008 --- [nio-8080-exec-7] c.sap.cds.adapter.odata.v4.BatchAccess   : $batch PATCH /Books(ID=cfbfa76b-a3a3-4ba5-98e1-ca2d897e70a0,IsActiveEntity=false) 204
2023-07-25T22:44:11.075+08:00  INFO 24008 --- [nio-8080-exec-8] c.sap.cds.adapter.odata.v4.BatchAccess   : $batch GET /Currencies?$select=code,name&$count=true&$orderby=code&$skip=0&$top=59 200
2023-07-25T22:45:05.447+08:00  INFO 24008 --- [nio-8080-exec-2] c.sap.cds.adapter.odata.v4.BatchAccess   : $batch PATCH /Books(ID=cfbfa76b-a3a3-4ba5-98e1-ca2d897e70a0,IsActiveEntity=false) 204
2023-07-25T22:45:05.450+08:00  INFO 24008 --- [nio-8080-exec-2] c.sap.cds.adapter.odata.v4.BatchAccess   : $batch GET /Books(ID=cfbfa76b-a3a3-4ba5-98e1-ca2d897e70a0,IsActiveEntity=false)?$select=filename, image 200

对应代码及branch

与本文配套的代码参见这里。

本篇对应的branch是7_mediadata。