SAPUI5 (30) - OData 中 Image 的显示和编辑 (上)

2024-02-05 13:48
文章标签 显示 编辑 30 image odata sapui5

本文主要是介绍SAPUI5 (30) - OData 中 Image 的显示和编辑 (上),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

数据库中对图片的保存可以采取二进制格式,也就是我们平常所说的 blob 类型 ( Binary large object)。当图片使用 blob 类型来存储的时候,OpenUI5 如何处理据呢? 本篇就来作一个详细介绍。

使用 sap.m.Image 来显示图片

一般情况下,可以设置 sap.m.Imagesrc 属性,来显示一个本机或者网络的图片,比如:

var image = new sap.m.Image({src: "http://sap.github.io/openui5/images/icotxt_white_220x72_blue_open.png"
});

也可以把图片二进制文件通过 Base64 来编码,变成一个字符串,sap.m.Image 支持这种基于 Base64 编码的格式:

var oDataImage = new sap.m.Image({src: "data:image/gif;base64,R0lGODlhHwAeANU/AO1SReW2N+14Kf3YACOAulrAWtTW02Gh1uPIx/BkVFXKXu3t7bjZuoi9R7nV8fbOG8fBulSlWvh8ZlW0WvTu0aG8QqK92sGkdcWjoPr5+WyrUUaiV7q0oHWs2vrTCYOeiJ94QulCOYK34ceNifHEJfLWRuLf3tomHUWUzeQxLf/cDc1+dtzCOqKzo83o92mxbPSSjP/ohspCL2K1WG7Ga+k5NIGfWcbKKcu5ceTPBvDKAJfRkIyvjVvEXeV4af///yH5BAEAAD8ALAAAAAAfAB4AAAb/wJ9wSPwtDBCMEmJYFJ/QXwYx8kmuWIlvBMlEoaZVIptNmBMrw5eIObvfZkACgFn/MIA8/J3vj74jfYJycYMAIYh/TxCIiIaGjYg1NRBFCzYhNZGbk42TNSmhmiZELQogKZ+SNQkwrhICsbKzF0MLLwozMqmTKQAICy7CCxQlOg8PHh4DAyoPTj8QPQWnoikJCw4i29sOGSXKzOIqlT88CgXTuykhJg4HHdwdBxYUKuLjOFIv09Q2JydguIDXoaDBAw5i4GOmgkWGW/2ogTiBQASKAxgzHkAhgsLCZs8WzIjYQ4MMBBs1Zrxo7+MDEyILyJR5CiWKmzhxHmi58OWtzJkye8xA0IFATpwEOnj8SGJBhhdAZ+5wQMBozqoJPw5waC5qUANFq4pNylOcBxX6ok3wWoCGAQtjCVgwUWKhsgflfrKlweCtBQsGGFT46OFBAGg/WkxYu3eH4xcRcuC7+4ADkQURFrOduXiw2cKGEQuBkJkx2wkzlg1QVpgEiXJFWpQ2DXTCjdWUXVuOInuxb84NKD9wTWL3Fw4bIsz2zQIZcRIBjK8x8SG58ggbKjyHfkGNHSIGqm9IHqB8gAvdvXx/cgQCh/dMREMJAgA7"
});		oDataImage.placeAt("content");	

这是一个 Google Chrome 浏览器的图标,通过 Base64 编码后,用 Image 控件来显示。

显示 Northwind data service 中的图片

我们先用 Postman 这个 Chrome 插件来看看 http://services.odata.org/V2/Northwind/Northwind.svc/Categories?$format=json 的 请求结果:

我们可以看到 Picture 是以 Base64 编码的字符串。那么,这种图片类型,OData 的元数据是什么类型的呢? 看看 Northwind 的元数据,数据类型是 Edm.Binary。OData 对 Edm.Binary 就是用 Base64 编码来转换成字符串传输的。请参看:http://www.odata.org/documentation/odata-version-2-0/json-format/ 的描述。

接下来给出显示 Northwind OData Service 的完整代码:

<!DOCTYPE HTML>
<html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/><script src="../resources/sap-ui-core.js"id="sap-ui-bootstrap"data-sap-ui-libs="sap.m, sap.ui.table, sap.ui.layout"data-sap-ui-theme="sap_bluecrystal"></script><script>// Application datavar sUrl = "https://cors-anywhere.herokuapp.com/" + "services.odata.org/V2/Northwind/Northwind.svc/";var oModel = new sap.ui.model.odata.v2.ODataModel(sUrl)sap.ui.getCore().setModel(oModel);sap.ui.getCore().attachInit(function(){var oImage = new sap.m.Image({width: "200px",src: {path: "Picture",formatter: function(sValue){var sBase64BMP = btoa(atob(sValue).substr(78));var sDataUrl = "data:image/bmp;base64," + sBase64BMP;return sDataUrl;}}});var oForm = new sap.ui.layout.form.SimpleForm({content: [new sap.m.Label({text: "Picuture"}),oImage,new sap.m.Label({text: "Category ID"}),new sap.m.Input({value: "{CategoryID}"}),new sap.m.Label({text: "Category Name"}),new sap.m.Input({value: "{CategoryName}"}),new sap.m.Label({text: "Description"}),new sap.m.Input({value: "{Description}"}),]});			var oApp = new sap.m.App({pages: [new sap.m.Page("categoryPage", {title: "Northwind Image Display",content: [new sap.m.Panel({content: [oForm]				   })]})  ]});sap.ui.getCore().byId("categoryPage").bindElement("/Categories(1)");			oApp.placeAt("content"); 			});</script></head><body class="sapUiBody" role="application"><div id="content"></div></body>
</html>

对代码,解释两个部分:

  • SimpleForm: sap.ui.layout.form.SimpleForm 这个控件在展示扁平数据时候还是蛮方便的,控件对不同字段默认采取 Vertical layout, 每个字段包括 label 和 内容显示,默认采取 Horizontal layout

  • Image 的代码,采用的是绑定方式,绑定到 Picture 字段:

var oImage = new sap.m.Image({width: "200px",src: {path: "Picture",formatter: function(sValue){var sBase64BMP = btoa(atob(sValue).substr(78));var sDataUrl = "data:image/bmp;base64," + sBase64BMP;return sDataUrl;}}
});

为什么要加上 formatter 这段代码呢? 原因是因为 Northwind 数据库中图片,前面78个字节是 OLE 相关的信息, 所以将数据通过 JavaScript 的atob 解码为字符串,截取 78 个字节后面的内容,再使用 btoa 还原为 Base64 编码。

运行后,UI 显示界面如下:

很可惜,Northwind OData service 并不支持数据的写入,所以我们还需要使用 mock server 来模拟。因为近期较忙,只能抽时间写一点,下一篇再来介绍含图片的 CRUD 实现。

源代码

30_zui5_odata_image_read

这篇关于SAPUI5 (30) - OData 中 Image 的显示和编辑 (上)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/681099

相关文章

Linux虚拟机不显示IP地址的解决方法(亲测有效)

《Linux虚拟机不显示IP地址的解决方法(亲测有效)》本文主要介绍了通过VMware新装的Linux系统没有IP地址的解决方法,主要步骤包括:关闭虚拟机、打开VM虚拟网络编辑器、还原VMnet8或修... 目录前言步骤0.问题情况1.关闭虚拟机2.China编程打开VM虚拟网络编辑器3.1 方法一:点击还原VM

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

shell脚本自动删除30天以前的文件(最新推荐)

《shell脚本自动删除30天以前的文件(最新推荐)》该文章介绍了如何使用Shell脚本自动删除指定目录下30天以前的文件,并通过crontab设置定时任务,此外,还提供了如何使用Shell脚本删除E... 目录shell脚本自动删除30天以前的文件linux按照日期定时删除elasticsearch索引s

如何解决Pycharm编辑内容时有光标的问题

《如何解决Pycharm编辑内容时有光标的问题》文章介绍了如何在PyCharm中配置VimEmulator插件,包括检查插件是否已安装、下载插件以及安装IdeaVim插件的步骤... 目录Pycharm编辑内容时有光标1.如果Vim Emulator前面有对勾2.www.chinasem.cn如果tools工

TP-Link PDDNS服将于务6月30日正式停运:用户需转向第三方DDNS服务

《TP-LinkPDDNS服将于务6月30日正式停运:用户需转向第三方DDNS服务》近期,路由器制造巨头普联(TP-Link)在用户群体中引发了一系列重要变动,上个月,公司发出了一则通知,明确要求所... 路由器厂商普联(TP-Link)上个月发布公告要求所有用户必须完成实名认证后才能继续使用普联提供的 D

如何设置vim永久显示行号

《如何设置vim永久显示行号》在Linux环境下,vim默认不显示行号,这在程序编译出错时定位错误语句非常不便,通过修改vim配置文件vimrc,可以在每次打开vim时永久显示行号... 目录设置vim永久显示行号1.临时显示行号2.永www.chinasem.cn久显示行号总结设置vim永久显示行号在li

mysql-8.0.30压缩包版安装和配置MySQL环境过程

《mysql-8.0.30压缩包版安装和配置MySQL环境过程》该文章介绍了如何在Windows系统中下载、安装和配置MySQL数据库,包括下载地址、解压文件、创建和配置my.ini文件、设置环境变量... 目录压缩包安装配置下载配置环境变量下载和初始化总结压缩包安装配置下载下载地址:https://d

电脑显示hdmi无信号怎么办? 电脑显示器无信号的终极解决指南

《电脑显示hdmi无信号怎么办?电脑显示器无信号的终极解决指南》HDMI无信号的问题却让人头疼不已,遇到这种情况该怎么办?针对这种情况,我们可以采取一系列步骤来逐一排查并解决问题,以下是详细的方法... 无论你是试图为笔记本电脑设置多个显示器还是使用外部显示器,都可能会弹出“无HDMI信号”错误。此消息可能

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析: url中含有特殊字符 中文未编码 都有可能导致URL转换失败,所以需要对url编码处理  如下: guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时,会被误伤转义为%23,导致链接无法访问