SAPUI5 Syntax Spickzettel

  • Alle Sprachen und Dateitypen für SAPUI5
  • Beispiele für die wichtigsten Dateien
  • Konzepte in SAPUI5

Einleitung & Inhalt

Dieses Büchlein soll eine Referenz zum Nachschlagen sein. Kein vollständiges Lehrbuch, kein Tutorial. Da wo man sonst einen zweiten Bildschirm braucht, um sich etwas nebendran zu halten. Es ist gemacht, um den Einstieg in SAPUI5 zu erleichtern, wenn man die ersten Übungen damit macht.

Inhalt

  • Pfade auf dem Webserver
  • Dateiformate und Sprachen
    • HTML Syntax
    • CSS Syntax
    • XML Grundlagen
    • JSON Dateiformat
    • JavaScript Sprache
    • YAML Dateiformat
  • Ordnerstruktur in SAPUI5
    • index.html
    • XML Views
    • Controller
    • manifest.json
  • SAPUI5 Konzepte
    • Data Binding
    • Navigation

Pfade auf dem Webserver

In unseren Dateien gibt es oft Referenzen auf andere Dateien. Dafür gib es unterschiedliche Notationen.

Absolute Pfade

Ein absoluter Pfad ist eine vollständige URL mit Protokoll. Diese verwenden wir für den Zugriff auf andere Domänen. Beispielsweise um die SAPUI5 Bibliotheken zu laden:

<script
    ...
    src="https://sdk.openui5.org/resources/sap-ui-core.js"
    ...>
</script>

Relative Pfade

Alle Dateien, die sich auf dem gleichen Webserver befinden, können relativ adressiert werden. Das hat den Vorteil, dass man vom Hostnamen entkoppelt ist.
Es gibt mehrere Varianten der relativen Pfade. Allen gemeinsam ist: Sie beginnen nicht mit dem Protokoll (http/https).

  • beginnt mit einem Schrägstrich - Relativ zum Hauptverzeichnis (Root). Beispiel:
    <img src="/favicon.ico"/>
  • beginnt nicht mit einem Schrägstrich - Relativ zur aktuellen Datei
  • beginnt mit zwei Punkten - Der Pfad beginnt eine Verzeichnisebene unter der aktuellen Datei.

HTML

HTML (Hypertext Markup Language) ist die Standardmarkupsprache zum Erstellen von Webseiten und Webanwendungen. Die HTML-Syntax besteht aus einer Reihe von "Tags", die verwendet werden, um den Inhalt auf der Seite zu strukturieren. Hier ist eine kurze Übersicht über die grundlegende Syntax von HTML.

HTML in SAPUI5

Das HTML-Format hat in SAPUI5 zwei Verwendungen. Zum einen legen wir mindestens eine HTML-Seite an, die als Einstiegspunkt für unsere Anwendung dient. Diese heist üblicherweise index.html .
Zum anderen wird aber auch sehr viel HTML-Code vom SAPUI5 Framework aus den anderen Dateien generiert. Hier hilft die Kenntnis der Sprache, wenn wir den erzeugten Code im Browser mit den Entwicklertools (F12) betrachten.

Syntax von HTML

HTML ist grundsätzlich nicht casesensitiv. Es wird aber empfohlen, alle Bezeichner für Tags und Attribute in Kleinbuchstaben zu schreiben.

HTML

HTML Dokumente

Ein HTML Dokument beginnt normalerweise mit einer Doctype-Deklaration und hat eine spezifische Struktur.

<!DOCTYPE html>
<html>
<head>
    <title>Titel der Webseite</title>
</head>
<body>
    <h1>Überschrift</h1>
    <p>Ein Absatz</p>
</body>
</html>

Tags & Elemente

Ein vollständiges HTML-Element enthält den Start-Tag, den Inhalt und den End-Tag.

<p>Dies ist ein Absatz.</p>

Elemente können andere Elemente enthalten.

<ul>
    <li>Element 1</li>
    <li>Element 2</li>
</ul>

Attribute

Elemente können Attribute haben, die zusätzliche Informationen über das Element bereitstellen. Je nach Tag sind unterschiedliche Attribute relevant. Hier ein paar Beispiele:

<a href="https://www.example.com">Ein Link</a>
<div class="spalte1">Inhalt in Spalte 1</div>
<h3 id="section_attributes">Attribute</h3>
<div
    data-sap-ui-component
    data-name="de.brandeis.training.demo"
    data-id="container"
    data-settings='{"id" : "de.brandeis.training.demo"}'
    data-handle-validation="true"
></div>

HTML

Kommentare

Sie können Kommentare in Ihrem HTML-Code hinzufügen, die vom Browser ignoriert werden.

<!-- Dies ist ein Kommentar -->

Leere Elemente

Einige HTML-Elemente haben keinen Inhalt und schließen sich selbst ab.

<img src="bild.jpg" alt="Ein Bild">
<br>

Spezielle Zeichen

Um spezielle Zeichen in HTML darzustellen, die in der Syntax eine Bedeutung haben, wie z.B. < und >, können Sie sogenannte HTML-Entitäten verwenden.

&lt; für <
&gt; für >

HTML

Wichtige HTML Tags

Die folgende Tabelle zeigt einige wichtige HTML Tags:

Tag Beschreibung
<!DOCTYPE html> Deklariert den Dokumenttyp und die HTML-Version
<html> Das Hauptelement, das ein HTML-Dokument umfasst
<head> Enthält Metainformationen über das Dokument
<meta> Bietet Metadaten wie Zeichenkodierung
<title> Setzt den Titel des Dokuments
<body> Enthält den sichtbaren Inhalt der Seite
<h1>, <h2>, ... Überschriftentags von Ebene 1 bis 6
<p> Absatz
<a href="URL"> Hyperlink
<img src="URL"> Bildtag
<ul>, <ol>, <li> Listen (ungeordnet, geordnet, Listenelement)
<table>, <tr>, <td>, <th> Tabelle, Tabellenzeile, Tabellenzelle, Tabellenüberschrift.
<br> Zeilenumbruch
<div> Ein generischer Container für Flussinhalt
<span> Ein generischer Container für Inline-Inhalt
<form> Erstellt ein Formular
<input>, <textarea>, <button>, <select>, <datalist> Formularelemente

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) ist eine Stilsprache, die dazu verwendet wird, das Aussehen und Layout von Webseiten zu gestalten. Die grundlegende Syntax von CSS besteht aus einer Kombination aus Selektoren und Deklarationsblöcken.

CSS in SAPUI5

Es gibt in SAPUI5 einige vorgefertigte CSS-Klassen, die in jedem Theme unterstützt werden. Diese sollten immer bevorzugt verwendet werden. Es ist aber möglich, auch eigene CSS-Klassen anzulegen.

Einbinden von CSS

Damit eine HTML-Seite die Stile aus einer CSS-Datei verwenden kann, muss diese eingebunden werden. Es muss also in der HTML-Datei ein Verweis auf die CSS-Datei stehen:

<link href="styles.css" rel="stylesheet" />

Alternativ dazu kann CSS auch Inline definiert werden. Im HTML-Header kann man den speziellen Tag <style> verwenden, um CSS-Regeln für diese HTML-Dokument zu definieren.

<style>
  h1 {color:red;}
  p {color:blue;}
</style>

Eine weitere Alternative der Formatierung ist das style-Attribut direkt an dem betreffenden HTML-Element:

<h1 style="color:blue;text-align:center">Header</h1>

CSS

Struktur von CSS Regeln

Die CSS Regeln sind wie folgt aufgebaut:

selektor{
    Eigenschaft: Wert;
    ...
}

Der Selector bestimmt, welche HTML-Elemente gestaltet werden sollen. Hier zielt der Selektor p auf alle <p>-Elemente (Absätze) auf einer Webseite ab.

Nach dem Selektor folgt ein Block von Deklarationen, die in geschweiften Klammern { } eingeschlossen sind. Jede Deklaration besteht aus einer Eigenschaft und einem Wert, die durch einen Doppelpunkt getrennt sind.

p {
    color: red;
    font-size: 16px;
}

Hier wird für alle <p>-Elemente die Textfarbe (color) rot (red) und die Schriftgröße (font-size) 16 Pixel festgelegt.

Kommentare

CSS-Kommentare beginnen mit /* und enden mit */.

