Inhalte in der virtuellen DOM-App von Oracle JET ein- oder ausblenden

Einführung

Oracle JavaScript Extension Toolkit (Oracle JET) umfasst ein ResponsiveUtils-Modul, das Utilitys zum Arbeiten mit responsiven Bildschirmbreiten und -bereichen enthält. Beispiel: Eine bestimmte Bildschirmbreite oder ein bestimmter Bereich wird durch einen Framework-Abfrageschlüssel beschrieben, der an die Methode getFrameworkQuery() übergeben werden kann, um eine Framework-Medienabfragezeichenfolge zu erstellen.

Die Schnittstelle Window enthält die Variable window, die das Fenster darstellt, in dem Ihre virtuelle DOM-App ausgeführt wird. Wenn Sie die Framework-Medienabfrage an die Methode window.matchmedia() übergeben, wird ein Objekt mit Eigenschaften zurückgegeben, mit denen Sie prüfen können, ob die Bildschirmbreite des Fensters, in dem Ihre virtuelle DOM-App ausgeführt wird, mit Ihrer angegebenen Breite oder Ihrem angegebenen Bereich übereinstimmt.

Mit diesem Objekt und der Verwendung von Preact-Hooks, Status- und Ereignis-Listenern können Sie die Größe des Bildschirms überwachen, in dem Ihre virtuelle DOM-App ausgeführt wird, und verschiedene Inhalte reaktionsschnell anzeigen, wenn sich die Bildschirmgröße ändert.

Ziele

In diesem Tutorial erfahren Sie, wie Sie mit Preact-Hooks und dem Oracle JET-Modul ResponsiveUtils Änderungen an der Größe des Fensters überwachen, in dem Ihre virtuelle DOM-App ausgeführt wird. Anschließend passen Sie die Komponente "Aktivitätselementcontainer" Ihrer App an, um verschiedene Inhalte bei Verwendung mittlerer oder kleinerer Bildschirme reaktionsschnell zu laden.

Voraussetzungen

Aufgabe 1: Bildschirmbreite überwachen und bedingten Inhalt reaktionsschnell anzeigen

Verwenden Sie Preact-Hooks und das Oracle JET-Modul ResponsiveUtils, um die Bildschirmbreite des Browserfensters zu ermitteln und zu überwachen, wenn sich die Größe in "Mittel" oder "Klein" ändert. Verwenden Sie dann den Status, um die Bildschirmgröße in der Komponente ActivityItemContainer zu verfolgen und einen neu gefärbten Container für Aktivitätselemente mit einer abgekürzten Liste von Elementen für mittlere oder kleinere Bildschirme wiederzugeben.

  1. Öffnen Sie das Oracle JET Cookbook, und navigieren Sie zur Cookbook-Homepage. Klicken Sie in der Menüleiste auf Framework, Responsive Verhaltensweisen, Responsive Loading.

  2. Dort können Sie auf die API-Dokumentation für den Namespace ResponsiveUtils zugreifen. Scrollen Sie zum Abschnitt Methoden, und lesen Sie die Methode getFrameworkQuery.

  3. Navigieren Sie zum Verzeichnis JET-Virtual-DOM-app/src/components/ActivityItem, und öffnen Sie die Datei ActivityItemContainer.tsx in einem Editor.

  4. Fügen Sie oben in der Datei import-Anweisungen für die Hooks useRef, useState und useEffect sowie das Oracle JET-Modul ResponsiveUtils hinzu.

    import { useRef, useState, useEffect } from "preact/hooks";
