共计 3352 个字符，预计需要花费 9 分钟才能阅读完成。
这是 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/fi…
SAP 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 服务器上
更多 Jerry 的原创文章，尽在：” 汪子熙 ”:
