SAPUI5 (36) - OData Model 连接后端 SAP 系统 (下)

最新推荐文章于 2022-09-20 15:12:01 发布
最新推荐文章于 2022-09-20 15:12:01 发布
阅读量5.7k 收藏 13
点赞数 2
分类专栏： # SAPUI5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stone0823/article/details/72458757
版权

继续上一篇的内容，完成使用 OData Model 连接到后端 SAP 系统，实现 CRUD 操作。

程序界面：

点击 Create 按钮，弹出对话框：

输入 id, name 和 Address，点击 Save 按钮保存数据，点击 Cancel 按钮取消。

单击 table 中某行后，点击 Edit 按钮，弹出对话框：

可以进行修改操作。

单击 table 中某行后，点击 Delete 按钮，提示确认删除对话框，可以进行删除操作。

要点：

  • SAP Web IDE 实现代理
  • 配置数据源
  • 连接到 SAP 后端并实现 CRUD 操作

SAP Web IDE 代理配置

我使用的 IDE 是 Web IDE personal edition，如果把 Web IDE 的安装目录称作 webide_home 的话，我们需要在 webide_home\config_master\service.destinations\destinations 下配置连接，这个连接对于所有 Project 都可以使用。请参考本系列的第 33 篇。

本次我们连接的后端系统标识为 DPH，所以我们的配置文件名为 DPH，没有扩展名。配置文件的内容如下：

Description=DP Hana
Type=HTTP
TrustAll=true
Authentication=NoAuthentication
WebIDEUsage=odata_abap,dev_abap,ui5_execute_abap
Name=DPH
WebIDEEnabled=true
URL=HTTP\://dph01.nodomain\:8180
ProxyType=OnPremise
WebIDESystem=DPH
sap-client=100

配置数据源

在 SAP Web IDE 中，创建类型为 SAPUI5 Application 的项目，这种类型项目的文件结构相对来说是最简单的。创建完成后，项目的文件结构如下：

配置 neo-app.json 文件

在 neo-app.json 文件中，增加一项 path 配置，内容如下：

    {
      "path": "/sap/opu/odata",
      "target": {
        "type": "destination",
        "name": "DPH",
        "entryPath": "/sap/opu/odata"
      },
      "description": "DP Hana"
    }

配置 Application descriptor

Application descriptor 就是 webapp 下面的 manifest.json 文件，使用 App Descriptor Editor 打开，切换到 Data Sources 页签，点击 “+” 号来添加一个数据源：

系统弹出对话框简化配置，切换到 Service URL，选择在前面配置的 SAP 连接，第一行 DP Hana 保存的是 domain 信息，第二行配置的是 service url 的 path:

点击 Test 按钮，提示输入用户名和密码，如果一切 OK, 系统读取到 OData service 并且加载：

选中 EmployeeCollection ，点击 Next 按钮即可完成配置。

metadata.xml 文件会被配置到 model 文件夹下面。但我的 Web IDE 版本将实际文件放在 localServices 文件夹下面，需要手工调整位置。这个文件也可以通过在浏览器中 $metadata 参数的方法得到。

然后在 manifest.json 文件中增加默认 model 为刚才配置的 data source：

"sap.ui5": {
		"_version": "1.1.0",
		"rootView": {
			"viewName": "zui5_odata_sap_crud.view.App",
			"type": "XML"
		},
		"dependencies": {
			"minUI5Version": "1.30.0",
			"libs": {
				"sap.ui.core": {},
				"sap.m": {},
				"sap.ui.layout": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "zui5_odata_sap_crud.i18n.i18n"
				}
			},
			"": {
				"dataSource": "zempprj_srv",
				"settings": {
					"metadataUrlParams": {
						"sap-documentation": "heading"
					}
				}
			}
		},
		"resources": {
			"css": [{
				"uri": "css/style.css"
			}]
		}
	}

此时运行程序，应该会提示输入用户名和密码，表示数据源配置成功。

界面设置

主界面

