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

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

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