/* Dies ist ein CSS-Kommentar */

Wichtige Masseinheiten

In CSS können verschiedene Maßeinheiten verwendet werden, um Größen wie Breite, Höhe, Abstand und andere Dimensionen anzugeben:

Maßeinheit Beschreibung
px Pixel, eine feste Maßeinheit, die sich auf die Anzeigegeräte bezieht.
% Prozent, eine relative Maßeinheit, bezogen auf das übergeordnete Element.
em Relativ zur Schriftgröße des Elements. 1em entspricht der aktuellen Schriftgröße.
rem Relativ zur Schriftgröße des Wurzelelements (html).

CSS

Wichtige CSS Selektoren

Die folgende Liste zeigt eine Übersicht über die wichtigsten CSS Selektoren.

Selektor Beschreibung
* Alle Elemente
.klassenname Alle Elemente mit der Klasse "klassenname"
#id Das Element mit der ID "id"
element Alle Elemente des gegebenen Typs
element, element Beide Elementtypen (z.B. h1, h2)
element element Alle inneren Elemente im äußeren Element
element > element Alle direkten Kinder des gegebenen Elements
element + element Das unmittelbar nachfolgende Element
element ~ element Alle nachfolgenden Geschwisterelemente
[attribut] Elemente mit einem bestimmten Attribut
[attribut="wert"] Elemente mit einem Attribut, das den angegebenen Wert hat
[attribut^="wert"] Elemente, deren Attributwert mit "wert" beginnt
[attribut$="wert"] Elemente, deren Attributwert mit "wert" endet
[attribut*="wert"] Elemente, deren Attributwert "wert" enthält
:active Das aktive Element (z.B. geklickter Link)
:hover Elemente, über die der Mzeiger schwebt
:focus Das Element, das den Fokus hat

CSS

Wichtige CSS Eigenschaften

Die folgende Tabelle enthält einige CSS Eigenschaften. Aber nicht jede Eigenschaft ist für jedes Element sinnvoll.

Hier ist die überarbeitete Tabelle, wobei die Beschreibungen jetzt nur angeben, was die jeweilige CSS-Eigenschaft ändert:

Eigenschaft Beschreibung
color Textfarbe
background-color Hintergrundfarbe eines Elements
background-image Hintergrundbild eines Elements
font-family Schriftfamilie für den Text
font-size Schriftgröße des Textes
font-weight Schriftstärke (z.B. "normal" oder "bold")
font-style Schriftstil, z.B. "normal" oder "italic"
text-align Horizontale Ausrichtung des Textes
line-height Höhe einer Textzeile
letter-spacing Abstand zwischen Buchstaben
text-decoration Dekorationen für den Text (z.B. "underline")
width Breite eines Elements
height Höhe eines Elements
margin Äußerer Abstand eines Elements
padding Innerer Abstand eines Elements
border Rahmen eines Elements
border-radius Rundung der Ecken eines Rahmens
display Darstellungsart (z.B. "block" / "inline")
position Art der Positionierung eines Elements
z-index Stapelreihenfolge von Elementen
opacity Transparenz eines Elements
visibility Sichtbarkeit eines Elements

XML

XML (Extensible Markup Language) ist eine Auszeichnungssprache, die dazu dient, Daten in einer strukturierten Form darzustellen. Im Gegensatz zu HTML, das darauf abzielt, Daten zu präsentieren, konzentriert sich XML auf die Datenbeschreibung selbst.

XML in SAPUI5

Die Oberflächendefinitionen von Views oder Fragmenten können als XML-Datei gespeichert werden. Darüber hinaus können auch XML-Datenmodell definiert werden.

Die XML-Definition von Views ist das empfohlene Vorgehen der SAP.

Wohlgeformtheit

Ein XML-Dokument muss wohlgeformt sein, was bedeutet, dass es bestimmten Regeln folgen muss, wie z.B. jedes Start-Tag muss ein entsprechendes End-Tag haben, Tags müssen korrekt verschachtelt sein und es darf nur ein Wurzelelement geben.

Elemente

Ein XML-Dokument besteht aus Elementen, die durch Start- und End-Tags definiert werden.

<element> Inhalt </element>

Ausnahme hiervon sind leere Tags, die alternativ auch self-closing geschrieben werden können:

<element />

XML

Verschachtelung

Elemente können andere Elemente enthalten.

<buch>
    <titel>Mein Buchtitel</titel>
    <autor>Max Mustermann</autor>
</buch>

Attribute

Elemente können Attribute haben, die zusätzliche Informationen bereitstellen.

<note prioritaet="hoch">Dies ist eine wichtige Notiz.</note>

Case-Sensitivität

XML ist case-sensitiv. Das bedeutet, dass <element> und <Element> als unterschiedliche Tags betrachtet werden.

Prolog

XML-Dokumente können mit einem Prolog beginnen, der die XML-Version und möglicherweise eine Zeichencodierung angibt.

<?xml version="1.0" encoding="UTF-8"?>

Kommentare

Sie können Kommentare in Ihrem XML-Code hinzufügen.

<!-- Dies ist ein Kommentar -->

Spezielle Zeichen

Um spezielle Zeichen zu repräsentieren, die in der XML-Syntax eine Bedeutung haben (z.B. <, >, &), müssen Sie HTML-Entitäten oder CDATA verwenden.

&lt; für <
&gt; für >
&amp; für &

Oder Sie können CDATA verwenden, um Text zu umschließen, der Zeichen enthält, die sonst als Markup interpretiert werden würden:

<![CDATA[Text mit <, > und & Zeichen]]>

JSON

JSON (JavaScript Object Notation) ist ein leicht verständliches Datenformat, das häufig für den Austausch von strukturierten Daten verwendet.

Der Name deutet es auch schon an: JSON ist ein Teil von JavaScript. Das bedeutet, dass man innerhalb von JS jederzeit auch JSON Objekte nutzen kann.

JSON in SAPUI5

In unseren SAPUI5 Anwendungen wird die JSON Syntax gerne verwendet, um Testdaten oder Konfigurationsdaten zu speichern. Das können entweder innerhalb von JavaScript Dateien JSON-Objekte sein oder auch separate Dateien.
Typische Beispiel sind Testdaten für einen Mock-ODATA-Service, der echte Daten simuliert.

Grundsätzlich

Das JSON Dateiformat ist Case-Sensitiv. Groß- und Kleinschreibung sind also wichtig. Die Formatierung von JSON ist jedoch technisch nicht relevant. Eine korrekte Einrückung erhöht die Lesbarkeit aber enorm.

Kommentare

Kommentare sind in JSON nicht vorgesehen. Hilfsweise kann man pseudo-Attribute anlegen, die eigentlich nicht gebraucht werden.

JSON Sytnax

Objekte

Ein Objekt ist in jedem JSON Dokument die oberste Ebene. Darunter können auch wieder Objekte sein. Die Reihenfolge der Schlüssel/Wert-Paare in einem Objekt spielt keine Rolle.

  • Objekte stehen in geschweiften Klammern {}
  • Der Doppelpunkt trennt Schlüssel und Werte
  • Schlüssel stehen in Anführungszeichen
  • Schlüssel-Wert-Paare werden durch Kommas getrennt
{   
    "name": "John",
    "age": 30,
    "city": "New York" 
 }

Arrays (Listen)

Arrays werden in eckigen Klammern [] dargestellt. Die Elemente im Array werden durch Kommas , getrennt. Die Reihenfolge der Elemente ist relevant.

{ "fruits": ["apple", "banana", "orange"] }

Literale Werte

Für die Werte werden, je nach Datentyp, die passenden Literale verwendet:

  • Zeichenketten werden in doppelten Anführungszeichen " " platziert. Escape-Zeichen wie \n für Zeilenumbrüche können verwendet werden
  • Alle Zahlen werden direkt hingeschrieben
  • Für logischen Werte werden true und false
  • null bedeutet "nicht vorhanden" oder "leer"

Beispiel

{
    "person": {
        "name": "Alice",
        "age": 25
    },
    "colors": ["red", "green", "blue"]
}

JavaScript

JavaScript ist eine weit verbreitete Programmiersprache, die in erster Linie für Webanwendungen entwickelt wurde. Die Syntax von JavaScript definiert die Regeln für die Strukturierung des Codes, sodass dieser vom Browser korrekt interpretiert werden kann.

ECMAScript ist der offizielle Name der Sprache. Wir verwenden die Version ECMAScript 5.

JavaScript in SAPUI5

Eigentlich kann man mit JavaScript fast alles in SAPUI5 erledigen. Wirklich wichtig sind vor allem die Controller. Also der Component-Controller und die Controller für die einzelnen Views.

Die Views werden besser im XML deklariert. Hier ist JavaScript nicht optimal

Allgemein

JavaScript ist Case-Sensitiv. Die Datentypen werden zur Designzeit nicht geprüft. Das bedeutet: Jeder Sch....rott lässt sich aktivieren. Die Fehler kommen erst beim Ausführen.

Kommentare

Die Zeilenendkommentare werden mit // eingeleitet, Blockkommentare haben die Begrenzungszeichen /* und */.

Codeblöcke stehen in geschweiften Klammern, siehe z.B. bei der IF-Verzweigung.

JavaScript

Variablen

Variablen werden mit dem Schlüsselwort var, let (seit ES6) oder const (auch seit ES6 für unveränderliche Werte) deklariert.

var   name = "Max";
let   age  = 25;
const pi   = 3.14159;

Datentypen

JavaScript hat verschiedene Datentypen wie Number, String, Boolean, Object, Null und Undefined. Der Datentyp wird aus dem Kontext abgeleitet.

var num = 123;          // Number
var str = "Text";       // String
var bool = true;        // Boolean
var obj = {};           // Object
var arr = [];           // Array, eine Art von Objekt

Verzweigungen

Mit if, else if und else können Sie Bedingungen überprüfen.

if (age > 18) {
    console.log("Du bist volljährig.");
} else {
    console.log("Du bist minderjährig.");
}

Schleifen

JavaScript unterstützt verschiedene Schleifen wie for, while und do-while.

for (let i = 0; i < 5; i++) {
    console.log(i);
}

Funktionen

Funktionen definieren wiederverwendbaren Code. Sie werden mit dem Schlüsselwort function definiert.

function greet() {
    console.log("Hallo Welt!");
}

JavaScript

Objekte

In JavaScript können Objekte im JSON Syntax geschrieben werden.

var person = {
    firstName: "Max",
    lastName: "Müller",
    age: 25
};

Ereignisse

JavaScript kann auf Benutzeraktionen wie Klicks oder Mausbewegungen reagieren.

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button geklickt!");
});

Variablen

Variablen werden implizit typisiert. D.h. nicht bei der Deklaration sondern durch die Zuweisung eines Wertes. Der Typ einer Variable kann sich ändern!

Vergleiche

Für die Prüfung auf Gleicheit gibt es zwei Operatoren:

Operator Beschreibung
== prüft, ob die Daten nach einer ggf. notwendigen Konvertierung gleich sind
=== prüft, ob die Daten auch vom gleichen Typ sind, also strikt gleich

Alle anderen Operatoren (<, >, ...) werden wie im ABAP auch verwendet.

Logische Verknüpfungen

Mehrere logische Aussagen (Prädikate) können miteinander verknüpft werden. Hierzu gibt es die Operatoren

Operator Beschreibung
&& AND
|| OR
! NOT

JavaScript

YAML

YAML (steht für "YAML Ain't Markup Language" oder manchmal "Yet Another Markup Language") ist ein menschenlesbares Datenformat, das häufig für Konfigurationsdateien und Datenaustausch zwischen Sprachen mit unterschiedlichen Datenstrukturen verwendet wird.

YAML ist einrückungsempfindlich und verwendet Leerzeichen zur Einrückung (keine Tabs!).

YAML-Dateien beginnen mit einem dreifachen Bindestrich: ---
Der Dateiname endet typischerweise mit .yml oder .yaml.

YAML im SAPUI5

Die einzige Datei, die in einem SAPUI5-Projekt in der YAML Sprache geschrieben ist, ist die Konfigurationsdatei UI5.yaml. In dieser Datei befinden sich alle Abhängigkeiten und Parameter für Betrieb und Auslieferung der Anwendung.

YAML

Skalare Werte

Zeichenketten, Zahlen und Booleans [true/false] können direkt hingeschrieben werden.

name: John Doe
age: 30
is_student: false

Zeichenketten müssen nicht in Anführungszeichen eingeschlossen sein, es sei denn, sie enthalten Sonderzeichen. Trotzdem werden oft Anführungszeichen verwendet. Möglich sind einfache Hochkomma oder Gänsefüsschen.

Listen (Arrays)

Listen werden mit einem Bindestrich und einem Leerzeichen begonnen.

hobbies:
  - Reading
  - Hiking
  - Dancing

Kommentare

Kommentare beginnen mit #.

# This is a comment
name: John Doe  # Inline comment

Beispiel

specVersion: '3.1'
metadata:
  name: ui5.walkthrough
type: application
Datei ui5.yaml

SAPUI5 Dateien

In diese Kapitel sind die wichtigsten Dateien erklärt. Diese Dateien finden sich typischerweise in einer festen Ordnerstruktur, die wie folgt aufgebaut ist.

📁 Wurzelverzeichnis

  • 📁 webapp
    • 📁 controller
      • 🖹 <viewname>.controller.js
    • 📁 css
      • 🖹 style.css
    • 📁 i18n
      • 🖹 i18n.properties
    • 📁 view
      • 🖹<viewname>.view.xml
    • 🖹 Component.js
    • 🖹 index.html
    • 🖹 mainifest.json
  • 🖹 package-lock.json
  • 🖹 package.json
  • 🖹 ui5.yaml

Auf den folgenden Seiten sind Beispiele für die wichtigsten Dateien mit ein paar Erläuterungen.

SAPUI5 Dateien

index.html

In einer SAPUI5-Anwendung ist die index.html-Datei die Hauptdatei, die als Einstiegspunkt für die Anwendung dient. Diese Datei hat eine entscheidende Bedeutung und enthält den HTML-Code, der benötigt wird, um die Anwendung in einem Webbrowser anzuzeigen.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SAPUI5 Walkthrough</title>
    <script
      id="sap-ui-bootstrap"
      src="https://sdk.openui5.org/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_belize"
      data-sap-ui-resourceroots='{ "ui5.walkthrough": "./" }'
      data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-async="true"
    ></script>
  </head>
  <body class="sapUiBody" id="content">
    <div
      data-sap-ui-component
      data-name="ui5.walkthrough"
      data-id="container"
      data-settings='{"id" : "walkthrough"}'
    ></div>
  </body>
</html>
webapp/index.html

Im Script-Tag wird das SAPUI5 Bibliotheken geladen. Es wird dort der ComponentSupport aktiviert.

Und im body-Tag wird ein div-Tag angelegt, dass den Container für unsere Komponente bildet.

SAPUI5 Dateien

XML Views

Mit XML-Views wird die Benutzeroberfläche von SAPUI5-Anwendungen definiert. Die Struktur, das Layout und die Eigenschaften der Oberflächenelemente werden in einer deklarativen und hierarchischen XML-Syntax festgelegt.

<mvc:View controllerName="ui5.walkthrough.controller.App"
       xmlns="sap.m"
       xmlns:mvc="sap.ui.core.mvc"
       displayBlock="true">
  <App>
    <pages>
      <Page title="{i18n>homePageTitle}">
        <content>
          <Panel
            headerText="{i18n>helloPanelTitle}">
            <content>
              <Button
                text="{i18n>showHelloButtonText}"
                press=".onShowHello"/>
              <Input
                value="{/recipient/name}"
                description="Hello {/recipient/name}"
                valueLiveUpdate="true"
                width="60%"/>
            </content>
          </Panel>
        </content>
      </Page>
    </pages>
  </App>
</mvc:View>
webapp/view/App.view.xml

SAPUI5 Dateien

Controller

Ein Controller in SAPUI5 ist eine Komponente, die die Anwendungslogik einer SAPUI5-Anwendung implementiert und die Interaktionen zwischen der Benutzeroberfläche (UI) und den Datenmodellen der Anwendung steuert.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator"
], (Controller, JSONModel, Filter, FilterOperator) => {
    "use strict";

    return Controller.extend(
             "ui5.walkthrough.controller.InvoiceList", {
        onInit() {
            const oViewModel = new JSONModel({
                currency: "EUR"
            });
            this.getView().setModel(oViewModel, "view");
        },

        onFilterInvoices(oEvent) {
            // build filter array
            const aFilter = [];
            const sQuery = oEvent.getParameter("query");
            if (sQuery) {
                aFilter.push(new Filter("ProductName", 
                      FilterOperator.Contains, sQuery));
            }

            // filter binding
            const oList = this.byId("invoiceList");
            const oBinding = oList.getBinding("items");
            oBinding.filter(aFilter);
        }
    });
});

