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的原創文章，盡在："汪子熙":