SAPUI5 Grundlagen

Die Verbindung zwischen Views

(C) Brandeis Consulting.

Motivation

Bislang waren wir auf genau einem View. Oft ist es aber nützlich, zwischen unterschiedlichen Ansichten zu navigieren. Typischer Anwendungsfall:

  • List-View und
  • Detail-View

Anforderungen

Die Navigation soll

  • mit Browsermitteln erfolgen, d.h. Back im Browser soll funktionieren
  • als Favorit abspeicherbar sein
  • Daten je nach Navigationsschritt laden können
(C) Brandeis Consulting.

Konzept mit Zielen und Routen

Es werden Navigationsziele (targets) definiert und Routen (routes) dazwischen. Für die Routen wird festgelegt, wie das URL-Muster (pattern) dazu aussieht.

{
  ...
  "sap.ui5": {
  ...
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "type": "View",
        "viewType": "XML",
        "path": "ui5.walkthrough.view",
        "controlId": "app",
        "controlAggregation": "pages"
      },
      "routes": [
        {
          "pattern": "",
          "name": "overview",
          "target": "overview"
        },
        {
          "pattern": "detail",
          "name": "detail",
          "target": "detail"
        }
      ],
      "targets": {
        "overview": {
          "id": "overview",
          "name": "Overview"
        },
        "detail": {
          "id": "detail",
          "name": "Detail"
  } } }
...
webapp/manifest.json
(C) Brandeis Consulting.

Component.js

In der init-Funktion der Component.js ergänzen wir

this.getRouter().initialize();
(C) Brandeis Consulting.

App-View

Im App-View wird nur ein XML-Tag App mit ein paar Attributen hinterlegt. Dieser dient dazu, später die einzelnen Views aufzunehmen.

Der Name App ist nur zufällig so wie der Name des Views!

<mvc:View
    controllerName="ui5.walkthrough.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true">
    <Shell>
        <App
            class="myAppDemoWT"
            id="app"/>
    </Shell>
</mvc:View>
(C) Brandeis Consulting.

Änderungen am Invoice-List-View

Neu sind hier nur die beiden Attribute

  • type und
  • press

des ObjectListItem

<mvc:View
    controllerName="ui5.walkthrough.controller.InvoiceList"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    ...
        <items>
            <ObjectListItem
                title="{invoice>Quantity} x {invoice>ProductName}"
                number="{
                    parts: [
                        'invoice>ExtendedPrice',
                        'view>/currency'
                    ],
                    type: 'sap.ui.model.type.Currency',
                    formatOptions: {
                        showMeasure: false
                    }
                }"
                numberUnit="{view>/currency}"
                numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"
                type="Navigation"
                press=".onPress" >
                <firstStatus>
                    <ObjectStatus
                        text="{
                            path: 'invoice>Status',
                            formatter: '.formatter.statusText'
                        }"/>
                </firstStatus>
            </ObjectListItem>
        </items>
    </List>
</mvc:View>
(C) Brandeis Consulting.

Änderungen am InvoiceList-Controller

Hier ist die onPress-Funktion neu.

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", {

    …

    onPress() {
      const oRouter = this.getOwnerComponent().getRouter();
      oRouter.navTo("detail");
    }
  });
});
>
(C) Brandeis Consulting.

Neue Views

Wir legen zwei neue Views für Overview und Detail an:

Overview.view.xml

<mvc:View
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true">
    <Page title="{i18n>homePageTitle}">
        <content>
            <mvc:XMLView viewName="ui5.walkthrough.view.HelloPanel" />
            <mvc:XMLView viewName="ui5.walkthrough.view.InvoiceList" />
        </content>
    </Page>
</mvc:View>

Detail.view.xml

<mvc:View
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc">
  <Page
    title="{i18n>detailPageTitle}">
    <ObjectHeader title="Invoice"/>
  </Page>
</mvc:View>

Texte aktualisieren

In der i18n.properties ergänzen wir entsprechend:

detailPageTitle=Walkthrough - Details
(C) Brandeis Consulting.