SAP UI5 – Grundlagenwissen Teil 3 (JavaScript – Vergleich mit ABAP)
In den letzten beiden Blogbeiträgen der SAP UI5 Reihe habe ich mich einmal mit HTML5 und zum anderen mit CSS, (Cascading Style Sheets) der Möglichkeit seiner mit HTML definierten Webseite ein neues Styling zu verpassen, befasst.
Einleitung
In dem heutigen Beitrag geht es nicht um Äußerlichkeiten der Webseite sondern um die Frage, wie es möglich ist, dass meine Webseite mit dem Nutzer interagiert. Hierfür dient die Skriptsprache Javascript. Diese von der Programmiersprache C abgeleitete Skriptsprache ermöglicht dem Nutzer Schaltflächen zu bedienen, Ereignisse auszulösen und zu behandeln und seine Webseite mit diversen Funktionalitäten zu versehen, was für ordentliche Webentwicklung mit SAP UI5 unabdingbar ist.
Als eingeschweißter ABAP-Entwickler möchte ich Ihnen den Umstieg/Einstieg in SAP UI5 erleichtern und versuchen mit einfachen Vergleichen zwischen ABAP und JavaScript die Syntax-Grundlagen zu vermitteln. Im Anschluss, wenn Ihr Interesse geweckt ist, empfehle ich Ihnen in einschlägige Literatur zu dieser interessanten Programmiersprache reinzuschauen.
Dieser Blog dient den Grundlagen von JavaScript und den generellen Syntax Regeln, in meinem nächsten Beitrag zur Oberthematik SAP UI5 zeige ich Ihnen fortschrittliche JavaScript Methoden, Ereignisse und die Möglichkeit HTML-Objekte direkt über den DOM-Baum anzusprechen und zur Laufzeit zu manipulieren.
JavaScript ist eine essentielle Grundlage für die Entwicklung von Anwendung/Applikationen mit SAP UI5. Ähnlich wie bei CSS wird eine JavaScript Datei in Ihre Webseite eingebunden. Dies geschieht, wie Sie bereits aus Teil 1 & 2 dieser Serie wissen, in dem Header der Webseite. Sie können Ihre JavaScript Datei jedoch auch als eigenen HTML5-Tag überall im Bodybereich Ihres HTML-Codes einfügen.
Datentypen
Im Gegensatz zu der Entwicklung im SAP-Umfeld und ABAP gibt es bei JavaScript nicht das umfangreiche Data Dictionary, welches einem ermöglicht eine Vielzahl an Datenelementen, Strukturen und Tabellen anzulegen.
Bei dieser sehr lose typisierten Sprache gibt es folgende Datentypen:
• Boolean
• Number
• String
• Objekte
Zum Vergleich: In ABAP gibt es bereits alleine vier zeichenartige Datentypen:
• Zeichenfelder ( C )
• numerische Zeichenfelder (N)
• Datumsfelder (D)
• Zeitfelder (T)
Variablen deklarieren
Die Deklaration ist ebenfalls deutlich einfacher als im ABAP. Die Variablen werden im ABAP mit dem Zusatz “DATA” deklariert und es muss immer ein konkreter Datentyp oder ein Datenelement an-gegeben werden. Beispielsweise für einen Verkaufsbeleg der Typ “VBAK-VBELN”.
DATA lv_sales_order TYPE VBAK-VBELN.
Im JavaScript wird die Deklaration bereits durch die Wertzuwei-sung durchgeführt, an Stelle des “DATA” wird hier das Schlüssel-wort “var” benutzt.
var text = “Ich bin ein String”;
Durch dieses Statement wird der gerade deklarierten Variable “text” die Zeichenkette “Ich bin ein String” zugewiesen.
Anstelle der “.”- Punktnotation im ABAP wird im JavaScript ein Statement mit dem “;”-Semikolon abgeschlossen.
Der Befehl “var text;” würde die Variable zwar anlegen doch sie hätte den Status “undefined” welche zu vergleichen ist mit dem Status “INITIAL” in ABAP.
Es gibt im JavaScript nicht den Status “INITIAL” wie im ABAP, sondern die Zustände “undefined”, “not defined”, “NaN” (Not a number) und “null”. Der Zustand “null” ist nur bei Objekten rele-vant.
Objektorientierung und Punktnotation
JavaScript ist eine objektorientierte Sprache und die Deklaration von Objekten stellt sich sehr leicht dar:
• var dateObj = new Date();
Mit diesem Beispiel habe ich ein Datumsobjekt angelegt mit dem Namen “dateObj”. Dieses kann ich mit der “.” -Punktnotation ansprechen um die Klassenmethoden der Klasse “Date” auszuführen.
Beispielsweise kann ich so den aktuellen Wochentag als Zahl aus-geben:
var dateObj = new Date( );
var day = dateObj.getDay();
In der Variable “day” würde sich dann abhängig vom Wochentag eine Zahl befinden. Beispielsweise für Montag die Zahl 1.
Im ABAP muss das Objekt zuvor deklariert werden. Hierfür dient die Syntax “TYPE REF TO”. Um ein Objekt zu instanziieren dient der Befehl “CREATE OBJECT” und um eine Methode aufzurufen wird eine “->” – Pfeilnotation genutzt.
Beispiel:
DATA lo_date_object TYPE REF TO ZCL_DATE_INFORMATION.
DATA lv_day TYPE i.
CREATE OBJECT lo_date_object.
*return day as number
lv_day = lo_date_object->getDay( ).
Functions
Einen entscheidenden Vorteil bietet JavaScript: Das sind die sogenannten “functions”. Hier bietet die Skriptsprache die Möglichkeit Funktionen leicht und schnell zu definieren und direkt in der Webseite zu nutzen.
Es ist kein Rückgabetyp notwendig und der Nutzer kann diese Funktionen überall auf seiner Webseite einbetten und Ereignisse unkompliziert behandeln:
Beispiel einer Funktion:
function addNumbers( num1 , num2 ){
alert( num1 + num2 );
}
Diese simple Funktion gibt die Summe von “num1” und “num2” über die Alert-Funktion von JavaScript als Popup im Browser aus.
Wie man sehen kann wird hier die geschweifte Klammer genutzt um den Funktionsblock zu definieren. Innerhalb dieses Blocks können auch beliebig viele lokale Variablen definiert werden, welche nur innerhalb des Blocks bekannt sind.
Wenn in einem Report im SAP mit lokalen Daten gearbeitet werden soll benutzt man interne Tabellen. Diese besitzen einen Zeilentyp. Diese Zeile kann mit einer Struktur aus der Tabelle ausge-lesen werden. Ein kurzes Beispiel verdeutlicht dies:
DATA: lt_interal_table_of_sales_orders TYPE TABLE OF VBAK.
DATA: ls_line_structure_of_sales_order TYPE VBAK.
Durch diese Befehle haben wir eine interne Tabelle von der Dictionary Datenbanktabelle VBAK, der Kundenauftragskopftabelle, erstellt und eine Struktur für eine Zeile dieser Tabelle angelegt.
Um nun Daten aus dieser internen Tabelle zu nutzen benötigen wir eine Leseoperation, entweder eine Schleife oder einen einfachen Zugriff. Diese Befehle wären beispielsweise LOOP oder READ TABLE
In diesem Fall wollen wir die erste Zeile der Tabelle auslesen:
READ TABLE lt_internal_table_of_sales_orders INTO ls_line_structure_of_sales_order INDEX 1.
Arbeiten mit Arrays
Dies ist Ihnen bestimmt nicht neu. Im JavaScript benutzt man sogenannte Arrays. Diese Datenstruktur arbeitet ebenfalls mit einem Index. Dieser geht anders als bei ABAP mit dem Zähler 0 los. Ein Array kann eine Reihe von Elementen enthalten und das Interessante ist, diese müssen nicht den gleichen Datentyp haben. Die Operationen, wie hinzufügen, löschen oder ändern der Daten sind jederzeit möglich. Eine Arrayerstellung ist gleichzusetzen mit einer Objektinstanziierung.
var exampleArray = new Array( );
Sie können dieses Array auch direkt bei der Erstellung mit Werten füllen.
var exampleArrayWithValues = new Array( “Wert1” , “Wert2”, “Wert3”);
Um den Wert2 nun auszulesen benutzt man den Index.
var a = exampleArrayWithValues[ 1 ];
Die Variable “a” enthält nun den String “Wert2”.
Wie gesagt die Hochzählung des Index beginnt bei dem Wert “0”.
Sie können ein Array auch direkt mit Literalen erstellen:
var exampleArray2 = [ “Wert1”, “Wert2” , “Wert3” ];
Vielmehr müssen Sie nicht wissen um die ersten Anfänge in JavaScript zu starten. In meinen Augen ein unverzichtbares Muss für SAP UI5-Entwickler.
Demo: SAP UI5
Diese Anleitung führt sie nicht zum Ziel? Dann schauen Sie sich unsere kostenlose Demo an!
Erstes Beispiel
In einem sehr simplen kleinen Beispiel werde ich nun mit HTML eine Schaltfläche erzeugen, welche ein Ereignis onClick (dieses Event wird ausgelöst wenn der Nutzer die Schaltfläche betätigt) definiert, die wiederum eine eigens dafür erstelle Funktion “buttonClicked” aufruft.
<html>
<head>
<meta charset=”utf-8″ />
<title>Button-JavaScript</title>
<script type=”text/javascript”>
function buttonClicked(){
alert(“Ich wurde gedrückt!”);
}
</script>
</head>
<body>
<button onclick=”buttonClicked()”>Klick Mich</button>
</body>
</html>
Wie man sehen kann, definiere ich das JavaScript-Coding in dem Kopfbereich der Webseite. Die Funktion “buttonClicked” tut nichts anderes als ein Alert-Popup mit dem Text “I have been pressed!” im Browser erscheinen zu lassen.
Im Bodybereich der Webseite habe ich einen Button angelegt, der bei dem Ergeinis “onClick” die gerade erstellte Funktion aufruft. So schnell kann man ein erste JavaScript Interaktion zwischen Benut-zer und Webseite erstellen.
Das ganze sieht dann im Test so aus:
SAPUI5 sample
Ich hoffe ich konnte Ihnen die Grundlagen von JavaScript näher bringen und Ihre Neugierde wecken, die den Einstieg und die Einarbeitung in SAP UI5 erleichtert.
Haben Sie Fragen oder Anregungen zu SAP UI5, HTML oder JavaScript? Gerne beantworte ich diese in der Kommentarfunktion.
Danke für Ihr Interesse.
Unser Video-Kurs „ODATA Services im SAP UI5 Umfeld“
Limitierte Rabattaktion für unseren Kurs “OData Services im SAPUI5 Umfeld”.
Für Besucher von Mission Mobile können wir unseren Kurs „ODATA Services im SAP UI5 Umfeld“ mit kräftigem Rabatt anbieten:
Kurs: “ODATA Services im SAP UI5 Umfeld
PS: Wir haben den Rabatt nur für 20 Käufe erhalten. Falls Sie den Link klicken und keine Vergünstigung mehr angezeigt werden, ist unser Kontingent bereits aufgebraucht.
