一套适合 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/index.html

会看到一个列表页面：

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

http://localhost:8080/webapp/index.html#/detail/94/TwoColumnsMidExpanded

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

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

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

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

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

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

下面是具体的实现步骤。

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

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

作者简介

教程目录

说明

猜你喜欢