SAP Fiori 页面的周期性动态刷新功能的实现步骤-阿里云开发者社区

开发者社区> jerrywangsap> 正文

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

简介: SAP Fiori 页面的周期性动态刷新功能的实现步骤
+关注继续查看

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


image.png


如果是 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/Northwind/Northwind.svc


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


image.png


在 manifest.json 文件 sap.ui5 区域里,维护字段 rootView 的值,以确定该应用的根视图名称为:


sap.ui.jerry.odatatable.Table


image.png


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


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


image.png


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


image.png


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


http://localhost:3002/odatatable/


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


image.png


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


image.png


关于 SAP 应用服务器端的分页实现,可以参考 Jerry 之前的文章:


SAP UI 搜索分页技术


SAP OData编程指南


SAP UI的加载动画效果和幽灵设计(Ghost Design)


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


image.png


如果实在觉得麻烦,使用如下的命令行启动 Chrome,暂时禁掉其安全检查(不推荐):


–user-data-dir=“C:/temp” --disable-web-security


image.png


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


image.png


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


image.png


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


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


https://sapui5.hana.ondemand.com/#/topic/6c47b2b39db9404582994070ec3d57a2#loio66a130fa4d10411b8fc90df00185554b


image.png


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


image.png


Jerry 之前的文章 SAP UI5 OData谣言粉碎机:极短时间内发送两个Odata request,前一个会自动被cancel掉吗 曾经分析过,在什么样的情况下,OData 请求会被 cancel. 大家如果有所遗忘,可以再回过头去阅读。


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


image.png


大家如果有更好的实现方式,欢迎留言指教。


更多阅读


在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用


答网友提问:使用 SAP Fiori Tools 创建的 Fiori Elements 应用,如何进行二次开发?


本地开发好的 SAP Fiori Elements 应用,如何部署到 ABAP 服务器上


深入掌握 SAP Fiori Elements 工作原理的前提条件:理解 Smart Field


深入理解 SAP Fiori Elements 工作原理系列之二:如何给 SAP Fiori Elements 应用添加自定义按钮


SAP Fiori Elements 框架里 Smart Table 控件的工作原理介绍


SAP Fiori Elements List Report Smart Table 列项目宽度计算的奥妙


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10076 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13882 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9158 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7493 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22399 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4502 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载