Inhalt in der Oracle JET-Webanwendung anzeigen oder ausblenden

Einführung

Die Oracle JET-Komponente oj-module und die responsiven JavaScript-Utilityklassen können je nach Bildschirmgröße unterschiedliche Ansichten laden. Mit der Komponente oj-module können Sie Inhalte in einem Bereich einer Seite ersetzen, indem Sie eine Ansicht und den entsprechenden viewModel an ein Element binden.

Ziele

Nach Abschluss dieses Tutorials haben Sie eine Oracle JET-Webanwendung angepasst, um eine View und die entsprechende viewModel mit einer Oracle JET-Komponente oj-module und einem responsiven TypeScript-Code zu binden.

Voraussetzungen

Eine Entwicklungsumgebung zum Erstellen von Oracle JET-Anwendungen mit der JavaScript-Laufzeit, Node.js und der neuesten installierten Oracle JET-Befehlszeilenschnittstelle
Zugriff auf das Oracle JET Developer Cookbook
Abschluss des vorherigen Tutorials in diesem Lernpfad, sodass Sie den Ordner JET_Web_Application erstellt haben
Die abgeschlossene App jet_web_application_responsive_design_final.zip wurde optional heruntergeladen

Aufgabe 1: Modulkomponente zur Ansicht hinzufügen

Definieren Sie die View und die entsprechende viewModel unter der Oracle JET-Komponente oj-module mit dem Konfigurationsobjekt.

Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/views, und öffnen Sie die Datei dashboard.html in einem Editor.
Suchen Sie das Element div mit id="activityItemsContainer". Fügen Sie in der leeren div einen div-Container hinzu, der ein benutzerdefiniertes HTML-Element oj-module mit dem Attribut config umgibt, das den Navigationsbereich definiert.
```
<div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  <div id="container">
    <oj-module config="[[moduleConfig]]"></oj-module>
  </div>
</div>
```
Speichern Sie die Datei dashboard.html.

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

Aufgabe 2: Liste der importierten Module in ViewModel aktualisieren

Importieren Sie oben in der Datei dashboard.ts Module, die Oracle JET-Komponenten unterstützen.

Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/viewModels, und öffnen Sie die Datei dashboard.ts in einem Editor.

Fügen Sie nach dem Modul ojlistview die drei responsiven HTML-Utilitymodule von JET und das Modul ojmodule-element hinzu.

import * as AccUtils from "../accUtils";
import * as ko from "knockout";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojselectsingle";
import "ojs/ojlabel";
import "ojs/ojchart";
import * as storeData from "text!../store_data.json";
import "ojs/ojlistview";
import * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import * as HtmlUtils from "ojs/ojhtmlutils";
import "ojs/ojmodule-element";

Speichern Sie die Datei dashboard.ts.

Der Importblock sollte in etwa import-block-ts.txt aussehen.

Aufgabe 3: Code für responsives Laden in ViewModel hinzufügen

Sie möchten unterschiedliche Inhalte für verschiedene Bildschirmgrößen in einem responsiven Layout laden. Mit oj-module können Sie verschiedene Ansichten laden, indem Sie eine beobachtbare Medienabfrage oder eine beobachtbare benutzerdefinierte Medienabfrage verwenden.

Öffnen Sie das Oracle JET Cookbook, und navigieren Sie zur Cookbook-Homepage. Klicken Sie in der Menüleiste auf Framework und dann auf Reaktionsverhalten und dann auf Reaktionsbereites Laden.
Dort können Sie auf die API-Dokumentation für den Namespace ResponsiveUtils zugreifen. Scrollen Sie dann zum Abschnitt "Methoden", und lesen Sie Informationen zur Methode getFrameworkQuery.

Fügen Sie in der Datei dashboard.ts unter der Deklaration chartDataProvider einen Inline-Vorlagencodeblock hinzu, der an das benutzerdefinierte HTML-Element oj-module übergeben werden soll.

this.chartDataProvider = new MutableArrayDataProvider(this.chartData, {
      keyAttributes: "id",
});

// Define the oj-module inline template for Activity Items list
const lg_xl_view =
      '<h3 id="activityItemsHeader">Activity Items</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityItemsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>Air-Lift Tire Pump</p>" +
      "<p>Intact Bike Helmet</p>" +
      "<p>Nimbus Bike Tire</p>" +
      "<p>Refill Water Bottle</p>" +
      "<p>Swift Boys 21 Speed</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>";

