SAPUI5: Verwaltung der Responsivität für mehrere Bildschirme und Geräte mit sap.ui.Device

Ein Handbuch zur dynamischen UI-Anpassung in Fiori-Anwendungen für Desktop-, Tablet- und mobile Bildschirmgrößen unter Verwendung der Device.media-API sowie der Grid- und FlexBox-Komponenten.

Fiori-Anwendungen, die in SAP-Unternehmensprojekten entwickelt werden, können von Büroangestellten auf großen Desktop-Monitoren verwendet werden, während sie von Außendienstmitarbeitern auf Handheld-Terminals oder Tablets ausgeführt werden. Um eine einwandfreie Benutzererfahrung (UX) auf jeder Bildschirmgröße zu gewährleisten, wird die sap.ui.Device API verwendet, um Geräteeigenschaften, Touch-Fähigkeiten und Bildschirmbreiten-Breakpoints zur Laufzeit zu überwachen. In diesem Leitfaden behandeln wir unternehmensweite Standards für responsives Design und die globale Verwaltung von Gerätemodellen.

💡 Regeln für die Responsivität

Priorität der Layout-Steuerelemente: In der Praxis des responsiven Designs sollten anstelle der manuellen Verwaltung von Elementbreiten (width) mit Expression Bindings vorzugsweise responsive Layout-Komponenten wie sap.m.FlexBox, Grid oder ResponsiveGridLayout verwendet werden. SAPUI5-Hilfs-CSS-Klassen (z.B. sapUiResponsiveMargin) sollten zur Unterstützung dieser Strukturen positioniert werden.
Standard für die Integration des Gerätemodells: In Standard-SAPUI5-Vorlagen wird der Prozess in zwei Schritten strukturiert, um deklarativ auf Geräteeigenschaften von der Benutzeroberfläche aus zugreifen zu können: Die Modellstruktur wird zuerst unter model/models.js erstellt und dann mit dem Code this.setModel(models.createDeviceModel(), "device"); innerhalb von Component.js global verfügbar gemacht.
Medien-Breakpoints (Device.media): Obwohl die Überwachung der Bildschirmausrichtung (Hoch-/Querformat) in einigen mobilen Szenarien sinnvoll sein kann, basiert die Lösung für Layout-Probleme in Unternehmens-UIs direkt auf der Device.media API. Diese Struktur ermöglicht die asynchrone Überwachung der Breakpoints Phone, Tablet, Desktop und LargeDesktop basierend auf der Browsergröße.
Unterscheidung zwischen Touchscreen und System: Die Prüfung Device.support.touch überprüft die Touchscreen-Fähigkeit des Geräts, garantiert jedoch nicht, dass es sich um ein Telefon handelt (z. B. touchfähige Windows-Laptops oder Industrie-Tablets). Daher sollte für Szenarien, die speziell für Handheld-Terminals oder Telefone gelten, die Prüfung Device.system.phone bevorzugt werden.

💻 Globale Modelleinrichtung und UI-Integration

0. Definition des globalen Gerätemodells (model/models.js)

Die Standardpraxis, die Struktur sap.ui.Device beim Start der Anwendung in ein JSONModel zu konvertieren und es allen View-Schichten im One-Way-Binding-Modus zugänglich zu machen.

sap.ui.define([
    "sap/ui/model/json/JSONModel",
    "sap/ui/Device"
], function (JSONModel, Device) {
    "use strict";

    return {
        createDeviceModel: function () {
            var oModel = new JSONModel(Device);
            // System environment flags are read-only from the browser context
            oModel.setDefaultBindingMode("OneWay");
            return oModel;
        }
    };
});

1. Erweitertes Grid-Layout in der XML-View-Schicht (Main.view.xml)

Verwaltung der Sichtbarkeit von Elementen je nach Bildschirmtyp unter Verwendung des globalen device-Modells und erweiterte responsive Positionierung über die layout:Grid-Komponente.

<mvc:View 
    controllerName="ui5.app.controller.Main"
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns:layout="sap.ui.layout"
    xmlns="sap.m">

    <Page id="responsivePage" title="Adaptive Device Management">
        <content>
            <VBox class="sapUiResponsiveMargin">

                <!-- 1. Conditional visibility: Show structural helper only on Desktop or Tablet layouts -->
                <MessageStrip 
                    text="Pro-tip: For optimal barcode accuracy, ensure peripheral lighting is balanced."
                    type="Information"
                    showIcon="true"
                    visible="{= !${device>/system/phone} }" />

                <!-- 2. Grid Layout Responsiveness: Adjust span, indent, and vertical spacing across display sizes -->
                <layout:Grid defaultSpan="XL3 L4 M6 S12" 
                             defaultIndent="XL1 L1 M0 S0"
                             vSpacing="2"
                             class="sapUiMediumMarginTop">
                    <layout:content>
                        <VBox>
                            <Label text="Registry Code" />
                            <Input width="100%" />
                        </VBox>
                        <VBox>
                            <Label text="Cost Center" />
                            <Input width="100%" />
                        </VBox>
                        <VBox>
                            <Label text="Warehouse Bin" />
                            <Input width="100%" />
                        </VBox>
                    </layout:content>
                </layout:Grid>

            </VBox>
        </content>
    </Page>
</mvc:View>

2. Integration von Device.media in der Controller-Schicht (Main.controller.js)

Schritte zur dynamischen Erfassung von Änderungen der Browserbreite (Media Range), zur Verwaltung asynchroner Handler und zur Vermeidung von Speicherlecks (Memory Leaks).

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/Device",
    "sap/m/MessageToast"
], function (Controller, Device, MessageToast) {
    "use strict";

    return Controller.extend("ui5.app.controller.Main", {

        onInit: function () {
            // Attach handler for responsive screen width breakpoint changes (RANGESET_3_BIT: Phone, Tablet, Desktop)
            Device.media.attachHandler(this._onMediaRangeChange, this, Device.media.RANGESET_3_BIT);
            
            // Validate targeting hardware peripheral profiles safely
            if (Device.system.phone) {
                console.log("Handheld mobile device flow initialized.");
            }
        },

        onExit: function () {
            // Best Practice: Always detach global event handlers on destruction to eliminate memory leaks
            Device.media.detachHandler(this._onMediaRangeChange, this, Device.media.RANGESET_3_BIT);
        },

        _onMediaRangeChange: function (mEvent) {
            // Extract the current breakpoint identity name (e.g., "Phone", "Tablet", "Desktop")
            var sCurrentRange = mEvent.name;
            
            switch (sCurrentRange) {
                case "Phone":
                    // Execute smartphone specific dynamic UI adjustments
                    break;
                case "Tablet":
                    MessageToast.show("Screen scale adjusted to Tablet matrix.");
                    break;
                case "Desktop":
                    MessageToast.show("Screen scale adjusted to Desktop view.");
                    break;
            }
        }
    });
});

Verpassen Sie nicht den neuen Code in der Bibliothek!

Abonnieren Sie den Newsletter, um sofort über wöchentlich aktualisierte unternehmensweite SAPUI5/Fiori-Komponenten, Leistungstipps und Architekturentwürfe informiert zu werden.