关于sap:SAP-UI的加载动画效果和幽灵设计Ghost-Design

3次阅读

共计 3656 个字符，预计需要花费 10 分钟才能阅读完成。

这是 Jerry 2021 年的第 14 篇文章，也是汪子熙公众号总共第 285 篇原创文章。

在本篇文章之前，Jerry 印象最深的幽灵，应该要算《星际争霸 I》里人族可能隐形的地面单位 Wraith(幽灵战机），以及能施放核弹的 Ghost( 幽灵特工).

上周 Jerry 做 SAP Spartacus 开发时，接触到一个新的和幽灵相干的术语：

读了帮忙文档后，发现该名词对我来说只不过是旧瓶装新酒罢了。

SAP UI5 Busy Dialog
应用代理模式(Proxy Pattern) 进步 SAP UI5 大尺寸图片的加载体验
SAP Spartacus Spinner 控件
SAP Spartacus 幽灵设计

我对应用软件的 User Experience 即用户体验畛域知之甚少。在 SAP 外部，有专门的用户体验设计师负责这个畛域，因而我也不分明 Skeleton / Ghost Design 精确的中文翻译是啥，权且就直译成“幽灵设计”吧。

在我看来，无论是幽灵设计，还是之前 SAP UI5 提供的页面加载动画成果，都是改善用户应用体验的一种伎俩：提醒用户以后页面正在加载后盾数据，或是执行一些比拟费时的操作。

Jerry 从 2014 年开始应用 SAP UI5 进行 Fiori 开发，经验了 Fiori 1.0 到 2.0 的版本迭代。还记得解决的第一个 CRM Fiori 利用 My Opportunities 的 bug，症状就是批改了 Opportunity 数据之后，用户能够短时间内疾速点击下图的 Save 按钮，从而产生多个到 CRM 后盾的 OData 保留申请。

过后我的修复该问题的策略就是，在 Save 按钮点击之后，设置一个 Busy Dialog，让其锁住整个页面。这样，用户没有机会再点击 UI 进行任何操作了。直至 OData 申请在后盾胜利实现，或者收到谬误提醒，再敞开该 Busy Dialog，页面就能从新复原可点击状态。

在 Fiori 1.0 时代，Busy Dialog 的外观是一个由 5 朵花瓣组成的花朵，具备一直旋转的动画成果。

能够通过这个视频查看运行时成果：

https://v.qq.com/x/page/y3225…

Jerry 已经写过一篇 SAP 社区博客：Fiori Busy Dialog – when is it opened and closed

该文章介绍了 SAP UI5 Busy Dialog 在 Fiori 利用中的应用场景。

一个典型的例子是，用户点击 Fiori Launchpad tile，跳转到某个具体的 Fiori 利用时，浏览器地址栏里的 url 发生变化，sap.ui.controller.doHashChange 会调用 BusyDialog.open 办法，绘制一个花瓣的动画成果：

如 Jerry 之前的文章深刻学习 SAP UI5 框架代码系列之二：UI5 控件的渲染器所述，这个花瓣成果的实现位于其渲染器 LoadingDialogRenderer 的办法 renderFioriFlower 内：

5 片花瓣的视觉效果，通过 5 个 div 元素实现：

而花瓣旋转的动画成果，通过 div 元素 css 类的 animation 系列属性实现：

到了 Fiori 3.0，Jerry 发现 Busy Dialog 的外观，曾经变成了三个大小一直变动的圆圈。

我在 2015 年负责一个德国 Fiori 客户上线的 Dev Angel 时，该客户有一个自开发需要：其产品主数据的配图动辄超过 10 MB，客户心愿浏览器在胜利加载这些尺寸微小的图片之前，显示一些加载动画成果。待到图片齐全加载完结时，再敞开加载动画，显示理论图片。

先看没有通过任何优化解决的状况下，如何在 SAP UI5 里应用 Image 控件显示一个 url 指向的图片：第 10 行调用 SAP UI5 控件 Image 实例的 setSrc 办法，加载 BIG_IMAGE 变量指向的图片。

再看我给客户举荐的基于图片代理的解决方案。

这是运行时的成果：

https://v.qq.com/x/page/n3225…

这个计划实现源代码如下：

上图代码依照运行时执行的先后顺序，有 4 个关键点，别离用序号 1～4 示意：

第 10 行代码，创立一个新的 Image 实例，充当图片代理的角色。
第 15 行代码，UI5 利用里原始的 Image 实例，调用 setSrc 办法，传入的不是理论的大图片地址，而是一个存储在本地的，示意图片正在加载的 gif 文件(客户本人筹备，一个该企业 Logo 旋转的动画成果). 这样，用户关上页面时，首先映入眼帘的，是该本地 gif 文件 loading.gif 实现的一直旋转的动画成果。
第 16 行代码，将待加载大尺寸图片的 url 通过输出参数，传递给代理 Image 控件的 setSrc 办法。这会触发浏览器发动对大尺寸图片的加载。
第 13 行代码，当代理 Image 控件触发的大尺寸图片加载实现后，触发其 load 回调函数。该回调函数触发，阐明大尺寸图片的数据曾经齐全加载到本地，此时在回调函数里，将大尺寸图片的 url 设置给原始 Image 控件的 src 属性，即可将该图片显示进去。

Spartacus 里的 Spinner 控件作用相似 SAP UI5 Busy Dialog，上面是一个例子：当第九行代码的组件属性 supportedDeliveryModes$.length 可用时，阐明以后订单反对的商品递货模式的相干配置信息，曾经从后盾取到前台了，此时显示递货模式的抉择页面；否则，则显示 ID 为 loading 标识的模板页面，外面只蕴含一个 Spinner 控件：

这个 Spinner 控件的外观及实现细节，请参考 Jerry 的视频：

https://v.qq.com/x/page/w3160…

最初来说说 SAP Spartacus 的幽灵设计。

Spartacus B2B 功能模块里，失常的 Cost Centers 列表显示如下：

在这些 Cost Center 的数据从后盾取回来之前，页面显示如下，这种设计在 SAP Spartacus 的帮忙文档里，被称为 Skeleton 或者 Ghost Design：

这些在实在数据尚未从后盾加载结束之前，以“占位符”的形式显示在前台的灰色矩形条，绑定在 Angular Component 里的数据，就称为幽灵数据(Ghost Data).

从 Spartacus list.service.ts 的实现源代码能看出，幽灵数据就是一个 length 属性值为 10 的空数组。

在 Chrome 开发者工具里，能察看到这些幽灵数据具备对应的 CSS class，这使得它们具备灰色矩形的视觉外观：

Cost Center 表格显示的数据最终通过 list.service.ts 从 SAP Commerce Cloud 后盾取出，取数逻辑通过 Angular 响应式编程库 RxJS 的 pipe 办法驱动：第 101 行 switchMap 操作符里的箭头函数，输出参数 pagination 蕴含了去 Commerce Cloud 取数据应用的分页设置，函数体 this.load 发送 HTTP 申请，生产 Commerce Cloud 的 OCC API. 而第 102 行的 startWith 操作符，语义上相当于给 pipe 驱动的 Observable 流赋上一个初始值，该初始值即为 length 属性为 10 的空数组。

这样，从运行时序来说，任何生产 getData 函数返回的 Observable 对象的 Angular UI 组件，都会先显示 startWith 设置的初始值，即幽灵数据。待从 Commerce Cloud 后盾加载的实在数据返回给浏览器之后，组件主动刷新并显示这些实在的业务数据。

本文介绍了 Jerry 工作过的 SAP 产品里，当用户操作 UI 触发了某些后盾数据加载时，为了晋升用户体验而引入的一些页面成果的技术实现，心愿对大家有所帮忙，感激浏览。

更多浏览