Der Inline-Datenknoten für Großbildschirme und extra große Bildschirme wird durch die Variable lg_xl_view geleitet.

Definieren Sie unter der Definition der Variable lg_xl_view den Code, um den Inline-Datenknoten für kleine und mittlere Bildschirme durch die Variable sm_md_view zu übergeben.

// Display this content for small and medium screen sizes
const sm_md_view =
      '<div id="sm_md" style="background-color:lightcyan; padding: 10px; font-size: 10px">' +
      '<h3 id="activityDetailsHeader">Activity Details</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityDetailsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>" +
      "</div>";

Definieren Sie unter der Definition der Variable sm_md_view den Code zum Laden der Ansicht für verschiedene Bildschirmgrößen mit einer beobachtbaren this.large-Medienabfrage.
```
// Identify the screen size and display the content for that screen size
const lgQuery = ResponsiveUtils.getFrameworkQuery(
   ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP
);

this.large = ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);
this.moduleConfig = ko.pureComputed(() => {
   let viewNodes = HtmlUtils.stringToNodeArray(
   this.large() ? lg_xl_view : sm_md_view
   );
   return { view: viewNodes };
});

/**
 * End of oj-module code
 */
```
Mit der HTML-Utilityfunktion können Sie die Medienabfragezeichenfolge des Frameworks in der Variablen this.large abrufen. Der HTML-Code in der Variablen lg_xl_view wird geladen, wenn der Wert der Medienabfragezeichenfolge in this.large() gleich LG_UP, groß oder höher ist. Der HTML-Code in der Variablen sm_md_view wird geladen, wenn der Wert der Medienabfragezeichenfolge in this.large() nicht gleich LG_UP ist.

Fügen Sie Typdeklarationen für large und moduleConfig zur Klasse hinzu.

class DashboardViewModel {
   chartTypes: Array<Object>;
   chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
   chartData: Array<Object>;
   chartDataProvider: MutableArrayDataProvider<string, {}>;
   activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
   val: ko.Observable<string>;
   large: ko.Observable<boolean>;
   moduleConfig: ko.PureComputed<any>;

Speichern Sie die Datei dashboard.ts.

Die Datei sollte in etwa final-dashboard-ts.txt aussehen.

Aufgabe 4: 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 final-app.png

Um den Inhalt in der Variablen sm_md_view anzuzeigen, passen Sie den Bildschirm auf eine kleine oder mittlere Größe an. Beachten Sie die gekürzte Liste der Elemente unter der Überschrift "Aktivitätsdetails", die helles Cyan markiert ist.

Beschreibung der Abbildung Small-screen.png

Um den Inhalt in der Variablen lg_xl_view anzuzeigen, ändern Sie die Bildschirmgröße in eine große oder zusätzliche Größe.

Beschreibung der Abbildung big-screen.png
Drücken Sie im Terminalfenster auf Ctrl+C, und geben Sie bei entsprechender Aufforderung y ein, um den Oracle JET-Tooling-Batchjob zu beenden.
Schließen Sie das Browserfenster oder die Browserregisterkarte.
Ihre abgeschlossene App mit responsiver Designfunktion sollte in etwa jet_web_application_responsive_design_final.zip aussehen.

Aufgabe 5: (Optional) Webanwendung aus einer wiederhergestellten App ausführen

Wenn Sie die abgeschlossene Oracle JET-Webanwendung aus dem angegebenen Code ausführen möchten, können Sie die App aus der heruntergeladenen Archivdatei wiederherstellen. Um mit einer gestreiften und komprimierten Oracle JET-App zu arbeiten, müssen Sie Projektabhängigkeiten, einschließlich Oracle JET-Tooling, und die erforderlichen Librarys und Module, innerhalb der extrahierten App wiederherstellen.

Laden Sie die Datei jet_web_application_responsive_design_final.zip herunter, und extrahieren Sie den Inhalt der abgeschlossenen App in den Ordner jet_web_application_responsive_design_final.
Navigieren Sie im Terminalfenster zum Ordner jet_web_application_responsive_design_final, und stellen Sie die Oracle JET-Webanwendung wieder her.
```
$ ojet restore
```
Warten Sie auf eine Bestätigung.
```
$ Restore complete
```
Die App kann jetzt ausgeführt werden.
Führen Sie die Webanwendung aus, und testen Sie sie im Browser.
```
$ ojet serve
```
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

Show or hide content in the Oracle JET web application

F53149-01

February 2022