Antolovic Einstieg in SAPUI5

3. Auflage 2022
ISBN: 978-3-8362-8903-0
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection

E-Book, Deutsch, 486 Seiten

Reihe: SAP Press

Lernen Sie die UI-Technologie von SAP mit all ihren Funktionen kennen. Ob Anfängerin, Junior-Entwickler oder Dynpro-Profi - dieses praktische Einsteigerbuch vermittelt Ihnen, wie Sie Webanwendungen mit SAPUI5 entwickeln. Dank der Beispiele zu den neuen Entwicklungsumgebungen Visual Studio Code und SAP Business Application Studio sowie nützlicher Gestaltungstipps gelingt Ihnen der Einstieg in SAPUI5 mühelos.

Aus dem Inhalt:

• Erste Schritte in SAPUI5 und OpenUI5
• JavaScript, CSS3 und HTML5
• Entwicklungsumgebung einrichten
• Laufzeitumgebung
• Systemanbindung mit OData
• SAP Fiori Apps
• SAP Business Application Studio
• Visual Studio Code

Miroslav Antolovic ist bei der bsc solutions GmbH & Co. KG als SAP-Entwickler und -Trainer tätig. Er studierte an der Universität Heidelberg Pharmazie und arbeitete als Java- und Webentwickler. 1999 begann er als Anwendungsentwickler bei der SAP AG im Product Lifecycle Management, und 2004 wechselte er zur REALTECH AG, bei der er SAP-Add-on-Produkte entwickelte. Ab 2007 war er als Leiter der SAP-Entwicklung bei der SEEBURGER AG tätig, bis er schließlich 2010 zu bsc solutions wechselte. Sie können Miroslav Antolovic unter der folgenden E-Mail-Adresse kontaktieren: [e-mail].

Autoren/Hrsg.

Antolovic, Miroslav

Inhaltsverzeichnis

Einleitung ... 13  Zum Aufbau des Buches ... 14  Danksagung ... 16  Danksagung zur dritten Auflage ... 17  1.  HTML5 und CSS3 ... 19  1.1 ... Einführung in HTML5 ... 20  1.2 ... Einführung in CSS ... 34  2.  JavaScript ... 45  2.1 ... Grundlagen ... 45  2.2 ... Variablen ... 56  2.3 ... Operatoren ... 59  2.4 ... Kontrollstrukturen - Bedingungen und Schleifen ... 62  2.5 ... Document Object Model ... 73  2.6 ... Ereignisse ... 80  3.  jQuery ... 83  3.1 ... Grundlagen ... 83  3.2 ... Selektoren und Ereignisse ... 84  3.3 ... DOM-Manipulation ... 92  3.4 ... AJAX ... 96  4.  Entwicklungsumgebung einrichten ... 105  4.1 ... SAP Business Application Studio ... 105  4.2 ... Visual Studio Code ... 112  4.3 ... ECMAScript6-Entwicklung ... 116  4.4 ... Vergleich von Visual Studio Code mit SAP Business Application Studio ... 118  5.  Erste Schritte in SAPUI5 ... 119  5.1 ... Webentwicklung auf dem SAP NetWeaver Application Server ABAP ... 120  5.2 ... Model-View-Controller-Architekturmuster ... 128  5.3 ... SAPUI5-Entwicklungsprojekt anlegen ... 130  5.4 ... SAPUI5-Demokit ... 142  5.5 ... Ihre ersten SAPUI5-Anwendungen ... 144  5.6 ... Debugging ... 162  6.  SAPUI5-Laufzeitumgebung ... 169  6.1 ... Initialisierung der Anwendung ... 169  6.2 ... Modelle zur Datenbindung ... 195  6.3 ... Datenbindungstypen ... 216  7.  Weitere Techniken in SAPUI5 ... 239  7.1 ... SAPUI5-Datentypisierung ... 239  7.2 ... Layoutanpassungen ... 248  7.3 ... Components ... 266  7.4 ... Fragments ... 290  7.5 ... Kundeneigene Controls ... 298  7.6 ... Kommunikation mit dem SAP-Backend ... 303  8.  Systemanbindung mit OData ... 309  8.1 ... Open Data Protocol ... 309  8.2 ... SAP Gateway ... 314  8.3 ... OData-Service implementieren ... 315  8.4 ... OData-Service konsumieren ... 337  8.5 ... Smart Controls ... 362  8.6 ... Mit Mockdaten arbeiten ... 368  9.  Beispielentwicklung einer Portalanwendung ... 371  9.1 ... User-Interface-Design entwerfen ... 371  9.2 ... Datenmodell erstellen ... 379  9.3 ... Benutzeroberfläche implementieren ... 380

10.  Beispielentwicklung einer SAP-Fiori-App ... 447  10.1 ... Mobile Lösungen mit SAPUI5 entwickeln ... 449  10.2 ... Anwendungsbeispiel ... 452  10.3 ... Bereitstellung über das SAP Fiori Launchpad ... 464  Über den Autor ... 475  Index ... 477

Leseproben

1    HTML5 und CSS3

In den ersten Kapiteln dieses Buches lernen Sie die Grundlagen der Webentwicklung kennen. Ich widme mich zunächst HTML, der grundlegenden Sprache der Webentwicklung.

Die Basissprache zum Erstellen von Webseiten ist die Hypertext Markup Language (HTML). In diesem Kapitel stelle ich Ihnen die grundlegende Syntax von HTML vor. HTML ist eine Formatierungssprache zur Strukturierung und semantischen Auszeichnung von Inhalten, z. B. von Texten, Bildern und Hyperlinks in Dokumenten. HTML in der fünften Generation (HTML5) bietet gegenüber HTML4 viele neue Funktionalitäten, wie z. B. die Integration von Video, Audio, lokalem Speicher und 3D-Grafiken.

