Inhaltsverzeichnis

Alle Kapitel aufklappen
Alle Kapitel zuklappen
Einleitung
19
Teil I Einführung
27
1 SAPUI5 – ein Überblick
29
1.1 Was ist SAPUI5?
29
1.1.1 Entstehung und Entwicklung
30
1.1.2 Dokumentation und Ressourcen
31
1.1.3 Wichtige Begriffe
34
1.1.4 SAPUI5 versus OpenUI5
37
1.1.5 Versionen und Wartung
39
1.1.6 SAP Fiori
40
1.2 Anwendungsfälle
43
1.2.1 HR-Anwendungen
43
1.2.2 Fertigung und Montage
43
1.2.3 Analytische Anwendungen
43
1.2.4 Visualisierung von IoT-Daten
44
2 Grundlegender Aufbau und Ressourcen
47
2.1 Die Model-View-Controller-Architektur in SAPUI5
47
2.1.1 Umsetzung der Model-View-Controller-Architektur
47
2.1.2 Implementierung von Model, View und Controller in SAPUI5
49
2.2 Aufbau und Struktur einer SAPUI5-Anwendung
51
2.2.1 Verzeichnisstruktur eines SAPUI5-Projekts
51
2.2.2 Dateien eines SAPUI5-Projekts
54
2.3 Bibliotheken und Namensräume
55
2.3.1 Modularer Aufbau des Frameworks
55
2.3.2 SAPUI5-Bibliotheken
59
2.3.3 API-Referenz
63
2.4 Typen von Views
67
2.4.1 XML-View
68
2.4.2 JavaScript-View
70
2.4.3 JSON-View
71
2.4.4 HTML-View
72
2.5 Modelle
72
2.5.1 Grundlagen
72
2.5.2 Modelle nutzbar machen
74
2.5.3 Binding-Modi
76
2.5.4 Das JSON-Modell
77
2.5.5 Das XML-Modell
78
2.5.6 Das OData-Modell
79
2.5.7 Das Ressourcenmodell
80
2.6 Datenbindung
81
2.6.1 Binding-Syntax
81
2.6.2 Property-Binding
82
2.6.3 Aggregation-Binding
83
2.6.4 Element-Binding
85
2.6.5 Expression-Binding
86
2.6.6 Calculated Properties
88
2.7 Entwicklungs- und Laufzeitumgebung
89
2.7.1 Lokalisierung
89
2.7.2 Barrierefreiheit
90
2.7.3 Entwicklungswerkzeuge
92
2.7.4 Entwicklungsinfrastruktur
97
Teil II SAPUI5 – Anwendungsentwicklung
99
3 In 7 Schritten zur ersten eigenen Anwendung
101
3.1 Ablaufumgebung aufsetzen
101
3.1.1 Installation von UI5 Tooling
102
3.1.2 Aufsetzen des Projekts
103
3.2 Einführung in den Aufbau einer UI5-Anwendung
105
3.2.1 Verwendung von Views
108
3.2.2 View in View – Einbetten von Views
112
3.3 Einführung in die Arbeit mit einfachen UI5-Controls
115
3.3.1 Aufbau von einfachen UI5-Controls
115
3.3.2 Einführung in die Arbeit mit Modellen
115
3.3.3 Verwenden der Datenbindung
117
3.4 Verwendung von komplexen UI5-Controls
121
3.4.1 Das »Table«-Control als Beispiel für ein komplexes Control
123
3.4.2 Datenbindung bei komplexen Controls – Aggregation-Binding
124
3.5 Die Programmierschnittstelle von SAPUI5
127
3.5.1 Arbeiten mit eindeutigen IDs
127
3.5.2 Nomenklatur der Funktionsnamen
130
3.6 Implementierung von Eventhandlern
131
3.6.1 Einführung in die Eventverarbeitung
131
3.6.2 Arbeiten mit dem Element-Binding
136
3.7 Komponentenorientierte Anwendungsentwicklung
137
3.7.1 Komponenten-Implementierung
137
4 Das Bootstrapping
143
4.1 Einführung in das Bootstrapping von SAPUI5
143
4.2 Komponentenerstellung
147
4.2.1 Imperative Komponentenerstellung
148
4.2.2 Deklarative Komponentenerstellung
148
4.3 Weitere Konfigurationsmöglichkeiten
149
4.3.1 Abhängigkeiten zu Bibliotheken konfigurieren
149
4.3.2 Asynchrone Verarbeitung
149
4.3.3 Integration von SAPUI5-Anwendungen
150
4.3.4 Kompatibilitätskennzeichen
151
5 Instanziierung und Lebenszyklus
153
5.1 Einführung in das Lifecycle-Management von SAPUI5
153
5.1.1 Verarbeitungsschritte einer Anwendung
153
5.1.2 Lebenszyklus von Controllern
157
5.1.3 Lebenszyklus von Controls
159
5.2 Ressourcen verwenden
160
5.2.1 Arbeiten mit der Funktion »sap.ui.define«
160
5.2.2 Verwenden der Funktion »sap.ui.require«
161
6 Benutzeroberflächen und Dialoge gestalten
163
6.1 Gestaltung von einfachen Benutzeroberflächen
163
6.1.1 Verwendung von einfachen Controls
163
6.1.2 Zugriff auf UI-Controls
165
6.1.3 Einführung in die Verwendung einfacher Layouts
168
6.2 Gestaltung von komplexen Benutzeroberflächen
170
6.2.1 Implementieren einer Wertehilfe
170
6.2.2 Komplexe Controls zur Seitengestaltung
172
6.3 Arbeiten mit Fragmenten
178
6.3.1 Typen von Fragmenten
178
6.3.2 Instanziierung von Fragmenten
180
6.3.3 IDs in Fragmenten
182
6.3.4 Fragmente zur Strukturierung einer Anwendung
187
6.4 Dialoge implementieren und verwenden
189
6.4.1 Implementierung eigener Dialoge
189
6.4.2 Verwendung von Dialogklassen
191
7 Arbeiten mit Layouts
197
7.1 Einführung in die Arbeit mit Layouts
197
7.1.1 Layout-Controls
197
7.1.2 CSS-Klassen mit Layoutfunktion
199
7.2 Standardlayouts zur Anordnung von UI-Controls
201
7.2.1 Vertikale und horizontale Anordnung von UI-Controls
201
7.2.2 »Grid«-Layout
202
7.2.3 »ResponsiveFlowLayout«
204
7.3 Arbeiten mit Formularlayouts
205
7.3.1 Arbeiten mit dem »Form«-Control
206
7.3.2 Arbeiten mit dem »SimpleForm«-Control
209
7.4 Arbeiten mit Fullscreen-Layouts
210
7.4.1 Einseitige Layouts
210
7.4.2 Mehrseitige Layouts
211
8 Responsive und adaptive Benutzeroberflächen
217
8.1 Responsiv versus adaptiv
217
8.2 Implementierung responsiver SAPUI5-Anwendungen
219
8.2.1 Responsive Controls
219
8.2.2 Content Densities
226
8.2.3 Responsive Layouts
229
8.2.4 CSS-Klassen
231
8.2.5 Letterboxing
231
8.3 Implementierung adaptiver SAPUI5-Anwendungen
233
8.3.1 Gezieltes Ausblenden von Controls
233
8.3.2 Reduktion von Daten
234
8.3.3 Änderung der verwendeten Controls
235
9 Komponentenorientiertes Programmieren
241
9.1 Aufbau einer Komponente
241
9.1.1 Interface einer Komponente
242
9.1.2 Implementierung einer Faceless-Komponente
246
9.1.3 Implementierung einer Faceful-Komponente
249
9.2 Integration von Komponenten
257
9.2.1 Verwendung deklarieren
258
9.2.2 Faceful-Komponente
259
9.2.3 Faceless-Komponente
264
10 Anwendungsdeskriptor
267
10.1 Aufbau des Anwendungsdeskriptors
268
10.1.1 Der »sap.app«-Namensraum
268
10.1.2 Der »sap.ui«-Namensraum
273
10.1.3 Der »sap.ui5«-Namensraum
275
10.2 Zugriff auf die Konfigurationsdaten zur Laufzeit
285
11 Routing und Navigation
289
11.1 Einführung in die Navigationskonzepte von SAPUI5
289
11.1.1 Übersicht
289
11.1.2 Routingkonfiguration
292
11.1.3 Erste Navigation in der Anwendung
299
11.2 Navigation am Beispiel einer Master-Detail-Anwendung
301
11.2.1 Implementieren der Detailroute
301
11.2.2 Ungültige Routen abfangen
308
11.3 Erweiterte Routingkonzepte
315
11.3.1 Target-Kopplung für verschachtelte Views
315
11.3.2 Routing mit verschachtelten Komponenten
317
12 Arbeiten mit Modellen
321
12.1 JSON-Modell
321
12.1.1 Arbeiten mit einem lokalen JSON-Modell
322
12.1.2 Arbeiten mit REST-Services
324
12.2 Ressourcenmodell
325
12.2.1 Textklassifizierung
328
12.2.2 Zugriff auf die länderspezifischen Textdateien
330
12.2.3 Arbeiten mit dem Objekt »ResourceModel«
332
12.3 OData-Modell
335
12.3.1 Anlegen einer »ODataModel«-Instanz
337
12.3.2 Arbeiten mit dem OData-Modell
341
13 Sortieren, gruppieren und filtern
351
13.1 Sortieren
352
13.1.1 Deklarative Implementierung
353
13.1.2 Imperative Implementierung
356
13.1.3 Eigene Vergleichsfunktion implementieren
360
13.2 Gruppieren
362
13.2.1 Deklarative Gruppierung
362
13.2.2 Imperative Gruppierung
364
13.2.3 Implementierung eigener Gruppierfunktionen
369
13.3 Filtern
371
13.3.1 Deklarative Verwendung von Filtern
372
13.3.2 Imperative Verwendung von Filtern
374
14 CUDQ mit OData
381
14.1 Create
382
14.1.1 Anlegen einer Entität bei One-Way-Binding
384
14.1.2 Anlegen einer Entität über Two-Way-Binding
391
14.1.3 Deep Insert
396
14.1.4 XSRF-Token-Verarbeitung
396
14.2 Update
397
14.2.1 Speichern von Änderungen mit One-Way-Binding
397
14.2.2 Vorgehensweise bei Batch-Verarbeitung
403
14.2.3 Verwenden von ETags
404
14.2.4 Speichern von Änderungen mit Two-Way-Binding
406
14.3 Delete
406
14.4 Query
408
14.4.1 Select-Anfrage implementieren
408
14.4.2 Expand-Anfrage implementieren
410
14.4.3 Kombination aus »select« und »expand«
412
14.4.4 Verwendung von »top« und »skip«
413
14.5 Funktionsimport
414
14.5.1 Einführung in Funktionsimporte
414
14.5.2 Funktionsimport mit SAPUI5 konsumieren
415
14.6 Das OData-Modell der 4-Version – ein Ausblick
416
14.6.1 Unterstützte Datenbindungs-Techniken
419
14.6.2 Sortieren und Filtern mit dem v4-OData-Modell
420
14.6.3 Ändern einer Entität mit dem v4-OData-Modell
421
14.6.4 Löschen einer Entität mit v4-OData-Modell
421
14.6.5 Anlegen einer Entität mit dem v4-OData-Modell
422
15 Eingabevalidierung und eigene Datentypen
425
15.1 Einführung in die Arbeit mit Datentypen
425
15.1.1 Die Klasse »sap.ui.model.SimpleType«
426
15.1.2 Kundenspezifisches Verarbeiten von fehlerhaften Benutzereingaben
428
15.1.3 Zentrales Message-Management
430
15.1.4 Im Lieferumfang befindliche Datentypen
431
15.1.5 Formatter-Klassen von SAPUI5
432
15.2 Implementierung eigener Datentypen
435
15.2.1 Validierung der Eingabe
436
15.2.2 Formatierung der Daten
440
15.2.3 Parsen der Eingabe
441
15.2.4 Fehlerbehandlung selbst implementieren
443
Teil III Weiterführende Themen
449
16 Smart Controls
451
16.1 Einführung in Smart Controls
451
16.2 Verwendung der »SmartTable«
452
16.2.1 Implementierung der Grundfunktionen
452
16.2.2 Zeilenauswahl bei »SmartTable« aktivieren
458
16.3 »SmartFilterBar«
460
16.3.1 Filterkriterien festlegen
467
16.4 »SmartForm«
468
17 Implementierung eigener Controls
473
17.1 Grundlagen der SAPUI5-Control-Entwicklung
473
17.1.1 Control-API
474
17.1.2 Control-Verhalten
475
17.1.3 Control-Renderer
476
17.1.4 Control-Style
477
17.2 UI-Controls erweitern
478
17.2.1 Implementierungsbeispiel: erweitertes Link Control
478
17.2.2 Eigene Enumeration nutzen
481
17.3 Eigene UI-Controls implementieren
483
17.3.1 Der RenderManager
483
17.3.2 Composite Controls implementieren
483
17.3.3 UI-Elemente implementieren
488
17.4 XML Composite Controls implementieren
490
18 Eventbasierte Kommunikation mit dem Event Bus
495
18.1 Einführung in das eventbasierte Anwendungsdesign
495
18.2 Der Event Bus in SAPUI5
497
18.3 Implementierung einer eventgesteuerten Anwendungskommunikation
499
19 Drag and Drop
507
19.1 Grundlagen der Implementierung von Drag and Drap in SAPUI5
508
19.1.1 Bibliothek und Begriffserklärungen
508
19.1.2 SAPUI5-Controls konfigurieren
509
19.1.3 Drag and Drop für eigene Controls
513
19.2 Einsatzszenarien von Drag and Drop und ihre Implementierung
514
19.2.1 Aufbau des Demoszenarios
515
19.2.2 Elemente zwischen Views kopieren
518
19.2.3 Elemente innerhalb eines Controls verschieben
522
19.2.4 Elemente per Drag and Drop löschen
523
19.2.5 Sonderfälle und Einschränkungen
524
20 Theming
527
20.1 CSS
527
20.1.1 HTML und CSS als Teile der API
529
20.1.2 Empfehlungen von SAP zur Arbeit mit CSS
529
20.2 UI Theme Designer
530
20.2.1 Der UI Theme Designer auf der SAP Cloud Platform
531
20.2.2 Der Theme Designer on premise
540
20.2.3 Themes verwenden
544
21 Testen von SAPUI5-Anwendungen
547
21.1 Grundlagen von Tests in SAPUI5
547
21.1.1 Testarten und Technologien für SAPUI5
547
21.1.2 Aufbau einer Testsuite
550
21.2 Unit-Tests mit QUnit
553
21.2.1 Implementieren einer Testseite für Unit-Tests
554
21.2.2 Implementieren von Testmodulen
556
21.3 Oberflächentests mit OPA5
563
21.3.1 OPA5-Grundlagen
564
21.3.2 OPA5-Tests implementieren
565
21.4 Daten simulieren mit dem UI5 MockServer
577
21.5 End-to-End-Tests mit UIVeri5
581
21.5.1 UIVeri5 einrichten
582
21.5.2 Ein erstes Testmodul schreiben
583
21.5.3 Teststrukturierung und »PageObject«-Elemente
585
21.5.4 UIVeri5 starten
588
22 Entwicklungsinfrastruktur
589
22.1 Einführung und Übersicht
589
22.2 Projektsetup mit dem UI5 Tooling
591
22.2.1 Installation und Konfiguration
592
22.2.2 Projekte bauen
596
22.2.3 Proxyserver definieren
598
22.3 Automatisierte Tests für CI
600
22.3.1 Statische Codeanalyse mit ESLint
601
22.3.2 Testautomatisierung mit Karma
604
22.4 Versionsverwaltung mit Git
606
22.4.1 Übersicht und Funktionsweise
606
22.4.2 Einrichtung und Verwendung
609
22.4.3 Empfehlungen für die Entwicklung mit Git
612
22.5 Aufbau einer Continuous-Deployment-Pipeline
617
22.5.1 Build-Server einrichten
619
22.5.2 Pipeline konfigurieren
621
22.5.3 Deployment-Optionen
622
23 Performanceoptimierung und Fehleranalyse
625
23.1 Grundlagen der Performanceoptimierung von SAPUI5-Anwendungen
626
23.1.1 Performance-Checklist
626
23.1.2 Performance-Anti-Patterns
636
23.2 Der Support Assistant
638
23.3 Einführung in die Performanceanalyse
657
23.3.1 Verwenden des SAP Support Tools zur Performanceanalyse
657
23.3.2 Analyse der Interaktion
658
23.4 Typische Fehlersituationen in SAPUI5, ihre Ursache und Lösung
661
23.4.1 File Not Found or Parser Error
661
23.4.2 Fehlerhafte Angabe der Abhängigkeiten
662
23.4.3 Fehlerquelle Aggregation-Binding
663
23.4.4 Fehler bei komplexer Bindung
665
23.4.5 Fazit
666
24 SAP Fiori
667
24.1 Überblick
667
24.1.1 Grundlagen zu SAP Fiori
668
24.1.2 Layouts
669
24.1.3 Floorplans
671
24.1.4 Zentraler Zugriff auf Anwendungen über das SAP Fiori Launchpad
676
24.2 Implementierung einer SAPUI5-Anwendung mit der SAP Web IDE
677
24.2.1 Einführung in die Landschaft
678
24.2.2 Konfiguration des Cloud Connectors
679
24.2.3 Konfiguration der Destination auf der SAP Cloud Platform
686
24.2.4 Implementieren einer Anwendung
690
24.3 Fundamental Library Styles
699
24.3.1 Einführung
700
24.3.2 Nutzung
701
24.4 SAP Fiori Elements
705
24.4.1 Einführung
705
24.4.2 Implementierungsmöglichkeiten für SAP-Fiori-Elements-Anwendungen
708
24.4.3 Implementieren einer SAP-Fiori-Elements-Anwendung
712
24.5 Integration in das SAP Fiori Launchpad
727
Die Autoren
739
Index
741