因为不打算使用 routing，直接在 root view ，即 App.view.xml 文件中设置主要的 UI 元素：

<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
	controllerName="zui5_odata_sap_backend_crud.controller.App">
	<App>
		<pages>
			<Page title="{i18n>title}">
				<content>
					<Table noDataText="No data" id="idTable" items="{path:'/EmployeeCollection'}">
						<items>
							<ColumnListItem type="Navigation" press="onItemPress">
								<cells>
									<Text text="{EmpId}"/>
									<Text text="{EmpName}"/>
									<Text text="{EmpAddr}"/>
								</cells>
							</ColumnListItem>
						</items>
						<columns>
							<Column id="EmpIdCol">
								<header>
									<Label text="Employee ID"/>
								</header>
							</Column>
							<Column id="EmpNameCol">
								<header>
									<Label text="Name"/>
								</header>
							</Column>
							<Column id="EmpAddrCol">
								<header>
									<Label text="Address"/>
								</header>
							</Column>
						</columns>
					</Table>
				</content>
				<footer>
					<Bar>
						<contentRight>
							<Button icon="sap-icon://create" text="Create" press="onCreate"/>
							<Button icon="sap-icon://edit" text="Edit" press="onEdit"/>
							<Button icon="sap-icon://delete" text="Delete" press="onDelete"/>
						</contentRight>
					</Bar>
				</footer>
			</Page>
		</pages>
	</App>
</mvc:View>

对话框

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form">
	
	<Dialog id="employeeDialog" title="Employee CRUD">
		<f:SimpleForm>
			<Label text="Employee Id"/>
			<Input id="EmpId" value="{EmpId}"/>
			<Label text="Name"/>
			<Input id="EmpName" value="{EmpName}"/>
			<Label text="Address"/>
			<Input id="EmpAddr" value="{EmpAddr}"/>
		</f:SimpleForm>
		<Toolbar>
			<ToolbarSpacer/>
			<Button id="SaveCreate" text="Save"/>
			<Button id="SaveEdit" text="Save Edit"/>
			<Button id="CancelButton" text="Cancel" />
		</Toolbar>
	</Dialog>
	
</core:FragmentDefinition>

控制器代码

