SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍

一套适合 SAP UI5 初学者循序渐进的学习教程

作者简介

Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师,SAP 中国技术大使。在长达 15 年的 SAP 标准产品开发生涯里,Jerry 曾经先后参与 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(电商云)等标准产品的研发工作。

Jerry 工作中使用 ABAP, Java, JavaScript 和 TypeScript 进行开发, 对包括 SAP UI5 在内的多款 SAP 自研框架有深入的研究。

教程目录

说明

Jerry 从 2014 年加入 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5,曾经在 SAP 社区和“汪子熙”微信公众号上发表过多篇关于 SAP UI5 工作原理和源码解析的文章。

在 Jerry 这篇文章 对 SAP UI5 一无所知的新手,从哪些材料开始学习比较好? 曾经提到,Jerry 也是从 SAP UI5 菜鸟一路走过来,深知只有 ABAP 开发背景的开发者,向 SAP UI5 开发领域转型的不易,因此我在业余时间设计了这份适合 SAP UI5 不同水平的学习者的学习教程,把开发一个完整的 SAP UI5 应用的流程,拆分成若干个步骤,力求每个步骤里,把涉及到的知识点都涵盖到。

这些知识点可能不像我的 UI5 源码分析系列文章那么深入,但力求做到深入浅出,重要的知识点都配上详细的截图来辅助文字的介绍,便于教程学习者的理解。

本教程每一个步骤的源代码,都存放在我的 Github 上,分别用文件夹 01,02,03 等等来标识,例如步骤 1 的源代码在这里

每一个步骤均是前一步骤的基础上,添加了若干新特性。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者,按照顺序从第一个步骤开始循序渐进地学习,把这些代码下载到本地,配合教程的文字讲解,自己动手,以加深理解。

对于已经有一定基础的 SAP UI5 开发人员,可以通过本文的目录,跳过前面一部分比较基础的章节,直接挑选对自己工作项目有关,或者包含某些知识点自己尚未掌握的章节来有针对性地学习。

大家如果对教程的每个步骤有任何疑问,欢迎在教程对应的步骤文章里给我评论,进行留言。我虽然平时开发工作很忙,但是保证会定期查看大家给我留下的评论,对于里面涉及到的技术疑问,我一定会抽时间做出解答

本教程的第 97 个步骤 SAP UI5 应用开发教程之九十七 - 如何使用客户端 JSON 模型构建一个 Master-Detail-Detail 布局中的明细页面,我们已经搭了一个 Master-Detail 布局的架子起来。

本步骤会继续在第 97 步骤的基础上进行完善。

首先看一下最终完成的效果。访问如下 url:

http://localhost:8080/webapp/...

会看到一个列表页面:

SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍_第1张图片

点击任意一个列表行项目之后,屏幕分为左右两部分,右边显示选中行项目对应的明细页面。注意到地址栏里的 url,也相应的发生了变化:

http://localhost:8080/webapp/...

SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍_第2张图片

此时左边的列表视图和右边的明细页面视图的宽度只比并不是1:1,而是大约1:2,这是 SAP UX 设计有意为之,因为此时用户点击列表行项目之后,说明用户的工作重点即将放在行项目的明细视图上,因此通过这种宽度比来突出明细页面才是当前的工作区域。

同理,点击 Supplier tab 之后,会让 Supplier 区域顶行显示在右边明细页面的顶部,同时自动将明细页面的抬头区域隐藏掉(大家可以同上图明细页面的抬头区域显示效果做一个对比)。这种行为同理,也是为了突出当前用户的聚焦点在 Supplier 区域,因而隐藏了其他不太相关的区域显示内容。

SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍_第3张图片

我们可以使用明细页面的 Pin Header 按钮,将明细页面抬头区域的显示进行 锁定,这样,即使 Supplier tab 被点击时,抬头区域也不会被隐藏起来。

SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍_第4张图片

另外,通过抬头区域这个 Collapse Header 按钮,我们还可以手动隐藏抬头区域的显示。

SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍_第5张图片

Master-Detail 布局广泛应用于 SAP 各个产品的 Fiori 应用中,最典型的就是 SAP S/4HANA,因此这种布局方式非常重要,每个 SAP UI5 开发人员都应该努力掌握。

这个步骤完成之后,运行的动态效果如下 gif 动图所示。

下面是具体的实现步骤。

你可能感兴趣的:(SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍)