关于sap:深入掌握-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/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的原创文章,尽在:”汪子熙”:

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据