SAP Fiori Elements 框架裏 Smart Table 控件的工做原理介紹

這是 Jerry 2021 年的第 34 篇文章，也是汪子熙公衆號總共第 310 篇原創文章。

Jerry 前一篇文章 深刻掌握 SAP Fiori Elements 工做原理系列之二：如何給 Fiori Elements 應用添加自定義按鈕 介紹瞭如何給 SAP Fiori Elements 應用的 Smart Table 工具欄裏，新增自定義按鈕，並實現其點擊事件處理函數。

本文 Jerry 繼續介紹 SAP Fiori Elements 應用裏，Smart Table 控件的渲染原理。根據前一篇文章介紹的知識，SAP Fiori Elements List Report 的模板，包含了 SmartTable.fragment.xml 這個頁面片斷：

而該頁面片斷的源代碼裏，使用了 Smart Table 控件：

爲了把和 Smart Table 控件不相關的依賴都剝離開，以便於你們把注意力聚焦在 Smart Table 自己上，本文 Jerry 另外開發了一個 SAP UI5 應用，只包含一個最簡單的 XML 視圖，裏面使用到了 Smart Table 控件。同時，我開發了一個簡單的 Mock 服務器，讓該應用在請求 OData 服務元數據時，由 Mock 服務器把本地工程事先準備好的 metadata.xml 文件的內容，做爲元數據響應，直接返回給應用。這樣我能夠方便地修改本地 metadata.xml 文件，來達到各類測試目的。

關於如何在 SAP UI5 應用裏手動搭建 Mock 服務器，請參考我這篇文章：何以 mock server 的方式本地啓動 SAP UI5 應用，使它不鏈接遠程服務器端的 OData 服務.

本文這個用於演示 Smart Table 控件使用方法的 SAP UI5 應用，其完整源代碼在個人 Github 上。

該應用三個核心文件：

• metadata.xml: 該文件的內容即 OData 服務的元數據，包含加上了 SAP Fiori Elements 系列的自定義註解，咱們稍後會詳細研究該文件內容。當 SAP UI5 應用向服務器發起 OData 服務元數據請求時，該請求被 Mock 服務器攔截，後者將 metadata.xml 的內容做爲 OData 服務元數據響應，返回給應用。
• Products.json: 測試數據 (Mock Data). 當 SAP UI5 應用準備渲染 Smart Table 待顯示的業務數據時，會向遠端服務器發起 OData batch 請求。該請求一樣會被 Mock 服務器攔截，並將該 Products.json 的內容返回給應用。
• server.js: Jerry 開發的 Mock 服務器實現。

XML 視圖裏定義了一個 Smart Table 控件，第 10 行代碼 entitySet="Products", 意思是讓該控件，在運行時"智能地" 將名稱爲 Products 的 OData 模型裏，全部符合某種條件的字段，渲染成表格列項目。

這個包含了 Smart Table 控件的 SAP UI5 應用，最終渲染成包含以下三列的表格：產品 ID，價格 (含金額和貨幣單位) 以及產品名稱。

咱們打開 metadata.xml, 找到了 Product 模型包含的四個屬性字段。這四個屬性字段，都做爲最後渲染出的列項目的備選字段。其中 Price 字段，經過屬性 sap:unit, 和 CurrencyCode 字段關聯起來，做爲同一個表格備選列項目，其工做原理在 Jerry 以前的文章 深刻掌握 SAP Fiori Elements 工做原理的前提條件：理解 Smart Field 裏介紹過。

儘管 Product 模型包含了 4 個字段做爲表格備選列項目，但爲何最終渲染出的頁面裏，咱們只看到了 3 個行項目？名爲 Category 的字段爲何沒能渲染成行項目？

答案在 metadata.xml 的註解區域。

SAP 幫助文檔提到，其所屬的 OData 模型被註解 com.sap.vocabiularies.UI.LineItem 修飾，且類型爲 com.sap.vocabularies.UI.DataField 的字段，在運行時會被 SAP UI5 框架繪製成表格列項目。

