SAPUI5 (31) - OData 中 Image 的显示和编辑 (下)

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

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

给出一个完整例子，介绍如何对含有 Image 字段的数据进行增删改查。本次文章借鉴和参考了网上一篇不错的文章的素材和代码，具体参见 【参考】 部分。

UI 界面

主界面：

三个按钮分别对应新建、修改和删除功能。用户点击 [Creare user]，弹出如下对话框：

填写资料，点击 [提交] 按钮，可以新建用户数据。出于演示目的，新建用户的时候，没有处理图片的代码。

在存在行被选中的时候，当用户点击 [Update user’s data] 按钮，弹出如下对话框，可以对用户的数据进行修改。Email 作为 关键字段不能修改 (仅处于技术演示目的），Photo 被统一替换成 OpenUI5 的 logo。

在存在行被选中的时候，当用户点击 [Delete user] 按钮，弹出对话框确认是否删除：

要点

本实例代码主要说明下面的技术要点：

  • 如何处理 Edm.Binary 字段
  • 使用 SimpleForm 进行 CRUD 处理
  • OpenUI5 mock server 的使用

代码及说明

代码文件主要在放在三个文件中：

metadata.xml

OpenUI5 的 mock server 需要说明 json 格式的元数据 ( metadata)：

<?xml version="1.0" encoding="utf-8" ?>
<edmx:Edmx Version="1.0"xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"xmlns:sap="http://www.sap.com/Protocols/SAPData"><edmx:DataServices m:DataServiceVersion="2.0"><Schema Namespace="ZSA_USERS_SRV" xml:lang="en"sap:schema-version="0000" xmlns="http://schemas.microsoft.com/ado/2008/09/edm"><EntityType Name="User" sap:content-version="1"><Key><PropertyRef Name="Email" /></Key><Property Name="Email" Type="Edm.String" Nullable="false" /><Property Name="Firstname" Type="Edm.String" Nullable="false" /><Property Name="Lastname" Type="Edm.String" Nullable="false" /><Property Name="Age" Type="Edm.Int32" Nullable="false" /><Property Name="Address" Type="Edm.String" Nullable="false" /><Property Name="Picture" Type="Edm.Binary" Nullable="true" /></EntityType><EntityContainer Name="ZSA_USERS_SRV_Entities"m:IsDefaultEntityContainer="true"><EntitySet Name="Users" EntityType="ZSA_USERS_SRV.User"sap:pageable="false" sap:content-version="1" /></EntityContainer></Schema></edmx:DataServices>
</edmx:Edmx>

元数据要点：

  • Email 字段为 Key
  • Picture 字段的类型为 Edm.Binary
  • Entity set 的名称为 Users, OpenUI5 根据名称 Users 在当前文件夹下查找 Users.json 文件，并根据 metadata 的格式来确定数据结构。
  • 一般情况下， 编程语言提供 metadata 的自动生成，并不需要手工编写。

Users.json

一共包含三条数据，第一个用户有图片，其他用户没有。json 数据的 Base64 编码略去，请参考源代码：

 [    {"Email" : "john@doe.com","Firstname" : "John","Lastname" : "Doe","Age" : 45,"Address" : "New York, USA","Picture": "base64_string_source_omitted_here"        },{"Email" : "peter@smith.com","Firstname" : "Peter","Lastname" : "Smith","Age" : 52,"Address" : "Paris, France"},{"Email" : "bond@007.com","Firstname" : "James","Lastname" : "Bond","Age" : 35,"Address" : "Liverpool, UK"}
]

index.html

先给出完整代码：

<!DOCTYPE HTML>
<html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/><!-- Please change the file position of sap-ui-cor.js according to environment --><script src="../resources/sap-ui-core.js"id="sap-ui-bootstrap"data-sap-ui-libs="sap.m, sap.ui.commons, sap.ui.table"data-sap-ui-xx-bindingSyntax="complex"data-sap-ui-theme="sap_bluecrystal"></script><script>jQuery.sap.require("sap.ui.core.util.MockServer");var currentUser = null;var sCurrentPath;// Application Headervar oAppHeader = new sap.ui.commons.ApplicationHeader("appHeader"); oAppHeader.setLogoSrc("http://sap.github.io/openui5/images/icotxt_white_220x72_blue_open.png");oAppHeader.setDisplayWelcome(false);oAppHeader.setDisplayLogoff(false);oAppHeader.placeAt("content");// Create mock servervar oMockServer = new sap.ui.core.util.MockServer({rootUri: "http://mymockserver/",});			oMockServer.simulate("model/metadata.xml", "model/");oMockServer.start();// Application datavar oModel = new sap.ui.model.odata.v2.ODataModel("http://mymockserver/", true);sap.ui.getCore().setModel(oModel);    //-------------------------------------// Build a form to edit or create user// mode: 0 for edting, 1 for creating//------------------------------------function buildUserForm(mode){            	var oSimpleForm = new sap.ui.layout.form.SimpleForm({content: [new sap.ui.core.Title({text:"User Information"}),new sap.ui.commons.Label({text: "Email"}),new sap.ui.commons.TextField({value: "{Email}", editable: false}),new sap.ui.commons.Label({text: "First name"}),new sap.ui.commons.TextField({value: "{Firstname}"}),new sap.ui.commons.Label({text: "Last name"}),new sap.ui.commons.TextField({value: "{Lastname}"}),new sap.ui.commons.Label({text:"Age"}),new sap.ui.commons.TextField({value: "{Age}"}),new sap.ui.commons.Label({text:"Address"}),new sap.ui.commons.TextField({value: "{Address}"}),new sap.ui.core.Title({text:"Photo"}),new sap.m.Image({width: "100px",src: {path: "Picture",		     		    		formatter: function(sBase64Value){var sDataUrl = "data:image/bmp;base64," + sBase64Value;	     	    	             if (sBase64Value){return sDataUrl;}else{return;}}}})]});					// 1 表示新建if (mode == 1){var content = oSimpleForm.getContent();content[2].setEditable(true);					}if (mode == 0){oSimpleForm.bindElement(sCurrentPath);}return oSimpleForm;} //----------------------------------------------------// CREATE Operation// Form was open when user press [Create user] button//----------------------------------------------------function openCreateDialog(){ var oCreateDialog = new sap.ui.commons.Dialog({minWidth: "400px"});oCreateDialog.setTitle("Create User"); var oSimpleForm = buildUserForm(1);   // 1 represent creating         oCreateDialog.addContent(oSimpleForm);oCreateDialog.addButton(new sap.ui.commons.Button({text: "Submit", press: function() {var content = oSimpleForm.getContent();// new entryvar oEntry = {};oEntry.Email = content[2].getValue();oEntry.Firstname = content[4].getValue();oEntry.Lastname = content[6].getValue();oEntry.Age = content[8].getValue();oEntry.Address = content[10].getValue();                            // Commit creating operationvar oModel = sap.ui.getCore().getModel();oModel.create("/Users", oEntry, {success: function(oData, oResponse){console.log("Response", oResponse);oCreateDialog.close();oModel.refresh();},error: function(oError){console.log("Error", oError);oCreateDialog.close();}});                            }}));oCreateDialog.open();};        //-------------------------------------------------// PUT Operation// Open dialog when user pressing [Update user' data] button//-------------------------------------------------function openUpdateDialog(){ var oUpdateDialog = new sap.ui.commons.Dialog({minWidth: "600px",title: "Update user's data"});              var oSimpleForm = buildUserForm(0);                oUpdateDialog.addContent(oSimpleForm);oUpdateDialog.addButton(new sap.ui.commons.Button({text: "Submit", press: function() {var content = oSimpleForm.getContent();var oEntry = {};oEntry.Email = content[2].getValue();oEntry.Firstname = content[4].getValue();oEntry.Lastname = content[6].getValue();oEntry.Age = content[8].getValue();oEntry.Address = content[10].getValue();oEntry.Picture = "base64_string";var oModel = sap.ui.getCore().getModel();var sPath = "/Users('" + oEntry.Email + "')"oModel.update(sPath, oEntry, {success: function(oData, oResponse){console.log("Response", oResponse);oModel.refresh();oUpdateDialog.close();},error: function(oError){console.log("Error", oError);oUpdateDialog.close();}});   }}));oUpdateDialog.open();};//-----------------------//  DELETE Operation//-----------------------function openDeleteDialog(email) {var oDeleteDialog = new sap.ui.commons.Dialog();oDeleteDialog.setTitle("Delete User");var oText = new sap.ui.commons.TextView({text: "Are you sure to delete this user?"});oDeleteDialog.addContent(oText);oDeleteDialog.addButton(new sap.ui.commons.Button({text: "Confirm", press:function(){var oModel = sap.ui.getCore().getModel();oModel.remove("/Users('" + email + "')", {success: function(oData, oResponse){console.log(oResponse);oModel.refresh();oDeleteDialog.close();},error: function(oError){console.log("Error", oError);oDeleteDialog.close();}});  }}));oDeleteDialog.open();}// Setting up tablevar oTable = new sap.ui.table.Table({editable: false,selectionMode : sap.ui.table.SelectionMode.Single,selectionBehavior: sap.ui.table.SelectionBehavior.Row,rowSelectionChange: function(e) {var idx = e.getParameter('rowIndex');if (oTable.isIndexSelected(idx)) {var cxt = oTable.getContextByIndex(idx);var path = cxt.sPath;var obj = oTable.getModel().getProperty(path);currentUser = obj;sCurrentPath = path;//console.log(obj);       }},toolbar: new sap.ui.commons.Toolbar({ items: [ new sap.ui.commons.Button({text: "Create user", press: function() {openCreateDialog();}, }),new sap.ui.commons.Button({text: "Update user's data", press: function() {var idx = oTable.getSelectedIndex();if (idx == -1) return;var rows = oTable.getRows();var user = rows[idx].getCells();                                openUpdateDialog();                                }, }),                             new sap.ui.commons.Button({text: "Delete user", press: function() {var idx = oTable.getSelectedIndex();if (idx == -1) return;var rows = oTable.getRows();var user = rows[idx].getCells();openDeleteDialog(user[0].getValue());}, })]}),});oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Email"}),template: new sap.ui.commons.TextField().bindProperty("value", "Email"),editable: false,sortProperty: "Email"}));oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "First name"}),template: new sap.ui.commons.TextField().bindProperty("value", "Firstname"),sortProperty: "Firstname",editable: false,}));oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Last name"}),template: new sap.ui.commons.TextField().bindProperty("value", "Lastname"),sortProperty: "Lastname",editable: false,}));oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Age"}),template: new sap.ui.commons.TextField().bindProperty("value", "Age"),sortProperty: "Age",editable: false,}));oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Address"}),template: new sap.ui.commons.TextField().bindProperty("value", "Address"),sortProperty: "Address",editable: false,}));oTable.setModel(oModel);oTable.bindRows("/Users");oTable.placeAt("content");			</script></head><body class="sapUiBody" role="application"><div id="content"></div></body>
</html>

代码的要点说明

  • 本例使用 sap.ui.table.Table 来显示数据，如果不考虑跨平台，这个 table 的显示效果和交互性强于 sap.m.Table。注意 sap.ui.commons.Textfield 已经废弃。

  • 编辑放在 SimpleForm 中。使用的是数据绑定模式。但绑定不适用与 Create，所以使用 mode (0 表示编辑，1 表示新建)，只有在编辑模式下，才进行绑定。

function buildUserForm(mode){            	var oSimpleForm = new sap.ui.layout.form.SimpleForm({content: [new sap.ui.core.Title({text:"User Information"}),new sap.ui.commons.Label({text: "Email"}),new sap.ui.commons.TextField({value: "{Email}", editable: false}),new sap.ui.commons.Label({text: "First name"}),new sap.ui.commons.TextField({value: "{Firstname}"}),new sap.ui.commons.Label({text: "Last name"}),new sap.ui.commons.TextField({value: "{Lastname}"}),new sap.ui.commons.Label({text:"Age"}),new sap.ui.commons.TextField({value: "{Age}"}),new sap.ui.commons.Label({text:"Address"}),new sap.ui.commons.TextField({value: "{Address}"}),new sap.ui.core.Title({text:"Photo"}),new sap.m.Image({width: "100px",src: {path: "Picture",		     		    		formatter: function(sBase64Value){var sDataUrl = "data:image/bmp;base64," + sBase64Value;	     	    	             if (sBase64Value){return sDataUrl;}else{return;}}}})]});					// 1 表示新建if (mode == 1){var content = oSimpleForm.getContent();content[2].setEditable(true);					}if (mode == 0){oSimpleForm.bindElement(sCurrentPath);}return oSimpleForm;
}
  • CRUD 执行，使用的是 ODataModel 的 create(), update() 和 remove()

Create:

var content = oSimpleForm.getContent();// new entry
var oEntry = {};
oEntry.Email = content[2].getValue();
oEntry.Firstname = content[4].getValue();
oEntry.Lastname = content[6].getValue();
oEntry.Age = content[8].getValue();
oEntry.Address = content[10].getValue();                            // Commit creating operation
var oModel = sap.ui.getCore().getModel();
oModel.create("/Users", oEntry, {success: function(oData, oResponse){console.log("Response", oResponse);oCreateDialog.close();oModel.refresh();},error: function(oError){console.log("Error", oError);oCreateDialog.close();}
});

Update:

var content = oSimpleForm.getContent();var oEntry = {};
oEntry.Email = content[2].getValue();
oEntry.Firstname = content[4].getValue();
oEntry.Lastname = content[6].getValue();
oEntry.Age = content[8].getValue();
oEntry.Address = content[10].getValue();
oEntry.Picture = "base64String";var oModel = sap.ui.getCore().getModel();
var sPath = "/Users('" + oEntry.Email + "')"oModel.update(sPath, oEntry, {success: function(oData, oResponse){console.log("Response", oResponse);oModel.refresh();oUpdateDialog.close();},error: function(oError){console.log("Error", oError);oUpdateDialog.close();}
});

删除

var oModel = sap.ui.getCore().getModel();
oModel.remove("/Users('" + email + "')", {success: function(oData, oResponse){console.log(oResponse);oModel.refresh();oDeleteDialog.close();},error: function(oError){console.log("Error", oError);oDeleteDialog.close();}
});

最后是 mock server，模拟服务器，拦截 http 请求：

jQuery.sap.require("sap.ui.core.util.MockServer");// Create mock server
var oMockServer = new sap.ui.core.util.MockServer({rootUri: "http://mymockserver/",
});			
oMockServer.simulate("model/metadata.xml", "model/");
oMockServer.start();

数据来自 model 文件夹下面的 metadata.xml。

源代码

31_zui5_odata_image_crud

参考

Upload Image to SAP Gateway and Display Image in UI5 – Using New Fileuploader with SAP Gateway

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


http://www.chinasem.cn/article/681100。

相关文章

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

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

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

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

第10章 中断和动态时钟显示 从本章开始，按照书籍的划分，第10章开始就进入保护模式（Protected Mode）部分了，感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断（Interrupt）的设计，中断的几种方式：外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用： 为了更好的利用处理器的性能。协同快速和慢速设备一起工作
阅读更多...
安卓链接正常显示，ios#符被转义%23导致链接访问404

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

原因分析： url中含有特殊字符 中文未编码 都有可能导致URL转换失败，所以需要对url编码处理  如下： guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时，会被误伤转义为%23，导致链接无法访问
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

在使用 LVGL 8.3.6 创建一个垂直布局，其中 label 控件位于 image 控件下方，你可以使用 lv_obj_set_flex_flow 来设置布局为垂直，并确保 label 控件在 image 控件后添加。这里是如何步骤性地实现它的一个基本示例： 创建父容器：首先创建一个容器对象，该对象将作为布局的基础。设置容器为垂直布局：使用 lv_obj_set_flex_flow 设置容器
阅读更多...
PDF 软件如何帮助您编辑、转换和保护文件。

PDF 软件如何帮助您编辑、转换和保护文件。

如何找到最好的 PDF 编辑器。 无论您是在为您的企业寻找更高效的 PDF 解决方案，还是尝试组织和编辑主文档，PDF 编辑器都可以在一个地方提供您需要的所有工具。市面上有很多 PDF 编辑器 — 在决定哪个最适合您时，请考虑这些因素。 1. 确定您的 PDF 文档软件需求。 不同的 PDF 文档软件程序可以具有不同的功能，因此在决定哪个是最适合您的 PDF 软件之前，请花点时间评估您的
阅读更多...
C# dateTimePicker 显示年月日，时分秒

C# dateTimePicker 显示年月日，时分秒

dateTimePicker默认只显示日期，如果需要显示年月日，时分秒，只需要以下两步： 1.dateTimePicker1.Format = DateTimePickerFormat.Time 2.dateTimePicker1.CustomFormat = yyyy-MM-dd HH:mm:ss Tips:  a. dateTimePicker1.ShowUpDown = t
阅读更多...
小程序button控件上下边框的显示和隐藏

小程序button控件上下边框的显示和隐藏

问题 想使用button自带的loading图标功能，但又不需要button显示边框线 button控件有一条淡灰色的边框，在控件上了样式 border:none; 无法让button边框隐藏 代码如下： <button class="btn">.btn{border:none; /*一般使用这个就是可以去掉边框了*/} 解决方案 发现button控件有一个伪元素（::after
阅读更多...
MFC中Spin Control控件使用，同时数据在Edit Control中显示

MFC中Spin Control控件使用，同时数据在Edit Control中显示

实现mfc spin control 上下滚动，只需捕捉spin control 的 UDN_DELTAPOD 消息，如下：  OnDeltaposSpin1(NMHDR *pNMHDR, LRESULT *pResult) {  LPNMUPDOWN pNMUpDown = reinterpret_cast(pNMHDR);  // TODO: 在此添加控件通知处理程序代码    if
阅读更多...
Linux 删除 当前下的 mysql-8.0.31 空文件夹

Linux 删除 当前下的 mysql-8.0.31 空文件夹

在Linux中，如果你想要删除当前目录下的名为mysql-8.0.31的空文件夹（即该文件夹内没有任何文件或子文件夹），你可以使用rmdir命令。但是，如果mysql-8.0.31文件夹并非完全为空（即它包含文件或子文件夹），rmdir命令会失败。 如果你的目标是删除mysql-8.0.31文件夹及其内部的所有内容（无论是否为空），你应该使用rm命令结合-r（或-R，它们是等价的）选项来递归地删
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2