主要的代码都在 App.controller.js 中，先给出完整代码：

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";

	var oModel;
	var sCurrentPath; // current path
	var sCurrentEmp; // cureent employee

	return Controller.extend("zui5_odata_sap_backend_crud.controller.App", {

		onInit: function() {
			oModel = this.getOwnerComponent().getModel();
			oModel.setUseBatch(false);
			this.getView().setModel(oModel);
		},

		openDialog: function() {
			var oView = this.getView();

			// Open dialog
			var oEmpDialog = oView.byId("employeeDialog");
			if (!oEmpDialog) {
				oEmpDialog = sap.ui.xmlfragment(oView.getId(),
					"zui5_odata_sap_backend_crud.view.EmployeeDialog");
				oView.addDependent(oEmpDialog);
			}

			oEmpDialog.open();

			// Attach press event for CancelButton
			var oCancelButton = oView.byId("CancelButton");
			oCancelButton.attachPress(function() {
				oEmpDialog.close();
			});
		},

		// onCreate event
		onCreate: function() {
			var oView = this.getView();

			this.openDialog();
			var oEmployeeDialog = oView.byId("employeeDialog");
			oEmployeeDialog.setTitle("Create Employee");
			oView.byId("EmpId").setEditable(true);
			oView.byId("SaveEdit").setVisible(false);
			oView.byId("SaveCreate").setVisible(true);

			// clear
			oView.byId("EmpId").setValue("");
			oView.byId("EmpName").setValue("");
			oView.byId("EmpAddr").setValue("");

			// commit save
			oView.byId("SaveCreate").attachPress(function() {
				var oNewEntry = {
					"Mandt": "100",
					"EmpId": "",
					"EmpName": "",
					"EmpAddr": ""
				};

				// populate value from form
				oNewEntry.EmpId = oView.byId("EmpId").getValue();
				oNewEntry.EmpName = oView.byId("EmpName").getValue();
				oNewEntry.EmpAddr = oView.byId("EmpAddr").getValue();

				// Commit creation operation
				oModel.create("/EmployeeCollection", oNewEntry, {
					success: function() {
						sap.m.MessageToast.show("Created successfully.");
					},
					error: function(oError) {
						window.console.log("Error", oError);
					}
				});

				// close dialog
				if (oEmployeeDialog) {
					oEmployeeDialog.close();
				}
			});
		},

		onEdit: function() {
			// no employee was selected
			if (!sCurrentEmp) {
				sap.m.MessageToast.show("No Employee was selected.");
				return;
			}

			var oView = this.getView();

			this.openDialog();
			var oEmployeeDialog = oView.byId("employeeDialog");
			oEmployeeDialog.setTitle("Edit Employee");
			oView.byId("EmpId").setEditable(false);
			oView.byId("SaveEdit").setVisible(true);
			oView.byId("SaveCreate").setVisible(false);

			// populate fields
			oView.byId("EmpId").setValue(oModel.getProperty(sCurrentPath + "/EmpId"));
			oView.byId("EmpName").setValue(oModel.getProperty(sCurrentPath + "/EmpName"));
			oView.byId("EmpAddr").setValue(oModel.getProperty(sCurrentPath + "/EmpAddr"));

			// Attach save event
			oView.byId("SaveEdit").attachPress(function() {
				var oChanges = {
					"Mandt": "100",
					"EmpName": "",
					"EmpAddr": ""
				};

				// populate value from form
				oChanges.EmpName = oView.byId("EmpName").getValue();
				oChanges.EmpAddr = oView.byId("EmpAddr").getValue();

				// commit creation
				oModel.update(sCurrentPath, oChanges, {
					success: function() {
						sap.m.MessageToast.show("Changes were saved successfully.");
					},
					error: function(oError) {
						window.console.log("Error", oError);
					}
				});

				// close dialog
				if (oEmployeeDialog) {
					oEmployeeDialog.close();
				}
			});
		},

		// onDelete event
		onDelete: function() {
			var that = this;

			// no employee was selected
			if (!sCurrentEmp) {
				sap.m.MessageToast.show("No Employee was selected.");
				return;
			}

			var oDeleteDialog = new sap.m.Dialog();
			oDeleteDialog.setTitle("Deletion");

			var oText = new sap.m.Label({
				text: "Are you sure to delete employee [" + sCurrentEmp + "]?"
			});
			oDeleteDialog.addContent(oText);

			oDeleteDialog.addButton(
				new sap.m.Button({
					text: "Confirm",
					press: function() {
						that.deleteEmployee();
						oDeleteDialog.close();
					}
				})
			);

			oDeleteDialog.open();
		},

		// deletion operation
		deleteEmployee: function() {
			oModel.remove(sCurrentPath, {
				success: function() {
					sap.m.MessageToast.show("Deletion successful.");
				},
				error: function(oError) {
					window.console.log("Error", oError);
				}
			});
		},

		onItemPress: function(evt) {
			var oContext = evt.getSource().getBindingContext();
			sCurrentPath = oContext.getPath();
			sCurrentEmp = oContext.getProperty("EmpName");
		}
	});
});

要点说明：

Model

我们使用的是 OData Model，但是并没有任何代码来显示申明。OData Model 的声明来自 manifest.json。根据 OpenUI5 SDK，如果 DataSource 为 OData，没有指定 type，则默认的 type 为 OData v2，这正是我们想要的。

然后在 Controller 的 onInit 事件中绑定 view 和 model:

onInit: function() {
    oModel = this.getOwnerComponent().getModel();
    oModel.setUseBatch(false);
    this.getView().setModel(oModel);
}

新增记录 ( create )

var oNewEntry = {
    "Mandt": "100",
    "EmpId": "",
    "EmpName": "",
    "EmpAddr": ""
};