爲了驗證這個結論，咱們對 metadata.xml 裏的元數據進行一些修改。好比如今只定義兩個表格列項目，分別爲ProductId 和 Name. 同時，我用 sap:label, 給屬性 ProductId 分配標籤爲 "Jerry產品ID"：

運行時的效果：Name 列表項出如今 ProductId 的左邊，由於其在元數據裏的定義，位置在 ProductId 以前。

至此咱們已經瞭解了 Smart Table 表格列項目渲染的邏輯，最後來看看源代碼實現。

1. 個人 UI5 應用裏，使用了 Smart Table 控件的 XML 視圖，運行時被加載後，會被 SAP UI5 的 XML 模板解析器， XMLTemplateProcessor 的方法 parseTemplate 所解析。XML 視圖包含的 XML 字符串，會被反序列化成 DOM 並進行遍歷。當模板解析器遍歷 DOM 過程當中，遇到 SmartTable 標籤時，調用 SmartTable.init 方法，進行初始化操做：

1. 根據本文前半部分的介紹，咱們已經知道：若是缺少 OData 元數據提供的註解，Smart Table 控件沒法知道該怎麼渲染表格的列項目。所以，SmartTable.js 也在 "OData 服務元數據成功取回" 這個事件上，註冊了一個鉤子函數 _onMetadataInitialised. 當 OData 服務的元數據取回以後，該回調函數被調用：

在該回調函數執行的上下文裏，由於 OData 服務元數據已經處於可訪問狀態，因此 Smart Table 有足夠的信息，可以開始渲染邏輯的執行：

下圖第 97 行的高亮代碼，getLineItemAnnotation, 便是 Smart Table 控件，準備從 Product 這個 EntityType 裏，解析出符合表格列項目渲染要求的字段列表：

注意下圖第 1909 行硬編碼的字符串 com.sap.vocabularies.UI.v1.LineItem, 這就是 UI5 框架代碼裏查找 Smart Table 待渲染列表項字段的依據。最後解析出的兩個列表項字段，Name 和 ProductId，就存儲在函數返回變量 oResolvedAnnotation.

有了這個信息，Smart Table 就知道該渲染哪些字段做爲表格列項目了。

至此，本文已經完成了 Smart Table 控件渲染表格列項目的原理介紹，以及相應的 SAP UI5 框架是如何解析待渲染列項目的源代碼實現的介紹。

七年前，Jerry 剛剛從 ABAP 開發轉到 SAP UI5 開發時，對本文介紹的這些註解概念，理解得似是而非，由於以前用的 ABAP 這門編程語言，沒法像 Java 和 TypeScript 那樣，可以從語言層面提供對註解的原生支持。

後來接觸了 Java Spring 框架，再加上最近使用 Angular 作開發後，對註解的理解也比以前單純閱讀 SAP 文檔要深刻一些了。在 Java，Angular 和 SAP Fiori Elements 裏，雖然這些註解的語法有差別，但目的都一致，即提供一種對註解的目標對象，進行額外數據標註的功能。

好比 Component 是 Angular UI 最基本的組成單元，而 Component 的定義，無非就是普通的 TypeScript class，加上 @Component 註解的修飾而成。該註解能維護 Component 的元數據，告訴 Angular 框架，該 Component 在運行時應該如何被實例化和使用。

但願本文能幫助你們更好地理解 SAP 幫助文檔上對 SAP Fiori Elements 相關 OData 註解的介紹內容。感謝閱讀。

更多閱讀

• 在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用
• 答網友提問：使用 SAP Fiori Tools 建立的 Fiori Elements 應用，如何進行二次開發？
• 本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 服務器上
• 深刻掌握 SAP Fiori Elements 工做原理的前提條件：理解 Smart Field
• 深刻理解 SAP Fiori Elements 工做原理系列之二：如何給 SAP Fiori Elements 應用添加自定義按鈕

更多Jerry的原創文章，盡在："汪子熙":