In July 1995, Taiwan Daewoo released a domestic stand-alone role-playing game called “Chinese Paladin Legend 1”, which can be “a pack of cigarettes, a cup of tea”, sitting in front of the computer for a whole day.

Of course Jerry has played this classic game countless times. In the innermost part of the test cave, you can learn the most powerful spell of ice: snow demon.



After the snow demon cast, the whole screen will render a sky full of snow, attack all the opponent. In this article Jerry explains how to add a snowflake effect to the SAP Fiori Launchpad that is similar to the Snow Demon spell.

Take a look at the Fiori Launchpad with snow in this video.

Jerry started learning JavaScript in 2014, collecting visually cool HTML pages from the web and learning how to implement them in a single step.

You can use this link to access 98 HTML5 apps that Jerry referenced during his learning process:

The vast majority of cool HTML5 apps are implemented through JavaScript manipulation of canvas, a new tag introduced by HTML5.

We implemented the snowflake effect locally and then integrated it into the Fiori Launchpad.

Search engine based on the keyword snow Canvas HTML5, you can find many results:

This implementation is chosen for this article.

Create a local HTML file, copy the 119 lines below into it, open it in your browser, and see the snowflake effect in the video at the beginning of this article.

The code can be copied and pasted directly from Jerry’s Github:

At the heart of this snowflake implementation is the requestAnimationFrame function call on line 92 above. This function is a standard function provided by Windows Global objects that tells the browser to invoke a callback function implemented by the application developer to animate each redraw. We write a loop function in which we use a random number generator to modify the x and y coordinates, size and falling speed of each of the 200 snowflakes. The loop function is theoretically driven by the requestAnimationFrame and is repeated 60 times every second, but in most browsers that follow W3C recommendations, the number of times the callback function is executed usually matches the number of browser screen refreshes.

Now that you understand how this code works, let’s migrate it to Fiori.

Open SAP WebIDE, search for the Launchpad keyword in workspace Preferences, find the SAP Fiori Launchpad Extensibility plug-in, and set it to Enabled.

You will then see the SAP Fiori Launchpad Plugin template in the New project wizard. Create a new Fiori project based on this template:

The wizard will automatically generate the necessary files for the Fiori Launchpad plug-in.

Create a new fla.js file in the Controller folder and transfer the code from the script tag of the standalone snowflake implementation to fla.js:

The reason Jerry used “migrate” instead of “copy” is that JavaScript code in the standalone version won’t work just by copying and pasting it into Fiori.

Think about it, how can a third-party library outside UI5 be introduced into a Fiori project and consumed? Jerry’s previous article explained how to add the function of taking photos with the camera in SAP UI5 application. Flake. Js can be thought of as a module in nodejs. Note the object. extend function call on line 6, which returns a snowflake Object that can be imported by the SAP Fiori application and consumed directly. Several functions developed in the previous stand-alone version with the idea of procedural programming are encapsulated into JavaScript Object methods by object.extend.

In component.js, introduce the Flake object with ap.ui. Define, and then Flake. You can use the methods exposed in the fla.js file.

The code for fla.js and component.js can be found on Jerry’s Github:

Github.com/i042416/Kno… https://github.com/i042416/KnowlegeRepository/blob/master/practice/279_Component.js

After plug-in development, local testing. Right-click Run as SAP Fiori Launchpad Sandbox:

Select the fiorisandBoxConfig. json file in the project as the launch entry and see the effect in the new browser window:

If you encounter a problem, as usual, F12 opens the debugger and uses debug to find the cause:

If it works in the Sandbox, deploy to production by following the steps described in the SAP help, which will not be repeated here.

What happens if you change the RGB value of the snowflake fill color to 0, 0, 0? Pure white snowflakes turn black. Watch this video:

It looks a lot like the dark White Bird’s trick in The Holy Four Days of Darkness. Dark snowstorms of dark white birds are said to extinguish a burning flame in an instant.



Thanks for reading.

Read more

Jerry’s ABAP, Java, and JavaScript are all mixed up in Jerry’s UI5 framework code. SAPUI5, Angular, React and Vue three ways to deploy SAP Fiori Applications Jerry’s Fiori Collection of initial article Jerry will talk to you about Chrome developer tools Using JavaScript to access services on the SAP cloud platform. What do I do when I use UI5 diagnostic tools HTML5 apps + Cordova = platform-specific hybrid apps Create a 3D model view of the master data in SAP UI using pure JavaScript. It’s time to consider Globalization! SAP Fiori + Vue =? How to run SAP UI5 on Ali Cloud and use an anti-aircraft gun to shoot mosquitoes and kill chickens: Running UI5 applications on SAP Kyma in SAP, in addition to producing mobile applications using Cordova, there’s also a way to do this with 200 lines of JavaScript code, How to add the function of using the camera to take photos in SAP UI5 application

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: