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

大家好，我是杰瑞汪，今天这个视频给大家介绍一下如何在SAP f应用里面去实现周期性的动态刷新页面这样一个需求。这个问题实际上是之前一个朋友在知乎上向我发起的咨询，当时我写了这样一篇公众号的文章来介绍他的具体实现步骤，那么这篇文章对应的代码在我的github的这个链接上能够找到。那么要实现SCP运用的动态刷新，其实一个最直接的思路就是。我们使用。PUI提供的一个API，动态的去按照一个时间间隔去不断的执行某一个操作。我们具体看一下这个实现代码。

那么我还是使用之前文章里面介绍的一个UI5的脚手架应用，管理了若干CPUI5的应用，那么这个自动刷新的DEMO实现在这个文件夹a table。里面。那么我们进到这个文件夹去。首先看他的manifest.jason。这个文件定义了这个自动应用的一些，那么最要的就是这个页面。他所消费的o service的URL。这个URL可以看到它的。里面包含了一个片段，叫做north wind，这实际上是一个用于教学和学习目的的可以免费使用的O就，也就是说官网上每个人都可以。去免费的去consume它，那么我们可以看一下这个URL输入到浏览器以后是什么样的一个behavior。

我把这个UR已经事先粘贴好，放到浏览器的地址栏里面，可以看到这个O。包含了不同的connection。比如说我们这个例子里面，我只使用它的。Products这个节点，那么我另外开个浏览器的窗口，把products。这个片段拼接到U2的末尾，然后指定它是以。监格式来输出，那么回撤之后，默认这个O服务就返回了20条产品数据给我。那么从这个next link可以看出。这个O服务的server端实现，它采取了一个分页的实现。也就是说每一次我请求这个。数据的时候，他只给我返回20条，那么这20条数据返回完之后。

同时给我一个叫做next link的链接，这个next link就指向了下20条product数据。对应的。比如说我现在把这个下20条对应的AR拼接到。地址栏里面。如果是多个参数的话，首先要使用一个这个的符号，然后再复制粘贴进去，好，现在回车取的就是。下20条数据。可以看到这个Prada ID，它是从21条开始的。那么以此类推。如果我把这个地址栏里面的二二十。改成40的话，我们看一下它的product ID会怎么变。应该是从四十一开始了，就是第41条product数据。好，果然是41条product数据，所以就是这个O服务的一个分页实现的一个效果。

那么回到manifest，点检索文件，另外一个重要的配置信息就是我们要制定这个UI5应用的。灯饰图，Root。这里我指定的根视图是table view，也就是我现在鼠标选中的这样一个X的视图，所以我的这个UI应用，它的结构非常简单，只包含一个。Table view和这个table view对应的。Table controller就是table控制器。那么在这个X view里面，在代码的第十行，我通过it。属性指定了。我希望消费。之前介绍的o service的products节点里面对应的数据。那么我使用了CP。

UI5提供的这个table控件。那么这个table空间里面，我首先要指定这个table它有几列，这里我指定了它有两列。分别是product ID和。那么指定了两列之后，我需要指定这两列的数据源从哪里来。所以我通过这个。大括号。配对的这个语法指定了ID。它的数据是从。模型里面一个叫做product ID的这个字段里面来的，那么这个product name以此类推。所以我在X视图里面指定了这样一些信息之后，在controller里面我就不需要再额外的使用javascript的代码来来编程了。好，那么周期性的刷新页面，这里使用的一个思路就是，首先。低点CPUI点扩点。

Trigger，这也是CPUI5SDK提供的一个标准的，我们可以理解成一个工具控件。那么这里。我在实例化。这个控件的时候，这里传了一个输入参数进去，这个是3000，实际上它就是3000毫秒，意思就是三秒，那它的语义是说。我创建了一个时间间隔为三秒的定时器。那么每每隔三秒钟之后，这个定时器触发它要实现。什么样的操作呢？具体的操作。是通过这个控件API去指定的。12号的雨。这行代码的语义是说，每当三秒的时间间隔的时候，我就希望这个定时触发。这个控这个controller的fresh trigger的这个方法，那么在这个方法里面。

