SAP UI的載入動畫效果和幽靈設計(Ghost Design)

這是Jerry 2021年的第 14 篇文章，也是汪子熙公眾號總共第 285 篇原創文章。

在本篇文章之前，Jerry 印象最深的幽靈，應該要算《星際爭霸I》里人族能夠隱形的空中單位 Wraith( 幽靈戰機 ），以及能施放核彈的 Ghost( 幽靈特工).

上週 Jerry 做 SAP Spartacus 開發時，接觸到一個新的和幽靈相關的術語：

Skeleton Design(Ghost Design)

讀了幫助文件後，發現該名詞對我來說只不過是舊瓶裝新酒罷了。

本文目錄

• SAP UI5 Busy Dialog
• 使用代理模式( Proxy Pattern ) 提高 SAP UI5 大尺寸圖片的載入體驗
• SAP Spartacus Spinner 控制元件
• SAP Spartacus 幽靈設計

我對應用軟體的 User Experience 即使用者體驗領域知之甚少。在 SAP 內部，有專門的使用者體驗設計師負責這個領域，因此我也不清楚 Skeleton / Ghost Design 準確的中文翻譯是啥，姑且就直譯成“幽靈設計”吧。

在我看來，無論是幽靈設計，還是之前 SAP UI5 提供的頁面載入動畫效果，都是改善使用者使用體驗的一種手段：提示使用者當前頁面正在載入後臺資料，或是執行一些比較費時的操作。

SAP UI5 Busy Dialog

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朵花瓣組成的花朵，具有不斷旋轉的動畫效果。

可以通過這個視訊檢視執行時效果：

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 的外觀，已經變成了三個大小不斷變化的圓圈。

使用代理模式( Proxy Pattern ) 提高 SAP UI5 大尺寸圖片的載入體驗

我在 2015 年擔任 一個德國 Fiori 客戶上線的 Dev Angel 時，該客戶有一個自開發需求：其產品主資料的配圖動輒超過 10 MB，客戶希望瀏覽器在成功載入這些尺寸巨大的圖片之前，顯示一些載入動畫效果。待到圖片完全載入結束時，再關閉載入動畫，顯示實際圖片。

先看沒有經過任何優化處理的情況下，如何在 SAP UI5 裡使用 Image 控制元件顯示一個 url 指向的圖片：第10行呼叫 SAP UI5 控制元件 Image 例項的 setSrc 方法，載入 BIG_IMAGE 變數指向的圖片。

再看我給客戶推薦的基於圖片代理的解決方案。

這是執行時的效果：

這個方案實現原始碼如下：

上圖程式碼按照執行時執行的先後順序，有4個關鍵點，分別用序號1～4表示：

1. 第10行程式碼，建立一個新的 Image 例項，充當圖片代理的角色。
   
2. 第15行程式碼，UI5 應用裡原始的 Image 例項，呼叫 setSrc 方法，傳入的不是實際的大圖片地址，而是一個儲存在本地的，表示圖片正在載入的 gif 檔案( 客戶自己準備，一個該企業 Logo 旋轉的動畫效果). 這樣，使用者開啟頁面時，首先映入眼簾的，是該本地 gif 檔案 loading.gif 實現的不斷旋轉的動畫效果。
   
3. 第16行程式碼，將待載入大尺寸圖片的 url 通過輸入引數，傳遞給代理 Image 控制元件的 setSrc 方法。這會觸發瀏覽器發起對大尺寸圖片的載入。
   
4. 第13行程式碼，當代理 Image 控制元件觸發的大尺寸圖片載入完成後，觸發其 load 回撥函式。該回撥函式觸發，說明大尺寸圖片的資料已經完全載入到本地，此時在回撥函式裡，將大尺寸圖片的 url 設定給原始 Image 控制元件的 src 屬性，即可將該圖片顯示出來。
   

SAP Spartacus Spinner 控制元件

Spartacus 裡的 Spinner 控制元件作用類似 SAP UI5 Busy Dialog，下面是一個例子：當第九行程式碼的元件屬性 supportedDeliveryModes$.length 可用時，說明當前訂單支援的商品遞貨模式的相關配置資訊，已經從後臺取到前臺了，此時顯示遞貨模式的選擇頁面；否則，則顯示 ID 為 loading 標識的模板頁面，裡面只包含一個 Spinner 控制元件：

這個 Spinner 控制元件的外觀及實現細節，請參考 Jerry 的 視訊。

最後來說說 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 觸發了某些後臺資料載入時，為了提升使用者體驗而引入的一些頁面效果的技術實現，希望對大家有所幫助，感謝閱讀。

更多閱讀

• SAP UI和Salesforce UI開發漫談
  
• SAP UI 搜尋分頁技術
  
• Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版
  
• SAP UI5應用開發人員瞭解UI5框架程式碼的意義
  
• SAP UI5 module懶載入機制
  
• SAP UI5 控制元件渲染機制
  
• HTML原生事件 VS SAP UI5 Semantic事件
  
• SAP UI5控制元件後設資料的後設資料實現
  
• SAP UI5控制元件的例項資料修改和讀取邏輯
  
• SAP UI5控制元件資料繫結的實現原理
  
• SAP UI5控制元件資料繫結的三種模式：One Way, Two Way和OneTime實現原理比較
  
• SAP UI5控制元件ID的生成邏輯
  
• SAP UI5控制元件的多語言(國際化,Internationalization,i18n)支援的實現原理
  
• XML檢視裡的button控制元件
  
• button控制元件和它背後的DOM元素
  
• SAP UI5 OData謠言粉碎機：極短時間內傳送兩個Odata request,前一個會自動被cancel掉嗎
  
• 漫談SAP產品裡頁面上的Checkbox設計與實現系列之一
  
• SAP UI渲染模式：客戶端渲染 VS 伺服器端渲染
  

更多Jerry的原創文章，盡在："汪子熙":