Zurück zur Blog Übersicht 
Heute möchten wir Euch zeigen wie Ihr die weihnachtliche Stimmung auch in ihr SAP Fiori Launchpad bekommen. Nach diesem Tutorial seid Ihr in der Lage selbst ein SAP Fiori Launchpad Plugin zu entwickeln, welches Euch winterliche Schneeflocken ins Launchpad zaubert.
Entwicklung eines „besonderen“ Fiori Launchpad Plugins
Voraussetzung
Voraussetzung für die Entwicklung ist das SAP Business Application Studio oder die SAP WebIDE. Die Entwicklung des Plugins wurde in diesem Fall mit der SAP WebIDE gemacht. Zusätzlich muss unter den Einstellungen im Projekt die Extension „SAP Fiori Launchpad Extensibility“ aktiviert sein:
Schritt 1 – Anlegen des Projekts
Zuerst gehen wir in die SAP WebIDE und legen ein neues Projekt (Project from template) mit der Vorlage „SAP Fiori Launchpad Plugin“ an.
Wir wählen im Verlauf des Wizards einen geeigneten Projektnamen, eine Plugin ID und einen Titel. Im Bereich „Sample Code“ wählen wir keine der Checkboxen aus.
Schritt 2 – Anlegen der Schneeflocken Animation
Nach dem das Projekt angelegt ist, kümmern wir uns um die Schneeflockenanimation. Dazu legen wir eine neue Javascript Datei „Flake.js“ mit folgendem Quellcode an:
sap.ui.define([
"sap/ui/base/Object"
], function(Object) {
"use strict";
return Object.extend("snow.controller.Flake", {
init: function(x,y) {
var maxWeight = 5,
maxSpeed = 3;
this.x = x;
this.y = y;
this.r = this.randomBetween(0, 1);
this.a = this.randomBetween(0, Math.PI);
this.aStep = 0.01;
this.weight = this.randomBetween(2, maxWeight);
this.alpha = (this.weight / maxWeight);
this.speed = (this.weight / maxWeight) * maxSpeed;
},
randomBetween: function(min, max, round) {
var num = Math.random() * (max - min + 1) + min;
if (round) {
return Math.floor(num);
} else {
return num;
}
},
distanceBetween: function(vector1, vector2) {
var dx = vector2.x - vector1.x,
dy = vector2.y - vector1.y;
return Math.sqrt(dx * dx + dy * dy);
},
update: function() {
this.x += Math.cos(this.a) * this.r;
this.a += this.aStep;
this.y += this.speed;
}
});
});
Du kannst dafür im Projekt einen Ordner „controller“ anlegen und in diesem die Datei erstellen.
Schritt 3 – Animation im Plugin nutzen
In diesem Schritt wollen wir auf die Animation zugreifen. Dazu bearbeiten wir unsere „Component.js“ im Projekt. Zuerst ermöglichen wir unserer Component.js den Zugriff auf die Animation:
sap.ui.define([
"sap/ui/core/Component",
"sap/ui/Device",
"snow/controller/Flake"
], function (Component, Device, Flake) {
return Component.extend("snow.Component", {
Wichtig: Im einzubindenden Code muss die PluginId stehen, welche du gewählt hast. In unserem Fall war dies „snow“. Du findest die PluginId beispielsweise in der Component.js „return Component.extend („PluginId.Component“)“.
Zusätzlich müssen wir das Objekt „Device“ einbinden.
Im nächsten Schritt wollen wir unsere Schneeflocken erstellen. Dazu fügen wir den folgenden Code in die init-Methode unserer Component.js ein:
//var rendererPromise = this._getRenderer();
// define snow variables
this._numFlakes = 200;
this._windowW = Device.resize.width; //window.innerWidth;
this._windowH = Device.resize.height; //window.innerHeight;
this._flakes = [];
// get canvas to paint in: there seems to be only one in
// in the Fiori Launchpad so this should always work
var canvas = $("canvas").get(0);
if(!canvas) {
// stop processing in case we don't have a canvas!
return;
}
this._ctx = canvas.getContext("2d");
// first loop to create all Flake objects
var i = this._numFlakes, flake, x, y;
while (i--) {
// create new flake
flake = new Flake();
// get random location
x = flake.randomBetween(0, this._windowW, true);
y = flake.randomBetween(0, this._windowH, true);
flake.init(x, y);
// add flake
this._flakes.push(flake);
}
// start looping all flakes to move them
this.loop();
Um unsere Schneeflocken in Bewegung zu versetzen, müssen wir noch die Methode loop, welche im vorhergegangenen Schritt aufgerufen wird, in unserer Component.js erstellen:
loop: function() {
var i = this._flakes.length,
flakeA;
// clear canvas
this._ctx.save();
this._ctx.setTransform(1, 0, 0, 1, 0, 0);
this._ctx.clearRect(0, 0, this._windowW, this._windowH);
this._ctx.restore();
// loop through the flakes and "animate" them
while (i--) {
flakeA = this._flakes[i];
flakeA.update();
this._ctx.beginPath();
this._ctx.arc(flakeA.x, flakeA.y, flakeA.weight, 0, 2 * Math.PI, false);
this._ctx.fillStyle = "rgba(255, 255, 255, " + flakeA.alpha + ")";
this._ctx.fill();
if (flakeA.y >= this._windowH) {
flakeA.y = -flakeA.weight;
}
}
// continue animation...
requestAnimationFrame( this.loop.bind(this) );
},
Schritt 4 – Animation testen und deployen
Im letzten Schritt wollen wir unser Plugin testen. Dazu führen wir das Plugin als SAP Fiori Launchpad Sandbox aus:
Sollte die Animation wie gewünscht funktionieren, kann diese auf ihr SAP System deployed und eingerichtet werden. Eine Anleitung zur Einrichtung des Plugins auf dem System finden Sie hier: Activating Plug-Ins on the ABAP Platform - SAP Help Portal
Die vorgestellten Informationen stammen vom Blogbeitrag Surprise your users with a true x-mas user experience: let it snow | SAP Blogs der SAP und wurden in diesem Blog neu auf Deutsch aufbereitet.
