SAP Fiori Elements 公开课第二单元视频的台词和课程主要内容

简介: 课程地址很多 SAP 从业者反映,open SAP 上的视频,因为网络原因无法访问,所以我会陆续在我的个人微 信 号“汪子熙”上面,把这些视频配上中文字幕并发布出来,敬请关注。

很多 SAP 从业者反映,open SAP 上的视频,因为网络原因无法访问,所以我会陆续在我的个人微 信 号“汪子熙”上面,把这些视频配上中文字幕并发布出来,敬请关注。


image.png


本文是公开课第二单元视频的中文字幕,由本人手动翻译而成,感谢大家的支持。


第二单元内容:讲解 Fiori Elements Architecture

image.png



以下是视频台词的中文翻译。


====


欢迎大家来到 OpenSAP Fiori Elements 公开课程第一周的第二单元。本单元我们讨论 Fiori Elements 的架构


SAP Fiori Elements 总的来说分为五大组成部分,共同构成了运行时看到的应用程序: (1)Floorplans; (2)OData 服务; (3)注解; (4)配置; (5)定制代码


下图左边第一个图例代表 Floorplan, 比如 Analytical List 或者 Object Page, 由 Fiori Elements 框架提供


image.png


Floorplan 负责应用程序的显示方式及其行为方式的控制


第二,第三部分即 OData 服务和注解,需要应用开发人员维护


二者结合起来,使应用开发人员可以决定应用在屏幕上显示的具体内容,而不需要使用 JavaScript 编程来实现


相反,借助 OData 和 注解,我们提供的实际是语义和行为的抽象描述(abstraction of semantics and behaviors)


这意味着应用开发人员得以专注于业务功能、行为方式以及消费方式的设计中去


当然如果您希望改变 Floorplan 的行为或引入额外的逻辑,Fiori Elements 的灵活性也足以胜任


Fiori Elements 应用提供了两种增强方式:无代码配置 (no-code

configuration) 和定制代码增强 (custom code extensions)


下面我们深入讨论这五个组成部分


从框架提供的 Floorplan 开始介绍


我们可以把 Floorplan 想象成一个蓝图或者模板


image.png


Floorplan 定义了很多占位符,每个占位符包含了一个控件,比如过滤器,工具条,表格控件等等


Floorplan 描述了这个页面所有可能提供给用户使用的功能和行为


比如,当一个用户点击了表格行项目时,用户能够导航到明细页面去,或者跳转到外部应用。这些行为的描述,就维护在 Floorplan 里


一旦 Fiori Elements 应用启动后,框架的 Floorplan 处理器就接管了初始化控制权


框架结合应用开发人员提供的 OData 和注解,将 Floorplan 转化成最终的 SAP UI5 视图


Floorplans 和其控件包含了许多功能,这里举一些例子


用户可以个性化控件,创建不同的变体(variants), 可以共享页面或者给页面设置书签


可以使用 Excel 导出和导入功能


只要后台的 OData 服务支持,用户也可以对数据进行修改或创建,或是触发 Actions


Floorplans 也具有响应式特性,这意味着根据用户的设备或屏幕的不同,Floorplans 会显示不同的内容


最后也是很重要的一点是,Fiori Elements 对 SAP 产品标准原生的支持


如果您开发的 Fiori Elements 应用未包含任何定制代码,那么它在不需要付出额外代价的情况下,本身就已经是一个开箱即用的,符合企业级就绪标准(Enterprise-Ready) 的应用了


下面看看我们到底Fiori Elements 应用开发,到底需要提供哪些构建模块


首先当然是 OData,每一个 Fiori Elements 应用都需要 OData


OData 是一种位于标准 HTTP 之上的协议,定义了如何同后端交换数据的行为


OData 包含数据模型的元描述,定义了模型实体和属性,以及它们之间的关联关系


OData 不仅支持对描述模型标准的增删改查操作


还能触发 Actions 和调用函数


OData 本身具备一个功能强大的查询语言


该语言允许客户端查询优化过的读取请求,对数据进行过滤和搜索


以及对数据进行聚合或限制的功能


OData 能告诉客户端,当前支持以及受限的操作


image.png


在标准 OData 协议的基础上,SAP 对其做了扩展,引入了 Draft 概念,Fiori Elements 对 Draft 概念也支持良好


借助 Draft 概念,我们可以构建更加专业和动态的应用程序,比如保留一个修改过的草稿模型,能够稍后继续编辑


有了 Draft 的支持,我们可以让编辑的模型保持草稿状态,留待稍后继续编辑,甚至可以切换到另一个不同的设备


目前 OData 主要有 V2 和 V4 两个版本


V4 是 V2 的进化版, 不仅包含了新功能, 也是 ISO 批准的 OASIS 标准


Fiori Elements 能充分发挥 OData V4 的优势, 同时 SAP 也极其注意保持两个版本间 Floorplan 风格和布局的稳定与一致


OData 也允许应用开发人员对元数据进行注解(annotate), 这是一个很酷的特性


这样一来,应用开发人员就能够自己描述数据应该如何被框架解析并渲染。举一些例子


使用注释, 我们可以指定金额字段和货币字段,二者在语义上从属于一起


又比如给一个显示字符串内容的字段添加额外的语义: 该字段只能显示一个合法的电子邮箱地址。有了这些注解,框架就能知道如何以正确的外观渲染字段


注释还可以定义行为。例如指定一个 Business Object 是否可以编辑


image.png


注解也可以给出消费提示(Consumption hints), 比如某个字段是否允许被点击


您可能会问,如何创建数据 OData 服务以及注解?


首先我想强调的是,Fiori Elements 支持任何符合 OData 规范的后台服务


但如果可以使用 SAP 后台,则只需要一些简单的鼠标点击,就能迅速创建出 OData 服务


Cloud Application Programming Model (CAP) 和 Restful ABAP Programming Model (RAP) 这两种编程模型


image.png


都能将 CDS View 自动发布成 OData 服务


并且二者都支持在 CDS View 定义里编写注解


即便使用传统的 ABAP 编程模型,我们仍然可以用 SAP Gateway 和注解提供类 (Annotation Provider Class) 来开发 OData 服务


如果注解是 OData 服务的一个组成部分,我们称其为后台驱动式注解 (backend-driven annotations)


尽管如此,由后台提供的注解是可选的


我们也可以在本地注解文件里提供所需的注解,或者采取二者结合的方式


在二者结合的工作模式下,本地注解将会在 Term 字段的级别上,覆盖掉来自后台的注解


本地注解是在应用程序项目中创建的,并遵循应用程序自身的生命周期


我们可以使用本地注解来实现后台尚不能提供的注解功能


或者满足利用同一个 OData 服务来实现多个应用程序变体的需求


有时我们使用的 OData 服务提供商根本不能提供注解服务,此时本地注解就更能发挥作用了


我们已经了解到,Floorplans 利用元数据和注解,来决定页面上要渲染的控件


不仅如此,Floorplan也会考虑由应用开发人员提供的可选配置


还是举例说明


在 List Report Floorplan 中,我们显示了一个表格控件。大家也许知道,SAP UI5 提供了好几种类型的表格控件


根据我们目前的 UX 设计准则,List Report Floorplan 里默认选择的是 ResponsiveTable


但如果您想在 List Report 中使用其他类型的 UI5 表格控件


可以通过 Fiori Tools 加上配置的方式,轻松实现


Fiori Elements 提供了很多这样的配置项


这些配置并不是语义层面的,而是基于具体的应用程序


这就是为什么选择 Table 控件类型的功能,不是作为注解,而是通过配置方式提供的


我们甚至为这个配置提供了分层 (Layering)的设计


假设我们想把表格控件类型改成 GridTable. 但是部分用户在平板电脑和手机上访问该应用


而这些移动平台上 ResponsiveTable 显示效果更佳。这种情况下,管理员或者 Key User 仍然可以通过配置的方式,将表格类型恢复成 ResponsiveTable


前面已经提过,Fiori Elements 提供了大量的 UI patterns 和功能


以及适合大多数业务用例的特性 (普适性)


