SAP Fiori 页面的周期性动态刷新功能的实现步骤

时间 2021-06-05

标签前端 node git github web 编程 json 跨域浏览器安全栏目 Git 繁體版

原文原文链接

一个朋友向我咨询，关于 SAP Fiori 页面自动刷新的实现方法。前端

若是是 Jerry 以前视频一步步建立 SAP Fiori Elements 应用介绍的 SAP Fiori Elements Overview 应用，要实现页面自动刷新比较容易，直接在 manifest.json 里使用属性 refreshIntervalInMinutes 定义刷新时间间隔便可。node

但这位朋友咨询的 SAP Fiori 页面，显然是指采起 SAP UI5 Freestyle 方式开发的页面。所谓 Freestyle 开发方式，是指不借助 SAP Fiori Elements 框架，而是使用 SAP UI5 SDK，由应用开发人员自行编写应用的视图和控制器逻辑。 git

要实现页面刷新，一种容易想到的思路就是，让 SAP UI5 应用的 Controller 层，周期性地向后台发起数据请求。一旦最新的数据响应从后台返回到浏览器，根据 SAP UI5 MVC 设计，模型数据 (Model) 的更新则会致使视图 (View) 的自动更新。github

本文采起上述思路实现 SAP Fiori 页面自动刷新功能。固然若是你们有更好的实现方式，欢迎留言指教。web

本文介绍的例子应用的全部代码，在个人 Github 上可以找到。编程

将 Jerry 上述代码仓库的应用克隆到本地。该应用里我使用的 OData 服务为著名的用于教学的 Northwind 服务，其 url 为：json

https://services.odata.org/No...跨域

将这个 url 配置成应用 manifest.json 文件的 dataSources/mainService 区域内对应的 uri 字段值。这样，运行时该 SAP UI5 应用消费的 OData 服务就肯定下来了，无需咱们手动编写代码实例化 OData Model.浏览器

在 manifest.json 文件 sap.ui5 区域里，维护字段 rootView 的值，以肯定该应用的根视图名称为：安全

sap.ui.jerry.odatatable.Table

在这个根视图里，我只定义了一个 sap.m.Table 控件，而且在控制器里编写了几行 JavaScript 代码，实现该表格控件的周期性动态刷新。

表格控件的抬头用于显示当前页面刷新次数的计数器。例以下图表示，当前表格已经刷新了 7 次。

Table 控件的 items 属性绑定到 OData 服务里名为 Products 的 entitySet，用于显示该 OData 服务提供的产品数据。

本地执行 node local.js 命令后，访问以下 url 以打开这个 SAP UI5 应用的页面：

http://localhost:3002/odatata...

能看到该 OData 服务返回的总共 77 个产品数据，显示在表格控件里：

同时，在 Chrome 开发者工具里观察到总共 4 个 batch 请求。这是由于 Northwind OData 服务总共包含 77 个产品，而单次的 batch 请求，因为服务器的分页实现，一次只返回 20 条数据，故总共须要 77 / 20 + 1 = 4 次 batch 请求。

关于 SAP 应用服务器端的分页实现，能够参考 Jerry 以前的文章：

若是在本地测试时，消费 Northwind OData 服务遇到跨域问题，能够按照 Jerry 以前的文章 用JavaScript访问SAP云平台上的服务遇到跨域问题该怎么办，本身开发一个简单的代理服务器来避免这个问题。

若是实在以为麻烦，使用以下的命令行启动 Chrome，暂时禁掉其安全检查(不推荐)：

--user-data-dir="C:/temp" --disable-web-security

最后，在控制器里想办法实现周期性定时操做。不少朋友建议使用浏览器环境下原生的 setInterval 或者 setTimeout 等 API:

其实 SAP UI5 提供了基于 setTimeout 封装的 API，sap.ui.core.IntervalTrigger，使用方式以下图所示：

上图第 11 行代码里，传入 IntervalTrigger 构造函数的数字，便是定时器触发的时间间隔，单位为毫秒。第 12 行 addListener 方法，注册一个事件处理函数。每当定时器时间间隔到达时，触发该函数的执行。

上图第 17 行代码，拿到 Binding 实例后，调用其 refresh 方法，会触发向后台的 OData 请求，从新加载数据，从而达到刷新表格显示数据的目的:

https://sapui5.hana.ondemand....

关于上图 SAP 帮助文档介绍的 refresh 方法，其实还有一个知识点。若是咱们把 IntervalTrigger 构造函数里传入的时间间隔调小，好比指定成每隔 0.1 秒触发一次，这样在 Chrome 开发者工具 network 标签页里能看到大量状态为 cancelled 的 OData 请求：

Jerry 以前的文章 SAP UI5 OData谣言粉碎机：极短期内发送两个Odata request,前一个会自动被cancel掉吗 曾经分析过，在什么样的状况下，OData 请求会被 cancel. 你们若是有所遗忘，能够再回过头去阅读。

在控制器的 onExit 钩子函数里，能够调用 removeListener 方法，移除事件处理函数，以免可能的内存泄漏。

你们若是有更好的实现方式，欢迎留言指教。

更多阅读

更多Jerry的原创文章，尽在："汪子熙":