这是Jerry在2021年的第33篇文章，也是王子熙的第309篇原创文章公众号。今天SAP前端开发者使用的SAPFioriElements在2016年被称为SmartTemplate，它在SAP官网的定义是：SmartTemplateisasetofframeworksforthemostcommonlyusedapplicationpatterns,basedonmetadataannotations,plusPre-定义的模板可以在运行时动态生成SAPUI页面。原文：智能模板提供了一个框架，用于在运行时根据元数据注释和最常用的应用程序模式的预定义模板生成UI。SAP官网链接如下：https://experience.sap.com/fi...SAPFioriElements的核心是它所基于的元数据注解，以及基于运行时“智能”生成UI的能力在这些元数据上。由于这种在运行时动态生成UI发生在幕后，因此它对应用程序开发人员来说完全是一个黑盒子。很多开发者都觉得SAPFioriElements的工作原理很神秘。就算想研究它的源码，也无从下手。截至2021年5月，SAPFioriElements支持5种预定义模板：ListreportWorklistObjectpageOverviewpageAnalystlistpage打开Listreporttemplate的XML视图实现源码，可以发现smartfield和smarttable的使用：都属于SAPSmart控件是SAPFioriElements预定义模板的基石。SAP官网对SmartControls的定义：SAPUI5控件的一个特殊集合，可以通过解析OData元数据为普通SAPUI5控件添加一些附加功能。要了解SAPFioriElements的工作原理，了解SmartControls是先决条件之一。而SmartField是SmartControls家族中最简单的一类，所以如果你想研究SmartControls的工作原理，SmartField是最好的学习对象。Jerry开发了一个HelloWorld级别的SAPUI5应用，XML视图只包含一个SmartField。该应用的源代码地址如下。定义SmartField的XML视图源码如下：从Github代码仓库下载应用到本地，运行nodeloca.js后访问如下url打开渲染页面。应用程序渲染出来的页面如下：虽然我们在XML视图中只定义了一个SmartField控件，但是最终渲染出来的页面其实包含了两个输入字段：价格金额（Amount）价格货币单位（UnitCode）另外我没有在XML视图中指定Price字段的标签，那么最终界面中的“Jerry'sprice”是在哪里维护的呢？这就是智能控制的魔力。对于第17行XML视图中的smartField标签，id属性被硬编码为idPrice：在运行时，被SmartField对应的渲染器渲染成一个div标签，id为__xmlview0--idPrice，这是我们之前的两篇文章中已经学到的内容：深入学习SAPUI5框架代码系列之二：UI5控件的渲染器在显示的页面中，没有定义另一个货币单位，即显示EUR的字段在XML视图中。它是基于什么样的逻辑动态生成的？上面提到了SmartField的一大特点就是能够解析OData元数据并为自身添加新的功能，所以我们回过头来仔细查看XML视图中绑定到smartField的属性，它的名字叫Price。在本项目的元数据定义文件metadata.xml中，我们发现了一些端倪：第10行是XML视图中smartField绑定的Price属性，如上图中红色下划线所示。该属性有一个命名空间为sap的注解，注解名称为unit，值为CurrencyCode，表示该字段的单位绑定了OData模型中另一个名为CurrencyCode的字段，也就是指向的第17个点上图中红色箭头的属性行。而我们在最终渲染页面中看到的标签“Jerry'sPrice”是由另一个注解sap:label的值维护的。CurrencyCode属性本身被声明为带有注释sap:semantics的货币代码。如果修改这个值，比如把中间的连接线去掉，改成currencycode，最终呈现的页面如下图，货币单位字段会消失，说明SmartField工作有问题.让我们逐步调试以弄清楚幕后发生了什么。这是我使用的本地测试数据：运行时，数据加载成功后，在数据加载成功的SAPUI5框架的回调函数中，调用setElementBindingContext函数，然后调用propagateProperties函数触发SmartField的初始化处理逻辑。注意下图右侧的调用栈，propagateProperties会将控制权交给SmartField.js，SmartField.js会调用工厂方法_createFactory，根据解析出的OData注解创建对应的普通SAPUI5控件实例，即,sap:开头的注解。所谓普通SAPUI5控件就是sap.m命名控件下的UI5控件。XML视图中定义的元数据注解是通过工具AnnotationHelper.getXXX实现的。比如：getUnit，在属性getLabel上找到sap:unit注解，在属性上找到sap:label注解，等等。看到下图AnnotationHelper.js中isCurrency方法第136行硬编码的currency-code，我们可以恍然大悟，我明白为什么SmartField在改了sap:semantics的注解值后不能正常工作了currency-code到XML视图中的其他值。AnnotationHelper.js解析完一个OData属性的所有注解后，交给ODataHelper，由ODataHelper进行总结，进行下一步。下图是XML视图中的两个OData属性Price和CurrencyCode，它们的元数据注解已经解析完毕。最后，在ODataControlFactory的工厂实现中，直接使用JavaScript关键字new创建一个普通的sap.m.Input控件实例，然后其渲染器生成原生HTML输入标签。标签的id是其父节点的id加上-input后缀。下图是最终呈现的输入标签。通过本文介绍的具体例子，我们可以直观地感受到，SmartField运行时相比XML视图中的定义，可以渲染出内容更加丰富的页面，而这些页面严重依赖SmartField绑定的以sap为前缀的Metadata注解：在目标OData属性上定义。希望通过本文的介绍，能够让你对SmartField的工作原理和功能有更深入的了解，而不是简单的阅读SAP官网的帮助文档。后续Jerry会继续把SAPFioriElements涉及的知识点一一分离出来，并在文章中进行讲解，敬请期待。多读30分钟使用RestfulABAP编程模型开发支持增删改查的Fiori应用Jerry带你了解RestfulABAP编程模型系列二：Action和Validation的实现Jerry带你进入RestfulABAP编程模型系列三：云ABAP应用调试如何基于RestfulABAP模型开发部署一个支持增删改查的Fiori应用。在没有任何前端开发经验的情况下，创建第一个SAPFioriElements应用程序。解答网友提问：使用SAPFioriTools创建的FioriElements应用，如何进行二次开发？如何将本地开发的SAPFioriElements应用部署到ABAP服务器更多Jerry的原创文章在这里：《汪子熙》：