// populate value from form
oNewEntry.EmpId = oView.byId("EmpId").getValue();
oNewEntry.EmpName = oView.byId("EmpName").getValue();
oNewEntry.EmpAddr = oView.byId("EmpAddr").getValue();

// Commit creation operation
oModel.create("/EmployeeCollection", oNewEntry, {
    success: function() {
        sap.m.MessageToast.show("Created successfully.");
    },
    error: function(oError) {
        window.console.log("Error", oError);
    }
});

修改记录

var oChanges = {
    "Mandt": "100",
    "EmpName": "",
    "EmpAddr": ""
};

// populate value from form
oChanges.EmpName = oView.byId("EmpName").getValue();
oChanges.EmpAddr = oView.byId("EmpAddr").getValue();

// commit creation
oModel.update(sCurrentPath, oChanges, {
    success: function() {
        sap.m.MessageToast.show("Changes were saved successfully.");
    },
    error: function(oError) {
        window.console.log("Error", oError);
    }
});

删除记录

deleteEmployee: function() {
    oModel.remove(sCurrentPath, {
        success: function() {
            sap.m.MessageToast.show("Deletion successful.");
        },
        error: function(oError) {
            window.console.log("Error", oError);
        }
    });
}

源码

36_01_zui5_odata_sap_backend_crud
36_02_zui5_odata_sap_backend_crud

参考资料

stone0823
关注
专栏目录
sap ui5教程（6）Model（Resource model + JSONmodel + ODataModel）
Yichair的博客
01-19 2007
1、RsourceModel数据绑定 i18n文件： 存放不经常变化的文字，如在中的title =”{i18n>title}”,按钮文字，输入框提示文字，placeholder newTitle = hijuly manifest.json 文件 modes中配置当前项目的基础models，resourcemodel如下： "models": { "i18n": {
sap ui5教程（3） MVC及view、model、contronller文件结构
Yichair的博客
01-16 1211
1、MVC MVC 是 Model、View、Controller 的简称，将程序的数据、界面展示和用户交互分离，降低耦合。 1、model、view和controller Model: 应用程序的数据 View: 通过界面展示应用程序的数据和其它界面元素 Controller: 处理应用程序的数据，以及用户的交互。 2、各自的关系 Model – View ：OpenUI
SAPUI5 (35) - OData Model 连接后端 SAP 系统 (中)
王敏的专栏
05-01 8323
完成上一篇的配置，现在我们可以在 SAP 系统中创建基于 SAP Netweaver Gateway 的 OData Service。本篇主要是介绍在 SAP 系统中创建 OData service 的过程，为后续在 OpenUI5 中通过 OData Model 使用 SAP 系统提供的 OData 数据服务。
UI5-学习篇-8-本地SAP WEB IDE开发
abbilglf665483的博客
02-26 721
1.本地SAP WEB IDE下载 　UI5-学习篇-3-Local SAP WEB IDE下载 2.启动Orion服务 　解压SAP WEB IDE文件后，双击Orion应用程序启动服务，如下图： 　 　 　服务启动完成后，打开如下路径，进入SAP WEB IDE开发平台： 　http://localhost:8080/webide/index.html 3.创建账号并...
SAPUI5 (34) - OData Model 连接后端 SAP 系统 (上)
王敏的专栏
04-25 5892
准备分三个部分介绍如何连接到后端 SAP 系统，先说明 SAP 系统提供 OData 服务所需的配置。
SAPUI5 (25) - 了解 OData 和 OpenUI5 的 OData Model
王敏的专栏
03-10 6086
本篇介绍几个比较重要的概念，REST 和 OData，并介绍 OpenUI5 OData model的基本使用方法。
UI5使用Post方式发送Json文件到Odata
最新发布
树熊隐士
09-20 353
UI5中如何使用Post方式发送Json文件到Odata
SAPUI5 (08) - MVC的Model和数据绑定
王敏的专栏
01-01 7110
前面的MVC介绍只有view和controller，还没有涉及数据，所以没有model的部分。本篇增加数据，介绍Model以及数据绑定，展示一个完整的MVC示例。
SAPUI5-OData-V4:为学习目的而创建的SAPUI5应用程序，特别是为了了解如何访问，修改，聚合和过滤OData V4模型中的数据
04-03
2. **数据访问**：在SAPUI5中，可以通过`sap.ui.model.odata.v4.ODataModel`来创建和实例化OData V4模型。通过这个模型，可以轻松地读取数据集，获取单个实体，或者执行查询。 3. **数据绑定**：SAPUI5的核心功能之...
SAP UI5 OData开发
08-29
通过编写模型提供类，开发者可以创建出一个抽象层，用于处理前端UI5应用和后端SAP系统之间的数据交换。 在SAP UI5前端应用中，开发者会用到各种控件（UI组件）和模型（Model）来构建用户界面和处理业务逻辑。这些UI...
使用SAP WebIDE给SAP UI5应用添加data source
01-06
添加一个新的Data source： 选择之前配置的指向northwind OData的Destination， 注意，在Neo和CloudFoundry环境里都要创建同名Destination才行。在Neo里创建的Destination还需要带上三个额外的properties，而CloudFoundry里的Destination则不需要。 输入/V2/Northwind/Northwind.svc，点击Test按钮： 确保该OData的metadata能够正常显示，点击Next按钮。 将其用作缺省模型： 点击Run按钮进行测试： 得到结果： 要获取更多Jerry的原创文章，请关
SAP Web IDE 个人版使用说明.docx
06-28
SAP Web IDE 个人版使用说明 we will see how we can connect our local SAPWebIDE to remote SAP Netweaver Gateway System. If you don’t have one then let’s get it from here (SAP Netweaver Gateway Consumption System) . We will also see how we can consume the oData services from this system (ES1) in our WebIDE to create Master-Detail Fiori Application. First we have to create the destination. Now open your cmd promt and follow the commands as below. Name your destination file as name of your system (ES1).
sapui5-bind-table-dropdownbox:SAPUI5-这是一个有关如何将表与聚合绑定的示例
05-04
在SAPUI5中，数据绑定是连接应用程序界面与数据模型的重要机制，使得视图元素可以动态地显示和更新后端或本地数据。本示例" sapui5-bind-table-dropdownbox "聚焦于如何将Table控件与DropdownBox相结合，并根据表格...
trippinrw-openui:使用 sapui5 尝试 odata 服务的第一个演示
07-06
在 SAPUI5 中，可以使用 `sap.ui.model.odata.ODataModel` 类来连接到 OData 服务并处理数据请求。 3. **Visual Studio/Visual Studio Code**：作为开发工具，它们可以提供代码提示、调试、版本控制等功能，帮助...
sapui5 访问OData数据
杨江的IT分享专栏
08-04 4795
开发环境：eclipse Luna, sapui5 toolkit eclipse plugin（从sap官网下载） 运行环境：eclipse + Tomcat OData环境：SAP在公网上提供的免费的基于NetWeaver Gateway的测试用OData服务代码说明： 最开始测试 sServiceUrl = “http://sapes1.sapdevcenter.com:8080/
SAPUI5 (27) - 基于 ODataModel 的筛选
王敏的专栏
03-21 4251
本篇介绍基于 oDataModel 的筛选实现
SAP云平台上的Destination配置与Web IDE中OData数据连接
SAP领域技术博客
03-23 1276
1. Destination的基本功能 在SAP Cloud Platform上，通过Destination来定义应用程序和远程系统之间的通信连接，这里的远程系统可以是on-priminse系统或是Cloud系统。 一个完整的Destination包括以下基本信息 - “名称Name” “统一资源定位地址URL” “身份验证信息Authentication detail” 相关的“配置...
sapui5 walkthrough 6-10
Olivia1202的博客
09-06 317
6.Step 6: Modules 在sapui5中，将资源称为model。 修改App.controller.js sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast" ], function (Controller, MessageToast) { "use ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值