Testen der virtuellen DOM-App von Oracle JET auf verschiedenen Bildschirmgrößen

Einführung

Ein responsives Layout passt sich an die Bildschirmgrößen einer Vielzahl von Geräten an. Wenn Sie die virtuelle DOM-App von Oracle JavaScript Extension Toolkit (Oracle JET) im Google Chrome-Webbrowser ausführen, können Sie Chrome-Entwicklertools (Chrome DevTools) verwenden, um die Reaktionsfähigkeit der App mit verschiedenen Bildschirmgrößen zu testen.

Ziele

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

Voraussetzungen

Aufgabe 1: Virtuelle DOM-App ausführen

Die virtuelle DOM-App von Oracle JET verfügt über ein responsives Layout und Komponenten und kann auf vielen Webbrowsern und Geräten 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 zum Verzeichnis JET-Virtual-DOM-app, und führen Sie die Anwendung aus.

    npx ojet serve

    Mit dem Oracle JET-Tooling wird Ihre virtuelle DOM-App im Browser ausgeführt.

    Die App mit einem responsiven Layout

Aufgabe 2: Bildschirmgröße ändern

Sie können die App mit verschiedenen Bildschirmgrößen und Geräten im Debugger-Modus des Chrome-Browsers testen. Wenn Sie die App auf verschiedenen Geräten verwenden, werden die Komponenten und Inhalte der App an die Größe des jeweiligen Bildschirms angepasst. Beispiel: Die Textausrichtung des Inhalts des Aktivitätscontainers ändert sich für eine kleine Bildschirmgröße sowie für die Listenelemente und die Farbe des Aktivitätscontainers.

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

    Google Chrome Debugger aktiviert

  2. Klicken Sie in der Chrome-Symbolleiste DevTools auf Schaltfläche für Gerätesymbolleiste umschalten, um in den Gerätemodus zu wechseln.

    Symbolleistensuche für Gerätemodus

  3. Klicken Sie im Bildschirmemulator des Gerätemodus auf das Dropdown-Menü Dimensionen.

    Verschiedene Darstellungsfenster werden angezeigt

  4. Wählen Sie im Dropdown-Menü das Pixel 7 mit einer kleinen Bildschirmgröße aus, und zeigen Sie die App im Bildschirmemulator an.

    Im Aktivitätscontainer ist der Inhalt rechtsbündig ausgerichtet. Im Container für Aktivitätselemente wird die abgekürzte Liste der Artikel für kleine und mittlere Bildschirme angezeigt, und der Header Aktivitätsdetails ersetzt den Header Aktivitätselemente. Die Farbe des Behälters ist helles Cyan.

    Die App wird für eine kleine Bildschirmgröße angezeigt

  5. Wählen Sie im Dropdown-Menü Dimensionen die Option iPad Luft mit einer mittleren Bildschirmgröße aus.

    Im Aktivitätscontainer ist der Inhalt linksbündig ausgerichtet. Im Container für Aktivitätselemente wird die abgekürzte Liste der Artikel für kleine und mittlere Bildschirme angezeigt, und der Header Aktivitätsdetails ersetzt den Header Aktivitätselemente. Die Farbe des Behälters ist helles Cyan.

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

  6. Wählen Sie im Dropdown-Menü Dimensionen die Option Max. Nester Hub mit einer großen Bildschirmgröße aus.

    Im Aktivitätscontainer ist der Inhalt linksbündig ausgerichtet. Im Container "Aktivitätselement" werden die Listenelemente für große und extra große Bildschirme angezeigt. In übergeordnetem Container 2 wird die Füllung auf der linken Seite des Aktivitätsartikelcontainers und auf der rechten Seite des Artikeldetailcontainers angewendet.

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

  7. Klicken Sie in der Chrome-Symbolleiste DevTools auf Schaltfläche für Gerätesymbolleiste umschalten, um den Gerätemodus zu beenden.

  8. Schließen Sie das Browserfenster oder die Registerkarte, in der die ausgeführte virtuelle DOM-App angezeigt wird.

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

Nächsten Schritt

In diesem Tutorial wird das Modul Responsives Design in diesem Lernpfad zum Erstellen virtueller DOM-Webanwendungen abgeschlossen.

Sie können mit dem nächsten Tutorial im Lernpfad Masteransicht in einer virtuellen Oracle JET-DOM-App erstellen im Modul Masterdetailansichten in Oracle JET fortfahren.

Sie können auch zur Hauptseite des virtuellen DOM-Lernpfads zurückkehren, um auf alle Module zum Erstellen virtueller DOM-Apps zuzugreifen.

Weitere Lernressourcen

Sehen Sie sich weitere Übungen zu docs.oracle.com/learn an, oder greifen Sie auf weitere kostenlose Lerninhalte im Oracle Learning YouTube-Kanal zu. Besuchen Sie außerdem education.oracle.com/learning-explorer, um ein Oracle Learning Explorer zu werden.

Die Produktdokumentation finden Sie im Oracle Help Center.