深入掌握 SAP Fiori Elements 工作原理的前提條件：了解 Smart Field

這是 Jerry 2021 年的第 33 篇文章，也是汪子熙公衆号總共第 309 篇原創文章。

SAP 前端開發者如今使用的 SAP Fiori Elements，在 2016 年時被稱為 Smart Template，其在 SAP 官網的定義是：

Smart Template 是一套架構，針對最常用的應用模式，根據中繼資料注解，加上預定義的模闆，在運作時能夠動态生成 SAP UI 頁面。

原文：Smart templates provide a framework for generating UIs at runtime based on metadata annotations and predefined templates for the most used application patterns.

SAP 官網連結如下：

https://experience.sap.com/fiori-design-web/v1-36/smart-templates/

AP Fiori Elements 的核心就是其基于的中繼資料注解，以及根據這些中繼資料，在運作時 “智能地” 生成 UI 的能力。由于這種運作時動态生成 UI 的行為發生在幕後，對應用開發人員來說完全是一個黑盒子。不少開發人員覺得 SAP Fiori Elements 的工作原理很神秘，即使想研究其源代碼，也不知道該如何入手。

到 2021 年 5 月為止，SAP Fiori Elements 支援 5 種類型的預定義模闆：

List report

Worklist

Object page

Overview page

Analytical list page

打開 List report 模闆的 XML 視圖實作源代碼，能發現 smartfield 和 smarttable 的使用：

二者都屬于 SAP Smart Controls，是構成 SAP Fiori Elements 預定義模闆的基石。

SAP 官網對 Smart Controls 的定義：一種特殊的 SAP UI5 控件集合，能夠通過解析 OData 中繼資料，給普通的 SAP UI5 控件增添一些額外的功能。

要想搞清楚 SAP Fiori Elements 的工作原理，了解 Smart Controls 是前置條件之一。而 Smart Field 是 Smart Controls 大家庭中最簡單的類型，是以如果想研究 Smart Controls 的工作原理，Smart Field 是最佳的學習目标。

Jerry 開發了一個 Hello World 級别的 SAP UI5 應用，XML 視圖裡僅僅包含一個 Smart Field.

應用的源代碼位址如下。

定義了 Smart Field 的 XML 視圖源代碼如下：

将該應用從 Github 代碼倉庫下載下傳到本地，node loca.js 運作後，通路如下 url，即可打開渲染後的頁面。

該應用渲染出來的頁面如下：

雖然我們在 XML 視圖裡隻定義了一個 Smart Field 控件，但最後渲染出的頁面裡，居然包含了兩個輸入字段：

價格金額 (Amount)

價格的貨币機關 (UnitCode)

另外，在 XML 視圖裡我并未指定 Price 字段的标簽，那麼最後界面裡"Jerry的價格"，到底是在哪裡維護的呢？

這就是 Smart Controls 的神奇之處。

第 17 行 XML 視圖裡的 smartField 标簽, id 屬性我寫死成 idPrice:

運作時，被 Smart Field 對應的 renderer，渲染成 div 标簽，id 為 __xmlview0–idPrice，這是我們在之前的兩篇文章裡已經了解過的内容：

深入學習SAP UI5架構代碼系列之二：UI5 控件的渲染器

深入學習SAP UI5架構代碼系列之八：談談 SAP UI5 的視圖控件 ID，以及其和 Angular 視圖的異同

那麼渲染出來的頁面裡，另一個貨币機關，即顯示 EUR 的字段，在 XML 視圖裡根本沒有定義，它到底是根據什麼樣的邏輯動态生成出來的？

既然前文已經提到，Smart Field 的一大特征就是能夠解析 OData 中繼資料，并為自身增添新的功能，是以我們回過頭仔細檢視 XML 視圖裡 smartField 綁定的屬性，其名稱為 Price.

在該項目的中繼資料定義檔案，metadata.xml 裡，我們找到了一些端倪：

第 10 行即是 XML 視圖裡 smartField 綁定的 Price 屬性，如上圖紅色下劃線所示。該屬性具有一個命名空間為 sap 的注解，注解名稱為 unit，值為 CurrencyCode，意思是，該字段的機關，綁定到 OData 模型另一個名為 CurrencyCode 的字段，即上圖紅色箭頭指向的第 17 行的屬性。而我們在最終渲染頁面裡看到的标簽"Jerry的價格"，則通過另一個注解 sap:label 的值維護。

CurrencyCode 這個屬性本身，用注解 sap:semantics 聲明其語義為 currency-code.

如果把這個值修改一下，比如去掉中間的連接配接線，改成currencycode，則最後渲染出的頁面如下圖所示，貨币機關字段将消失，說明 Smart Field 工作出了問題。

下面我們通過單步調試來搞清楚幕後到底發生了什麼。

這是我使用的本地測試資料：

在運作時，該資料成功加載後，在資料加載成功的 SAP UI5 架構回調函數裡，調用 setElementBindingContext 函數, 進而調用 propagateProperties 函數，觸發 Smart Field 的初始化處理邏輯。

注意觀察下圖右邊的調用棧，propagateProperties 會把控制權交給 SmartField.js, 後者調用工廠方法 _createFactory, 根據解析出的 OData 注解，即 sap: 開頭的注解，建立對應的普通 SAP UI5 控件執行個體。所謂普通的 SAP UI5 控件，即 sap.m 命名控件下的 UI5 控件。

XML 視圖裡定義的中繼資料注解，通過工具 AnnotationHelper.getXXX 實作。

比如:

• getUnit, 查找屬性上的 sap:unit 注解
• getLabel, 查找屬性上的 sap:label 注解
• 以此類推

  

  看到下圖 AnnotationHelper.js 裡 isCurrency 方法裡第 136 行寫死的 currency-code, 我們就能恍然大悟，明白為什麼 XML 視圖裡把 sap:semantics 的注解值從 currency-code 改成其他值之後，Smart Field 就無法正常工作的原因了。

  

  AnnotationHelper.js 把一個 OData 屬性所有的注解解析完畢之後，交給ODataHelper，後者進行彙總，進行下一步處理。

下圖展示了 XML 視圖裡關于 Price 和 CurrencyCode 兩個 OData 屬性，其中繼資料注解均已解析完畢。

最後，在 ODataControlFactory 這個工廠實作裡，直接使用 JavaScript 關鍵字 new，建立一個普通的 sap.m.Input 控件執行個體，然後再由其渲染器生成原生的 HTML input 标簽。該标簽的 id 為 其父節點的 id 加上 -input 字尾。

下圖就是最後渲染而成的 input 标簽。

通過本文介紹的具體例子，我們能夠直覺地感受到，較之其在 XML 視圖裡的定義相比，Smart Field 運作時能夠渲染出内容豐富得多的頁面，而這些頁面，極度依賴于 Smart Field 綁定到的 OData 屬性上定義的以 sap: 作為字首的中繼資料注解。

希望通過本文的介紹，大家對于 Smart Field 的工作原理和作用，能相比純粹閱讀 SAP 官網上的幫助文檔，有一個更深入的了解。後續 Jerry 會繼續把 SAP Fiori Elements 涉及到的知識點，逐個剝離出來并分别用文章進行闡述，敬請期待。

更多閱讀

30分鐘用Restful ABAP Programming模型開發一個支援增删改查的Fiori應用

Jerry帶您了解Restful ABAP Programming模型系列之二：Action和Validation的實作

Jerry帶您了解Restful ABAP Programming模型系列之三：雲端ABAP應用調試

如何基于Restful ABAP模型開發并部署一個支援增删改查的Fiori應用

在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用

答網友提問：使用 SAP Fiori Tools 建立的 Fiori Elements 應用，如何進行二次開發？

本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 伺服器上

、