Container zur Oracle JET-Webanwendung hinzufügen

Einführung

Ein responsives Seitenlayout kann flexibel an eine breite Palette von Bildschirmgrößen angepasst werden, von kleinen Telefonen bis hin zu Desktopmonitoren. Ein Oracle JavaScript Extension Toolkit (JET)-Flexlayout enthält untergeordnete Elemente, die Sie in beliebiger Richtung anordnen können. Wenn sich die Bildschirmgröße ändert, werden diese Elemente angepasst und vergrößert, um den nicht verwendeten Speicherplatz zu füllen oder zu verkleinern, um ein Überlaufen von übergeordneten oder untergeordneten Elementen im Layout zu vermeiden. Mit den Oracle JET-Layoutklassen oj-flex und oj-flex-item können Sie responsive Container für die Entwicklung eines responsiven Seitenlayouts erstellen. Die Oracle JET-Formatklassen oj-panel und oj-panel-bg fügen den Containern Rahmen und Farbe hinzu. Sie können diese Stilklassen für die Visualisierung des Layouts verwenden und in der endgültigen App entfernen.

Die Webanwendung, die Sie in diesem Tutorial erstellen, weist eine Seitenlayoutstruktur mit einem übergeordneten Hauptcontainer auf, der einen zweiten übergeordneten Container und einen untergeordneten Container, den Aktivitätscontainer, umgibt. Der zweite übergeordnete Container enthält zwei untergeordnete Container: die Container für Aktivitätsartikel und Artikeldetails.

Der Layoutplan für die responsive Layoutseite

Beschreibung der Abbildung Layout-plan.png

Ein übergeordneter Container enthält untergeordnete Container. Ein untergeordneter Container kann jedoch auch ein übergeordneter Container sein, wenn er einen untergeordneten Container enthält. Beispiel: Übergeordneter Container 2 oben.

In der folgenden Abbildung des Seitenlayouts, das Sie erstellen, enthält ein Haupt-div-Element den übergeordneten Container 1. Übergeordneter Container 1 wird um untergeordneten Container 1 und übergeordneten Container 2 umgebrochen. Der übergeordnete Container 2 enthält zwei untergeordnete Container, den untergeordneten Container 2 und den untergeordneten Container 3.

Das responsive Layout mit übergeordneten und untergeordneten Containern

Beschreibung der Abbildung responsive-layout-containers.png

Ziele

In diesem Tutorial fügen Sie Container und Bereiche hinzu, um ein Seitenlayout in ein reaktionsfähiges Seitenlayout in einer Oracle JET-Web-App zu konvertieren, indem Sie Oracle JET-Layout- und -Stilklassen verwenden.

Voraussetzungen

Eine Entwicklungsumgebung zum Erstellen von Oracle JET-Anwendungen mit der JavaScript-Laufzeit, Node.js und der neuesten installierten Oracle JET-Befehlszeilenschnittstelle
Google Chrome-Webbrowser installiert und als Standard-Webbrowser festgelegt
Zugriff auf das Oracle JET Developer Cookbook
(Option 1) Abschluss des vorherigen Lernpfads in dieser Serie: Webanwendung in Oracle JavaScript Extension Toolkit entwickeln
(Option 2) Wenn Sie den vorherigen Lernpfad in dieser Serie nicht abgeschlossen haben: jet_web_application_temp.zip heruntergeladen

Aufgabe 1: Startanwendung herunterladen

Überspringen Sie diese Aufgabe, wenn Sie weiterhin in einer App arbeiten, die Sie im vorherigen Lernpfad erstellt haben.

Benennen Sie jet_web_application_temp.zip in JET_Web_Application.zip um. Extrahieren Sie den Inhalt in den Ordner JET_Web_Application.
Prüfen Sie im Terminalfenster, ob Sie die neueste Version von Oracle JET installiert haben. Falls nicht, aktualisieren Sie Ihre Version von Oracle JET.
```
$ npm list -g @oracle/ojet-cli
```
```
$ npm install -g @oracle/ojet-cli
```
Navigieren Sie zum Ordner JET_Web_Application, und stellen Sie die Oracle JET-App wieder her.
```
$ ojet restore
```
Ihre App kann jetzt verwendet werden.

Aufgabe 2: Aktivitätscontainer hinzufügen

Ändern Sie das Layout der Oracle JET-Webanwendung, um ein flexibles Feldlayout hinzuzufügen. Um das Flexfeld-Layout zu erstellen, fügen Sie dem übergeordneten Element div eine Oracle JET-Klasse oj-flex und eine oj-flex-item-Klasse zum untergeordneten Element div hinzu. Der übergeordnete Container 1 ist der übergeordnete Container, der alle anderen darin enthaltenen Container enthält. Der untergeordnete Container 1 ist der erste untergeordnete Container und enthält die Liste "Aktivitäten".

Übergeordneter Container 1 und untergeordneter Container 1 bilden die Aktivitätscontainer

Beschreibung der Abbildung Activity-containers.png

Öffnen Sie das Oracle JET Cookbook, klicken Sie in der Menüleiste auf Layout und Navigation, und wählen Sie die Komponente Flexfeld-Layout aus. Klicken Sie in der Symbolleiste auf API-Dokument, und wählen Sie Flex.
Blättern Sie in der Flex Layout-API-Dokumentation mit der Bildlaufleiste zur Tabelle, in der die Oracle JET-Layoutklassen beschrieben sind, und lesen Sie die oj-flex-Klasse.
Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/views, und öffnen Sie die Datei dashboard.html in einem Editor.

