SAPUI5 Grundlagen

Die Verbindung zwischen Views

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

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": "overviewRoute",
          "target": "overviewTarget"
        },
        {
          "pattern": "detail",
          "name": "detailRoute",
          "target": "detailTarget"
        }
      ],
      "targets": {
        "overviewTarget": {
          "id": "overviewId",
          "name": "Overview"
        },
        "detailTarget": {
          "id": "detailId",
          "name": "Detail"
  } } }
...
webapp/manifest.json

Component.js

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

this.getRouter().initialize();

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>

Ä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>

Ä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("detailRoute");
    }
  });
});
>

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