SAPUI5 Dateien

Struktur von Controllern

  • Am Anfang des Controllers als erstes Argument von sap.ui.define kommt ein Array mit Modulen, die geladen werden sollen
  • Danach folgt eine Funktion, die als Parameter die Liste der Module übergeben bekommt. Diese Module können dann darin verwendet werden.
  • Die Funktion liefert einen Controller zurück, der um eigene Funktionen erweitert wurde. Das können zum einen Standardfunktionen sein, wie z.B. onInit. Diese wird beim Initialisieren des Views aufgerufen. Zum Anderen können das aber auch Handler-Funktionen sein, die Oberflächenaktionen verarbeiten.

SAPUI5 Dateien

manifest.json

Die manifest.json Datei in SAPUI5 dient als zentrale Konfigurationsdatei und beschreibt alle Aspekte einer Anwendung oder einer Komponente.

{
  "_version": "1.58.0",
  "sap.app": {
      "id": "ui5.walkthrough",
      "i18n": "i18n/i18n.properties",
      "title": "{{appTitle}}",
      "description": "{{appDescription}}",
      "type": "application",
      "applicationVersion": {
        "version": "1.0.0" }
  },
  "sap.ui": {
      "technology": "UI5",
      "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true }
  },
  "sap.ui5": {
      "dependencies": {
        "minUI5Version": "1.108.0",
        "libs": {
            "sap.ui.core": {},
            "sap.m": {} }
      },
      "models": {
          "i18n": {
              "type": "sap.ui.model.resource.ResourceModel",
              "settings": {
                  "bundleName": "ui5.walkthrough.i18n.i18n",
                  "supportedLocales": [""],
                  "fallbackLocale": "" }
        }
      },
      "rootView": {
            "viewName": "ui5.walkthrough.view.App",
            "type": "XML",
            "id": "app" } 
} }

Wichtige Attribute

  • _version: Version des Manifest-Schemas
  • sap.app:
    • id: Eindeutige ID der Anwendung oder Komponente
    • type: Art der Komponente, hier "application", was bedeutet, dass es sich um eine Hauptanwendung handelt.
    • i18n: Pfad zur Internationalisierungsdatei (i18n)
    • title & description: Titel und Beschreibung der Anwendung
    • applicationVersion: Version der Anwendung
  • sap.ui:
    • technology: Verwendete Technologie
    • deviceTypes: Unterstützten Gerätetypen
  • sap.ui5:
    • dependencies: Abhängigkeiten der Anwendung
      • minUI5Version: Minimale Version von SAPUI5
      • libs: Verwendete Bibliotheken
    • models: Verwendete Datenmodelle
      • i18n: Ein spezielles Modell für die Internationalisierung
        • type: Typ des Datenmodells
        • settings: Einstellungen für das i18n-Modell
    • rootView: Der Startpunkt der Anwendung oder Komponente
      • viewName: Name der rootView
      • type: Art des rootView, hier "XML".
      • id: Eindeutige ID für die rootView, hier "app".

SAPUI5 Kochrezepte

In diesem Kapitel sind Muster für typische Aufgaben und Herausforderungen in SAPUI5 zu finden. Das sind keine vollständige Bespielanwendungen, sondern nur die für ein Thema relevanten Einstellungen.

  • Übersetzbare Texte
  • Data Binding
  • Icons in der Oberfläche
  • Data Binding von Listen
  • SAPUI5 Navigation

SAPUI5 Kochrezepte - Data Binding von Listen

Binding von Listen als Assoziationen

Eine "zu N"-Assoziation in einem OData Service kann relativ einfach als Liste dargestellt werden.