Suchen Sie das Element h1 der Überschrift "Produktinformationen", und fügen Sie darunter ein äußeres div-Element mit dem Attributwert id parentContainer1 zusammen mit der Oracle JET-Containerklasse hinzu. Dieses div-Element schließt alle anderen Container darin ein. Fügen Sie ein schließendes </div>-Tag über dem letzten schließenden </div> am Ende der Datei hinzu.

<div class="oj-hybrid-padding">
  <h1>Product Information</h1>
  <!-- Parent Container 1 contains all the panels in the app -->
  <div id="parentContainer1" class="oj-flex oj-flex-init">
    <div id="activitiesContainer">
      <h3 id="activitiesHeader">Activities</h3>
      . . .
      </oj-chart>
    </div>
  </div>
</div>

Suchen Sie das Element div mit id="activitiesContainer" vor der Überschrift "Aktivitäten", und fügen Sie eine Oracle JET-Container-Elementklasse hinzu.

<!-- The Activities container displays the Activities list -->
<div id="activitiesContainer" class="oj-flex-item">
  <h3 id="activitiesHeader">Activities</h3>

Speichern Sie die Datei dashboard.html.

Der Code sollte in etwa parent-containers-dashboard-html.txt aussehen.

Aufgabe 3: Artikeldetailcontainer hinzufügen

Ändern Sie das responsive Layout der Oracle JET-Webanwendung, um die Artikeldetailcontainer hinzuzufügen. Übergeordneter Container 2 enthält die beiden untergeordneten Container. Untergeordneter Container 2 bleibt leer, in den späteren Tutorials wird jedoch die Liste mit Aktivitätselementen angezeigt. Untergeordneter Container 3 enthält das Diagramm "Artikeldetails".

Der übergeordnete Container 2, der untergeordnete Container 2 und der untergeordnete Container 3 bilden zusammen die Artikeldetailcontainer

Beschreibung der Abbildung item-details-containers.png

Suchen Sie das Element div mit id="itemDetailsContainer". Fügen Sie darüber ein äußeres div-Element mit einem id-Attribut mit dem Wert parentContainer2 sowie eine Oracle JET-Containerklasse und eine Containerartikelklasse hinzu. Fügen Sie ein schließendes </div>-Tag über dem zweiten zu letzten schließenden </div> in der Datei hinzu.
```

    <div id="parentContainer2" class="oj-flex oj-flex-item">
      <div id="itemDetailsContainer">
        <h3>Item Details</h3>
        . . .
        </oj-chart>
      </div>
    </div>
  </div>
</div>
```

Fügen Sie unter dem Element div, in dem id="parentContainer2" vorhanden ist, ein leeres div-Element mit einem id-Attribut mit dem Wert activityItemsContainer sowie eine Oracle JET-Container-Elementklasse hinzu.

<!-- Parent Container 2 surrounds the Activity Items and Item Details child containers -->
    <div id="parentContainer2" class="oj-flex oj-flex-item">
      <div id="activityItemsContainer" class="oj-flex-item">
      </div>
      <div id="itemDetailsContainer">
        <h3>Item Details</h3>
        . . .

Fügen Sie schließlich eine Oracle JET-Container-Elementklasse zum div-Element hinzu, wobei id="itemDetailsContainer".

<!-- Item Details container displays a chart upon selection -->
<div id="itemDetailsContainer" class="oj-flex-item">
  <h3>Item Details</h3>

Speichern Sie die Datei dashboard.html.

Der Code sollte in etwa wie der containers-dashboard-html.txt aussehen.

Aufgabe 4: Bereiche und Fensterbereichfarbe hinzufügen

Wenden Sie die Oracle JET-Stilklassen an, um den Containern und Containerelementen in der Webanwendung Panels und Panelfarben hinzuzufügen, um das Layout zu visualisieren.

Suchen Sie das Element div mit id="parentContainer1", und fügen Sie dann zwei Stilklassen hinzu, um einen Bereich mit einer Rahmen- und Hintergrundfarbe anzugeben.
```

<div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">
```

Suchen Sie das Element div mit id="activitiesContainer", und fügen Sie dann zwei Stilklassen hinzu, um einen Bereich mit einer Rahmen- und Hintergrundfarbe anzugeben.

<!-- The border and color for the Activities container -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30">
  <h3 id="activitiesHeader">Activities</h3>

Suchen Sie das Element div mit id="parentContainer2", und fügen Sie dann zwei Stilklassen hinzu, um einen Bereich mit einer Rahmen- und Hintergrundfarbe anzugeben.
```

<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30">
```
Suchen Sie das Element div mit id="itemDetailsContainer", und fügen Sie dann zwei Stilklassen hinzu, um die Fensterbereich- und Bereichsfarbe anzugeben.
```

<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30">
```
Speichern Sie die Datei dashboard.html.

Der Code sollte in etwa wie der final-containers-dashboard-html.txt aussehen.

Aufgabe 5: Webanwendung ausführen

Wechseln Sie im Terminalfenster in das Verzeichnis JET_Web_Application, und führen Sie die App aus.
```
$ ojet serve
```
Mit Oracle JET Tooling wird Ihre Webanwendung in einem lokalen Webbrowser ausgeführt, in dem Sie den Dashboard-Inhalt anzeigen können.

Beschreibung der Abbildung container-panel.png
Schließen Sie das Browserfenster oder die Registerkarte, auf der Ihre aktive Webanwendung angezeigt wird.
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.

Titel und Copyright-Informationen

Add containers to the Oracle JET web app

F53131-01

February 2022