我们很容易想到，在定时器时间间隔到来的时候。我们希望在它的。指定的。Fresh trigger的这个方法里面执行一些页面的逻辑，那么因为是一个基于MVC的前框架，我们之前在XL的这个视图里面已经看到了。我们是把。Table控件的model。绑定到了O服务的的这个节点里面，那么这里的思路就是只要我在时间间隔到来的时候，每一次重复的去。重新去。服务器端发起ona数据请求。那么这个每一次如果服务器返回最新的数据到EY5的这个应用里面的时候。根据MVC。

定到这个原理，一旦数据更新，那么绑定到这些数据的。Layer就是它的视图层也就会自动更新，所以我们在这个trigger里面，简单的在这个refresh trigger函数里面，我们只需要找到一个办法，让他定期的去向服务端发起最新的数据请求就可以了。所以我们最后采取的方法是调用O模型的refresh方法，这个refresh方法也是UI。帮助文档里面。介绍到了的。这个链接就是欧塔模型它的一些API的介绍，其中有一条叫做refresh model，我们可以看到这个介绍里面提到了调用refresh这个function，它就可以刷新。这个O里面的所有的数据刷新的方式就是每一次都发起新的数据请求向server端去。

读取数据。那就是这就是这个UI5。周期性。刷新页面的具体的实现，可以看到这个代码是非常简单的，我们现在来简单的看一下效果。我还是通过之前视频介绍的方法去启动这个UI5的脚手架应用，那么它前提在3002的这个端口上，这个时候我如果在浏览器里面开一个新的窗口。3002，然后o table。这里会。看到。有一个跨越的这个错误。因为我们我们是在localhost。的这个域上去向另外一个域，也就是这个o service的这个service.oo这个域发起数据请求的。根据浏览器的同源策略。这种。

Behavior是。是不能正常工作的，他会遇到这个跨域错误，就是cos policy的violation，所以我当时我的公众号文章里面也介绍了很多解决这个跨域错误的办法，那么最简单的做法就是我在命令行里面起一个新的Chrome的。这个呃，实力，那么在启动这个Chrome的时候，我使用。这个user data。DR和这个disable web security这两个参数来暂时的禁掉Chrome浏览器的。同源策略的这个检查，那么这个是我用命令行启动好的一个新的Chrome的实例，可以看到这里有一个警告信息，关于这个disable web security。这个参数的一个警告信息，但我们如果是用于开发目的的话。可以采用这个，所以。在这个情况下，我们可以看到我代码里面设置的每隔三秒钟的自动刷新是正常工作的，因为我这里设置了一个。

我在我的UI5U里面设置了一个刷新的计计数器，就是每刷新一次，这个计数器会加一，我们也可以看到，在CHR的这个network tab里面能看到。每隔三秒钟之后有一个动态刷新的。这个HTP请求，因为我的公众号文章里面也提到了。这个服务O服务。关于这个数据，它总共有77条数据，那么因为我在我的XL。View里面没有设置任何关于分页读取的。参数，所以我的这个。UI5应用的表格控件，每一次他会把所有77条数据全部取回来。

但是因为。UY5这个控件，它每一次发起的bech请求同样是按照。取十条数据。的这个page size来取的，所以每一次我们可以看到每一次刷新的时候，它会发起四个batch请求，这四为什么是四个呢？我同时我的文章里面也介绍了。在在这个地方有介绍。77除以20，它的商是三，然后加上一个呃，一，因为我每一次分页取20条，那么三个batch只能取60条，剩下的17条记录还需要。第四个bench来取，所以总共是四个bench请求。好，我们可以在这个地方设置一个断点。

可以看一下。这个ing它的数据在depar里面是一个什么样的？行为。它实际上就是一个。Table控件。绑定信息的一些数据的维护。那么我们最后调用的是oing的refresh方法，也就是CPU官方文档里面提到的这个fresh API，可以看到在这个refresh的实现里面，实际上调用了内部的一个internal的refresh这个方法。所以每一次像。服务端发起请求。发起新的数据请求，就是在这个refresh这个方法里面去实现的。如果对它的具体实现感兴趣的话，可以看一下它的源代码和它的注释。所以这个视频就简单介绍了怎么样在CP菲尔应用里面。

去执行一些周期性的动态刷新页面的需求。那感谢大家收看这个视频，我们下一期再见。