<Page id="page" title="{i18n>title}">
    <content >
        <List items="{myOdataService>/Products}">
            <items>
                <ObjectListItem 
                  title="{myOdataService>ProductName}" />
            </items>
        </List>
    </content>
</Page>

Binden eines Elements

Um ein Element einer Liste zu binden, verwenden wir die Funktion bindElement():

  _onObjectMatched: function(oEvent) {
    var userId = oEvent.getParameter("arguments").userId;
    // Abrufen und Anzeigen von Daten auf Basis der objectId
    this.getView().bindElement({
        path: "/users('" + userId + "')"
    });
  },

Lesen der Daten

Um im Controller auf die Daten des aktuellen Objektes zuzugreifen, brauchen wir den Binding-Context des Views.

  handleEmailPressed: function(oEvent){
    var context = this.getView().getElementBinding().oElementContext;
    var boundObject = context.getProperty(context.getPath());
    alert( `message to ${boundObject.Email}`);
  }

SAPUI5 Kochrezepte - Navigation

Navigation & Routing

Die Navigation in SAPUI5 wird typischerweise mithilfe von Routen und dem Routing-Mechanismus implementiert. Dazu gehören diese Schritte:

  • Definieren von Routen: Festlegen, wie die URLs Ihrer Anwendung aussehen sollen
  • Implementierung der Navigation: Programmieren des Wechsels von einer Ansicht zur nächsten
  • Optional: Handling der Routen: Implementieren von Logik, um auf die Parameter zu reagieren

Definieren von Routen

Zunächst definiert man Routen in der manifest.json Datei der Anwendung. Jede Route wird mit einer bestimmten Ansicht (View) und ggf. mit einem Controller verknüpft. Routen können auch Platzhalter für Variablen enthalten, um parameterbasierte Navigation zu ermöglichen.

"sap.ui5": {
  "routing": {
    "config": {
      "routerClass": "sap.m.routing.Router",
      "viewType": "XML",
      "async": true,
      "viewPath": "de.brandeis.training.project1.view",
      "controlAggregation": "pages",
      "controlId": "app"
    },
    "routes": [
      { "name": "View1",
        "pattern": ":?query:",
        "target": "targetView1" },

      { "name": "TaskList",
        "pattern": "tasklist",
        "target": "targetTaskList" }
    ],
    "targets": {
      "targetView1": { "viewName": "View1" },
      "targetTaskList": {  "viewName": "TaskList"} 
} } }

SAPUI5 Navigation

Implementierung der Navigation

Im Code des Controllers können Sie nun den Router verwenden, um von einer Ansicht zur anderen zu navigieren.

onLoadTaskList: function (oEvent){
        var oRouter = this.getOwnerComponent().getRouter();
        oRouter.navTo("TaskList");
    
}

Sie können auch Routenparameter verwenden, um spezifische Daten zwischen Ansichten zu übermitteln. In obigem Beispiel wird die {objectId} Platzhaltervariable in der Detailroute verwendet, um den Übergang zu einer spezifischen Detailansicht für ein bestimmtes Objekt zu ermöglichen.

Handling der Parameter im Ziel

Im Controller der Zielansicht können Sie auf die Routenparameter zugreifen und entsprechende Logik implementieren.

Beispiel:

onInit: function() {
  var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
  oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
},

_onObjectMatched: function(oEvent) {
  var sObjectId = oEvent.getParameter("arguments").objectId;
  // Logik für das Abrufen und Anzeigen von Daten auf Basis der objectId
}
ToDo: Beispiel mit Parametern

Für die Entwicklung von SAPUI5 Anwendungen werden viel unterschiedliche Dateien in den unterschiedlichsten Sprachen angelegt. Mit XML werden Views angelegt, das YAML-Format wird für die Konfiguration verwendet, mit JavaScript Dateien wird die Programmlogik abgebildet, die Ausgabe ist HTML und das Design wird mit CSS umgesetzt. Jedes Dateiformat und jede Sprache hat unterschiedliche Regeln.

Dieses Heftchen soll eine kurze Zusammenfassung der jeweiligen Syntax und der wichtigsten Dateien geben, damit Ihr sowohl die unterschiedliche Syntax, als auch die wichtigsten Features nachschlagen könnt. Es ist kein umfassendes Lehrbuch, sondern eher ein Spickzettel.