关于sap:SAP-Fiori-页面的周期性动态刷新功能的实现步骤

58次阅读

共计 2483 个字符，预计需要花费 7 分钟才能阅读完成。

一个敌人向我征询，对于 SAP Fiori 页面主动刷新的实现办法。

如果是 Jerry 之前视频一步步创立 SAP Fiori Elements 利用介绍的 SAP Fiori Elements Overview 利用，要实现页面主动刷新比拟容易，间接在 manifest.json 里应用属性 refreshIntervalInMinutes 定义刷新工夫距离即可。

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

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

本文采取上述思路实现 SAP Fiori 页面主动刷新性能。当然如果大家有更好的实现形式，欢送留言指教。

本文介绍的例子利用的所有代码，在我的 Github 上可能找到。

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

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 之前的文章：

SAP UI 搜寻分页技术
SAP OData 编程指南
SAP UI 的加载动画成果和幽灵设计 (Ghost Design)

如果在本地测试时，生产 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 办法，移除事件处理函数，以防止可能的内存透露。

大家如果有更好的实现形式，欢送留言指教。

更多浏览