当然,作为一个框架,Fiori Elements 不可能为所有类型的行为和设计都提供开箱即用的支持


这种情况下,应用开发人员仍旧能够编写定制代码,并集成到 Fiori Elements 应用中去


这些定制代码需要应用开发人员自行在 Fiori Elements 工程中特殊的位置编写


例如 Object Page 里增添一个新的 section, 表格增加一个新的 column, 工具栏里增添一个新的 Action 按钮等等


通过使用由 SAP Fiori Elements 提供的构建块


我们可以快速进行扩展的开发,同时仍然保持整个应用具有一致的外观和体验


但是我们不会有 100% 的灵活性,不能在屏幕的任何位置添加新的控件


这个"限制"也确保了即使屏幕布局由于 SAP 版本升级发生变化后,我们的自定义内容能够始终可用


image.png


也就是说,SAP 版本升级不会影响到应用中的自定义 UI 内容


这个准则同样也适用于我们编写在某些 Hooks 上的自定义代码,比如当用户试图保存一个文档时


在类似 beforeSave 的钩子上, Fiori Elements 提供了所谓的 ExtensionsAPI. 这是一系列方法的集合,能用于自定义代码的编写中


比如当表格行项目被点击时,使用 ExtensionsAPI 拿到被点击的行项目包含的业务数据


需要注意的是,编写扩展代码也是有代价的


应用开发人员负责编写定制代码,因此也必须确保这些代码功能的正确性和稳定性,特别是在升级之后


而且必须确保这些自开发代码满足所有的 SAP 产品标准


本单元的介绍即将结束。简单总结一下,并展望下一个单元的学习目标


这个单元我们讨论了使用 Fiori Elements 开发企业级可用 (Enterprise-Ready) 程序的五大组成部分


由框架提供的 Floorplans, 定义了界面内容的显示和表现形式

2 和 3 分别是 OData 服务和注解,由应用开发人员提供,负责定义应用显示的内容和提供的业务功能


4 和 5 是可选的配置以及定制开发功能,二者允许我们对 Fiori Elements 应用进行微调 (fine tune) 和扩展


本课程的下一单元即第三单元,我们会深入讨论 OData 服务和注解。感谢观看本视频,我们下单元再见


====


OData 服务将您的 Fiori Elements 应用 UI 同后台数据源连接起来,OData 服务提供商包括 SAP S/4HANA,SAP Business Warehouse,SAP Business Technology Platform 和其他外部 OData 服务提供商。


OData 注解,决定了您的 Fiori Elements 的外观以及行为。比如控制哪个字段可以点击,哪个字段可以编辑。同时,OData annotation 能够为 OData 元数据提供更多的语义化信息 - semantic information,比如:


哪个字段允许用户唯一标识一个业务实体

定义字段 A 是字段 B 的货币单位

若干字段应该组合起来,共同显示在一个 form 里

在 ABAP platform 7.5 及其以后的版本,我们可以采取 Core Data Services 的方式,实现 OData 服务.


在 SAP BTP ABAP 编程环境里,除了 ABAP Programming Model for SAP Fiori 之外,我们还可以选择 Restful ABAP Programming Model 以及 Cloud Application Programming Model 来进行 OData 服务开发。


SAP Fiori Elements 基于 SAP 最新的 UX 准则,提供了默认的配置项,使用 SAP Fiori Tools,可以便捷地修改这些配置。


SAP Fiori Elements 应用的扩展手段


自定义控件

使用 SAP Fiori Elements ExtensionAPI 提供的自定义逻辑


相关文章
|
1月前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
15 0
|
1月前
|
UED
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
36 0
|
1月前
|
前端开发 UED
SAP Fiori 到底指什么
SAP Fiori 到底指什么
38 0
|
1月前
|
XML 前端开发 JavaScript
SAP Fiori Launchpad Custom Fields tile 里的 ABAP 语法高亮显示
SAP Fiori Launchpad Custom Fields tile 里的 ABAP 语法高亮显示
14 0
|
2月前
|
XML 存储 JavaScript
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
22 0
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
15 0
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
33 0
|
1月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
28 0