In diesem Buch werden nur die wichtigsten Sprachelemente erläutert; eine vollständige Sprachreferenz finden Sie unter http://www.w3schools.com. Die Sprachspezifikation erfolgt durch das World Wide Web Consortium (W3C), auf dessen Website www.w3.org Sie sich über alle Aktivitäten des Consortiums informieren können. Die HTML-spezifischen Informationen finden Sie unter www.w3.org/html. Das W3C bietet darüber hinaus unter http://validator.w3.org einen Validator für Ihre HTML-Seiten an.

Checkliste

Was Sie für dieses Kapitel brauchen:

• einen Texteditor, wie z. B. Notepad oder Notepad++

• einen installierten Browser

Notepad++ können Sie unter http://notepad-plus-plus.org herunterladen. Wenn Sie diese Beispiele gleich in Visual Studio Code implementieren möchten, blättern Sie zu Kapitel 4, »Entwicklungsumgebung einrichten«, und folgen Sie den dortigen Installationsanweisungen.

Jeder Browser interpretiert eine HTML-Seite individuell, abhängig von der verwendeten Rendering Engine. Aus diesem Grund ist es hilfreich, Ihre erstellten Seiten in verschiedenen Browsern zu testen, wobei der Schwerpunkt immer auf dem in Ihrem Unternehmen eingesetzten Browser liegen sollte. Tabelle 1.1 zeigt die wichtigsten Browser.

Browser	Rendering Engine	Webseite

Firefox

Gecko

http://www.mozilla.org

Microsoft Edge

Chromium (Blink)

http://https://www.microsoft.com

Chrome

Chromium (Blink)

https://www.google.com/chrome

Safari

WebKit

http://www.apple.com/safari

Opera

Blink

http://https://www.opera.com

Tabelle 1.1     Browser und Rendering Engines

1.1    Einführung in HTML5

HTML ist keine Programmiersprache, sondern eine reine Auszeichnungssprache. Mithilfe von HTML strukturieren und formatieren Sie die anzuzeigende Webseite inhaltlich. Der Inhalt eines HTML-Dokuments besteht aus HTML-Elementen; diese werden durch sogenannte Tags markiert. Der Notation eines Anfangs-Tags dienen spitze Klammern (<>), und ein End-Tag wird mit einem zusätzlichen Schrägstrich () notiert. Abgesehen von wenigen Ausnahmen besteht ein vollständiger Beschreibungssatz in HTML immer aus einem Anfangs- und einem End-Tag.

Innerhalb dieser beiden Tags befindet sich der Gültigkeitsbereich für den eigentlichen Inhalt des HTML-Elements, beispielsweise:

Textabschnitt

Das einleitende Tag

signalisiert dem Browser, dass ein Abschnitt (p steht für Paragraph) folgt und der Gültigkeitsbereich bis zum abschließenden Tag

reicht. Der Text innerhalb der Tags wird vom Browser als Text in der Formatierung Abschnitt angezeigt.

1.1.1    Grundgerüst eines HTML-Dokuments

Ein HTML-Dokument besteht grundsätzlich aus folgenden Teilen:

• Dokumenttypdeklaration

• Kopfbereich

• Dokumentkörper

Listing 1.1 zeigt diese Teile. Sie können das Beispiel wie alle anderen Listings in diesem Buch auch im Download-Bereich dieses Buches unter www.sap-press.de/5501 herunterladen (im Bereich Materialien). Der Dateiname innerhalb des Download-Ordners ist daher in den Listingunterschriften jeweils in Klammern angegeben.

charset="UTF-8">

Listing 1.1     Aufbau eines HTML-Dokuments (Seitenrumpf.html)

Die erste Zeile in diesem Beispiel ist die Dokumenttypdeklaration nach dem HTML5-Standard. Jede HTML-Seite wird vom eigentlichen HTML-Tag umschlossen:

Im Kopfbereich werden z. B. suchmaschinenrelevante Metainformationen, der Seitentitel sowie Verweise auf JavaScript oder CSS-Dateien (Cascading Style Sheets, siehe Abschnitt 1.2, »Einführung in CSS«) deklariert.

Zeichencodierung

In diesem Beispiel wird die Zeichencodierung UTF-8 () verwendet. Wenn Sie diese Zeile weglassen, stellt der Browser deutsche Sonderzeichen (z. B. Umlaute) nicht korrekt dar. Wenn Sie die Zeichencodierung nicht setzen, müssen Sie die Sonderzeichen in HTML-Notation schreiben (z. B. Ü für »Ü«):

Überschrift erste Ebene

...

Über Autor(innen)

Antolovic, Miroslav
Miroslav Antolovic ist bei der bsc solutions GmbH & Co. KG als SAP-Entwickler und -Trainer tätig. Er studierte an der Universität Heidelberg Pharmazie und arbeitete als Java- und Webentwickler. 1999 begann er als Anwendungsentwickler bei der SAP AG im Product Lifecycle Management, und 2004 wechselte er zur REALTECH AG, bei der er SAP-Add-on-Produkte entwickelte. Ab 2007 war er als Leiter der SAP-Entwicklung bei der SEEBURGER AG tätig, bis er schließlich 2010 zu bsc solutions wechselte. Sie können Miroslav Antolovic unter der folgenden E-Mail-Adresse kontaktieren: [e-mail].