Container für verschiedene Bildschirmgrößen formatieren

Einführung

In diesem Tutorial erfahren Sie, wie Sie eine Oracle JET-Webanwendung so anpassen, dass verschiedene Bildschirmgrößen mit Oracle JET-Helper-Klassen unterstützt werden.

Mit Oracle JET-Helper-Klassen können Sie Bedingungen für verschiedene Bildschirmgrößen festlegen. In einem flexiblen Layout wächst oder verkleinert sich ein Element in einem Container, um den Containerbereich zu füllen. Oracle JET bietet Stilklassen für kleine, mittlere, große und extra große Bildschirmgrößen. Sie können die für den Inhalt zugewiesene minimale Bildschirmbreite festlegen, indem Sie die Anzahl der logischen Spalten von 1 bis 12 angeben, die der Inhalt für die ausgewählte Bildschirmgröße verwenden soll. Wenn Sie während der Angabe des Schlüsselworts only in der Bedingung eine Bildschirmgröße auswählen, gilt die Bedingung nur für diese Bildschirmgröße. Wenn Sie eine Bildschirmgröße auswählen, jedoch keine größere Bildschirmgröße angeben, gilt die Bedingung für die ausgewählte Bildschirmgröße und für alle nachfolgenden größeren Bildschirmgrößen. Durch die Verwendung von Helper-Klassen in Ihrer App können Sie die Anzeige und Ausrichtung von Text und Elementen steuern, das Auffüllen um Panels anpassen und Spalten für verschiedene Bildschirmgrößen festlegen.

Die Bildschirmgrößen sind logisch in 12 Spalten unterteilt.

Beschreibung der Abbildung screen-sizes.png

Ziele

In diesem Tutorial fügen Sie Ihrer Oracle JET-Webanwendung Helper-Klassen hinzu, um Textausrichtung anzugeben, Füllungen zu Panels hinzuzufügen und Spalten für verschiedene Bildschirmgrößen festzulegen.

Voraussetzungen

Aufgabe 1: Helper-Klassen für Inhaltsausrichtung hinzufügen

Ändern Sie die Ausrichtung des Inhalts im Layout der Oracle JET-Webanwendung, indem Sie Helper-Klassen für verschiedene Bildschirmgrößen im Element div angeben.

  1. Öffnen Sie das Oracle JET Cookbook, und klicken Sie in der Menüleiste auf Framework. Klicken Sie anschließend auf CSS-Utilitys, klicken Sie auf Layout, und wählen Sie in der Randleiste die Demo Textende aus.

  2. In der Oracle JET Cookbook-Demo für das Textende erfahren Sie, wie Sie die Styling-Klasse oj-sm-only-text-align-end implementieren können, um Textinhalte am Ende eines kleinen Bildschirms auszurichten. Um einen kleinen Bildschirm zu demonstrieren, klicken Sie auf das Telefonporträt-Symbol, und zeigen Sie das responsive Verhalten für Ausrichtungsende an.

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

  4. Suchen Sie das Element div mit id="activitiesContainer" vor der Überschrift "Aktivitäten", und fügen Sie dann die Oracle JET Responsive Helper-Klasse oj-sm-only-text-align-end hinzu.

    <!-- The responsive helper style class aligns the Activities container text to the
 end of the screen when the screen size is small -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end">
  <h3 id="activitiesHeader">Activities</h3>

    Die Formatklasse oj-sm-only-text-align-end richtet den Inhalt im Container nur dann an das Ende der Bildschirmbreite aus, wenn die Bildschirmgröße klein ist.

  5. Speichern Sie die Datei dashboard.html.

    Der Code sollte in etwa content-alignment-dashboard-html.txt aussehen.

Aufgabe 2: Helper-Klassen für Füllung hinzufügen

Fügen Sie mit Hilfe der Oracle JET Responsive Abstandsstilklassen Abstand zum Inhalt hinzu. Wenn Sie die Antwortabstandsklasse für das übergeordnete div-Element angeben, wird die Auffüllung auf alle untergeordneten div-Elemente dieses übergeordneten Elements angewendet.

  1. Suchen Sie das Element div mit id="parentContainer2", und fügen Sie die Oracle JET Responsive-Abstandsstilklasse oj-lg-padding-pad-6x hinzu.

    <!-- The style class is specified in the parent div element -->
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x">

  2. Speichern Sie die Datei dashboard.html. Der Code sollte in etwa padding-dashboard-html.txt aussehen.

Aufgabe 3: Spalten für verschiedene Bildschirmgrößen festlegen

Geben Sie in der Oracle JET-Webanwendung die Stilklassen für die Skalierung im Element div an. Mit diesen Oracle JET-Stilklassen können Sie die minimale Spaltenbreite festlegen, die für die angegebene Bildschirmgröße zugewiesen wird.

  1. Suchen Sie das Element div, wobei id="activitiesContainer" vor der Überschrift "Aktivitäten" steht, und fügen Sie die Stilklassen hinzu, mit denen die Mindestanzahl an Spalten für verschiedene Bildschirmgrößen angegeben wird.

    <!-- The oj-md-4 and oj-sm-12 style classes specify the column width for small and medium screen sizes -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-md-4 oj-sm-12">
  <h3 id="activitiesHeader">Activities</h3>

    Die Stilklasse oj-sm-12 macht die div-Container-12-Spalten auf einem kleinen Bildschirm breit, und oj-md-4 macht den div-Container vier Spalten breit, wenn er sich in mittleren oder höheren Bildschirmgrößen befindet.

  2. Suchen Sie die div-Elemente um die Überschrift "Elementdetails", die id-Attribute mit den Werten parentContainer2, activityItemsContainer und itemDetailsContainer aufweisen. Fügen Sie dann die folgenden Stilklassen hinzu, um die Mindestspaltenbreite für verschiedene Bildschirmgrößen anzugeben.

    <!-- The style class in the div elements specifies the column width for different screen sizes -->
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12">
  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  </div>
  <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">

  3. Speichern Sie die Datei dashboard.html. Der Code sollte in etwa final-columns-dashboard-html.txt aussehen.

Aufgabe 4: Webanwendung ausführen

  1. 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 Ihrem lokalen Webbrowser ausgeführt, in dem Sie den Dashboard-Inhalt anzeigen können. Klicken Sie mit der rechten Maustaste auf die Seite, und wählen Sie Prüfen, um die Seitenansicht in den Entwicklertools anzuzeigen. Wählen Sie dann ein Gerät mit einer geringen Bildschirmgröße, wie z.B. Pixel 5, aus dem Dropdown-Menü Dimensionen, um die Änderungen an der Inhaltsausrichtung der Listenelemente "Aktivitäten" zu prüfen.

    Das responsive Layout auf einem kleinen Bildschirm

    Beschreibung der Abbildung content-alignment.png

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

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