Oracle JET-Webanwendung auf verschiedenen Bildschirmgrößen testen

Einführung

Ein reaktionsfähiges Layout passt sich an verschiedene Bildschirmgrößen über eine Vielzahl von Geräten an. Wenn Sie Ihre Oracle JET-Webanwendung im Google Chrome-Webbrowser ausführen, können Sie die Reaktionsfähigkeit der Webanwendung mit unterschiedlichen Bildschirmgrößen testen, die Sie in den Google Chrome-Entwicklertools (Chrom DevTools) auswählen.

Ziele

In diesem Tutorial testen Sie das responsive Design der entwickelten Oracle JET-Webanwendung auf verschiedenen Bildschirmgrößen.

Voraussetzungen

Aufgabe 1: Webanwendung ausführen

Die Oracle JET-Webanwendung verfügt über ein responsives Layout und Komponenten und kann auf vielen verschiedenen Webbrowsern ausgeführt werden. Für dieses Tutorial verwenden wir den Chrome-Browser und DevTools, um die App in verschiedenen Bildschirmgrößen anzuzeigen.

  1. Wechseln Sie im Terminalfenster in das Verzeichnis JET_Web_Application, und führen Sie die App aus.

    $ ojet serve

    Mit dem Oracle JET-Tooling wird Ihre Webanwendung in Google Chrome ausgeführt.

    Das Look-and-Feel der letzten App

    Beschreibung der Abbildung final-app.png

Aufgabe 2: Bildschirmgröße ändern

Sie können die Reaktionsfähigkeit der Web-App für verschiedene Bildschirmgrößen und Geräte im Debugger-Modus des Google Chrome-Browsers testen. Wenn Sie die App auf verschiedenen Geräten ausführen, wird der Inhalt der Webanwendung für die ausgewählte Bildschirmgröße angezeigt, und die Textausrichtung basiert auf der Bildschirmgröße.

  1. Drücken Sie in Google Chrome auf Ctrl+Shift+I, um das Chrome DevTools-Fenster anzuzeigen.

    Google Chrome-Debugger aktiviert

    Beschreibung der Abbildung chrome-debmode.png

  2. Klicken Sie in der Chrome DevTools-Symbolleiste auf Gerätesymbolleistenschaltfläche umschalten, um zum Gerätemodus zu wechseln.

    Gerätemodus-Symbolleisten-Positionator

    Beschreibung der Abbildung device-mode-lens.png

  3. Wählen Sie im Bildschirmemulator des Gerätemodus ein bestimmtes Gerät oder eine bestimmte Bildschirmgröße zum Testen der App aus.

    Verschiedene Ansichtsfenster werden angezeigt

    Beschreibung der Abbildung viewport.png

  4. Wählen Sie Pixel 5.

    Im Aktivitätscontainer wird der Inhalt am Ende des Bildschirms ausgerichtet. Im Container "Aktivitätselemente" werden die Listenelemente für kleine und mittlere Bildschirme angezeigt.

    Die für eine kleine Bildschirmgröße angezeigte App

    Beschreibung der Abbildung Small-screen.png

  5. Wählen Sie iPad Air.

    Im Aktivitätscontainer wird der Inhalt linksbündig ausgerichtet. Im Container "Aktivitätselemente" werden die Listenelemente für kleine und mittlere Bildschirme angezeigt. Für den Container für Aktivitätsartikel wird eine Auffüllung angewendet.

    Die für eine mittlere Bildschirmgröße angezeigte App

    Beschreibung der Abbildung medium-screen.png

  6. Wählen Sie Maximaler Hub.

    Im Aktivitätscontainer wird der Inhalt linksbündig ausgerichtet. Im Container "Aktivitätselemente" werden die Listenelemente für große und extra große Bildschirme angezeigt.

    Die für eine große Bildschirmgröße angezeigte App

    Beschreibung der Abbildung big-screen.png

  7. Klicken Sie in der Chrome DevTools-Symbolleiste auf Gerätesymbolleistenschaltfläche umschalten, um den Gerätemodus zu beenden.

  8. Schließen Sie das Browserfenster oder die Registerkarte, auf der Ihre aktive Webanwendung angezeigt wird.

  9. Drücken Sie im Terminalfenster auf Ctrl+C, und geben Sie bei entsprechender Aufforderung y ein, um den Oracle JET-Tooling-Batchjob zu beenden.

Weitere Lernressourcen

Sehen Sie sich andere Übungen zu docs.oracle.com/learn an, oder greifen Sie auf weitere Inhalte für kostenloses Lernen im Oracle Learning YouTube-Kanal zu. Außerdem besuchen Sie education.oracle.com/learning-explorer, um Oracle Learning Explorer zu werden.

Produktdokumentation finden Sie im Oracle Help Center.