import * as ResponsiveUtils from "ojs/ojresponsiveutils";

  5. Fügen Sie über der Funktion ActivityItemContainer die Variable sm_md_view hinzu, um den Inhalt zu speichern, den der Container anzeigt, wenn der Bildschirm eine mittlere oder kleinere Größe hat und nicht eine große oder extra große Größe.

    // Display this content for medium and narrower screen widths
 const sm_md_view =
   <div id="sm_md" class="oj-flex-item oj-sm-padding-4x-start oj-md-6 oj-sm-12" 
                   style="background-color:lightcyan; padding: 10px; font-size: 10px">
     <h3 id="activityDetailsHeader">Activity Details</h3>
     <div class="item-display no-wrap">
       <ul>
         <li class="li-item">SureCatch Baseball Glove</li>
         <li class="li-item">Western R16 Helmet</li>
         <li class="li-item">Western C1 Helmet</li>
         <li class="li-item">Western Bat</li>
       </ul>
     </div>
   </div>;

    Hinweis: Als Best Practice wird empfohlen, CSS-Stile in einer separaten Datei und nicht inline wie hier zu definieren.

  6. Fügen Sie vor der return-Anweisung der Funktion ActivityItemContainer den folgenden Code hinzu, um die importierten Preact-Hooks und das Modul ResponsiveUtils zu verwenden.

     const ActivityItemContainer = () => {

   const mediaQueryRef = useRef<MediaQueryList>(window.matchMedia(ResponsiveUtils.getFrameworkQuery("md-down")!));

   const [isSmallMediumWidth, setIsSmallMediumWidth] = useState(mediaQueryRef.current.matches);

   useEffect(() => {
     mediaQueryRef.current.addEventListener("change", handleMediaQueryChange);
     return (() => mediaQueryRef.current.removeEventListener("change", handleMediaQueryChange));
   }, [mediaQueryRef]);

  7. Fügen Sie unter dem useEffect-Hook die folgenden beiden Funktionen hinzu.

    function handleMediaQueryChange(e: MediaQueryListEvent) {
  setIsSmallMediumWidth(e.matches);
}

function getDisplayType() {
  return isSmallMediumWidth ? false : true;
}

  8. Ändern Sie schließlich die return-Anweisung der ActivityItemContainer-Funktion, um entweder den aktuellen Aktivitätselementinhalt wiederzugeben, wenn Sie eine große oder eine extra große Bildschirmgröße verwenden, oder den Inhalt in der Variablen sm_md_view wiederzugeben, wenn Sie einen mittleren oder kleineren Bildschirm verwenden.

     return getDisplayType() ? (
   <div
     id="activityItemsContainer"
     class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
     <div id="container" class="item-display no-wrap">
       <h3>Activity Items</h3>
       <ul>
         <li class="li-item">Louisville Slugger Bat</li>
         <li class="li-item">SureCatch Baseball Glove</li>
         <li class="li-item">Baseball</li>
         <li class="li-item">Western R16 Helmet</li>
         <li class="li-item">Western C1 Helmet</li>
         <li class="li-item">Sure Fire Ball (Set of 4)</li>
       </ul>
     </div>
   </div>
 ) : sm_md_view;

  9. Speichern und schließen Sie die Datei.

    Ihr Code sollte ungefähr wie responsive-screen-activity-items.txt aussehen.

Aufgabe 2: Virtuelle DOM-App ausführen

  1. Wechseln Sie im Terminalfenster in das Verzeichnis JET-Virtual-DOM-app, und führen Sie die virtuelle DOM-App aus.

    npx ojet serve

    Mit dem Oracle JET-Tooling wird die virtuelle DOM-App in Ihrem lokalen Webbrowser ausgeführt. Wenn Sie den Inhalt auf einem großen Bildschirm anzeigen, werden dieselben Inhalte wie am Ende des vorherigen Tutorials angezeigt.

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

  2. Um den Inhalt in der Variablen sm_md_view anzuzeigen, ziehen Sie den Rand des Browserfensters, bis er eine mittlere Größe hat. Notieren Sie sich im Container "Aktivitätselemente" die Liste der abgekürzten Aktivitätselemente unter einer neuen Überschrift Aktivitätsdetails sowie die neue hellzyanfarbene Farbe des Containers.

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

  3. Zeigen Sie als Nächstes die virtuelle DOM-App in einer kleinen Bildschirmgröße mit Chrome DevTools an. Maximieren Sie den Bildschirm, klicken Sie mit der rechten Maustaste auf die Seite, und wählen Sie Prüfen aus, um die Seitenansicht in den Entwicklertools aufzurufen.

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

    Locator for Toggle device toolbar button

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

    Verschiedene Darstellungsfenster werden angezeigt

  6. Wählen Sie im Dropdown-Menü ein Gerät mit einer kleinen Bildschirmgröße, wie z.B. Pixel 7, aus, um die Inhaltsänderungen im Bildschirmemulator zu prüfen.

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

    In der kleinen Bildschirmgröße ändert sich die Ausrichtung und das Layout der Anwendung, und unter der Überschrift Aktivitätsdetails wird eine gekürzte Liste von Elementen angezeigt. Der Behälter ist farbiges helles Cyan.

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

  8. Schließen Sie das Browserfenster oder die Registerkarte.

  9. Ihre abgeschlossene virtuelle DOM-App mit responsiver Designfunktion sollte ähnlich wie jet-virtual-dom-app-responsive-design-final.zip aussehen.

Aufgabe 3: (Optional) Virtuelle DOM-App aus einer wiederhergestellten App ausführen

Wenn Sie die ausgefüllte virtuelle Oracle JET-DOM-App aus dem bereitgestellten Code ausführen möchten, können Sie die App aus der heruntergeladenen Archivdatei wiederherstellen. Um mit einer gestrippten und komprimierten virtuellen DOM-App von Oracle JET zu arbeiten, müssen Sie Projektabhängigkeiten, einschließlich Oracle JET-Tools und der erforderlichen Librarys und Module, in der extrahierten App wiederherstellen.

  1. Laden Sie die Datei jet-virtual-dom-app-responsive-design-final.zip herunter, und extrahieren Sie den Inhalt der abgeschlossenen App in den Ordner JET-Virtual-DOM-app.

  2. Navigieren Sie im Terminalfenster zum Ordner JET-Virtual-DOM-app, und stellen Sie die virtuelle Oracle JET-DOM-App wieder her.

    npm install

  3. Auf Bestätigung warten

    Success: Restore complete

    Die App ist bereit zur Ausführung.

  4. Führen Sie die App aus und testen Sie sie im Browser.

    npx ojet serve

  5. Schließen Sie das Browserfenster oder die Registerkarte, in der die ausgeführte App angezeigt wird.

  6. 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

Fahren Sie mit dem nächsten Tutorial in diesem Modul fort.

Dieses Tutorial ist Teil des Moduls Responsives Design.

Sie können 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.