SAP Fiori Busy Dialog的设计原理
Recently in order to analyze one performance issue on my responsible CRM Fiori application, I was asked to research the behavior of the Flower-like animation as displayed below. Every time you click a tile to navigate to a Fiori application from launchpad, you will see this animation.
Have you even considered when it appears in UI and when vanishes?
(1) When it appears in UI
According to callstack, the Flower-like animation, technically speaking, the BusyDialog will be opened every time there is change on url, which you could observe in address bar in your browser. This animation is implemented via in /sap/bc/ui5_ui5/ui2/ushell/resources/sap/m/BusyDialog.js
(2) How is the Flower animation rendered
The entry point of rendering logic is in line 2019 below in file: /sap/bc/ui5_ui5/ui2/ushell/resources/sap/ui/core/Popup.js.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n7XSn8ZG-1597138252478)(https://upload-images.jianshu.io/upload_images/2085791-3eec2ad25961dbeb.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
And here is the Flower rendering logic:
From here we know that the Flower we see in UI actually consists of FIVE ( why five? see line 97 below
) different div tag with well-prepared CSS class.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zJkuEbB8-1597138252489)(https://upload-images.jianshu.io/upload_images/2085791-4abe6965c1d80e1a.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
(3) When the Flower vanishes
There is a call in shell controller which will check whether the Flower busy dialog is still opened. If so, just put the close operation into the event queue with 0.3 second’s delay. It does not mean that the busy dialog will be closed after exactly 0.3 seconds due to JavaScript single thread execution pattern.
Also in the end of UI navigation, the UI framework will also attempt to close busy dialog if any.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8WjOTQ6n-1597138252492)(https://upload-images.jianshu.io/upload_images/2085791-392a1a479a1b8be6.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
(4) Small experiment
Change the default 300 to 30000 in the following file in Chrome development tool:
/sap/bc/ui5_ui5/ui2/ushell/resources/sap/ushell/ui/launchpad/LoadingDialog.js
It means when you click any tile in Launchpad, you will see the Flower animation for totally 30 seconds before the application could be available to use.
See this video for effect: https://github.com/i042416/jerryslide/blob/master/video/flower effect.wmv
要获取更多Jerry的原创文章，请关注公众号"汪子熙":
