共计 3303 个字符，预计需要花费 9 分钟才能阅读完成。
这是 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 表格列我的项目渲染的逻辑，最初来看看源代码实现。
- 我的 UI5 利用里，应用了 Smart Table 控件的 XML 视图，运行时被加载后，会被 SAP UI5 的 XML 模板解析器，XMLTemplateProcessor 的办法 parseTemplate 所解析。XML 视图蕴含的 XML 字符串，会被反序列化成 DOM 并进行遍历。当模板解析器遍历 DOM 过程中，遇到 SmartTable 标签时，调用 SmartTable.init 办法，进行初始化操作：
- 依据本文前半部分的介绍，咱们曾经晓得：如果不足 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 的原创文章，尽在：” 汪子熙 ”:
