Konfigurieren von Layout-Container und Layout-Modus

Responsive Layout ist ein Mechanismus zum Realisieren von reaktionsfähigem Webdesign. Damit lassen sich Webseiten erstellen, deren Layout und Abmessungen von dem Gerät des Benutzers abhängen.

Hinweis

Dieser Ansatz ist vergleichbar mit den Mechanismen für mobile Websites, die adaptives Webdesign nutzen (in erster Linie für die klassische Benutzeroberfläche).

Das responsive Layout für Ihre Seiten wird von AEM mithilfe einer Kombination von Mechanismen ermöglicht:

  • Layout-Container-Komponente

    Diese Komponente liefert ein Rasterabsatzsystem, mit dem Sie Komponenten in einem responsiven Raster hinzufügen und positionieren können. Sie können sie als Standard-ParSys für Ihre Seite nutzen und/oder sie anderen Autoren im Komponenten-Browser zur Verfügung stellen.

    • The default Layout Container component is defined under:

      /libs/wcm/foundation/components/responsivegrid

    • Sie können Layout-Container wie folgt definieren:

      • als Komponente, die Benutzer zu einer Seite hinzufügen können

      • als Standard-ParSys für die Seite

      • Beide.

        Sie können den Layout-Container als Standard für die Seite festlegen und es den Benutzern gleichzeitig erlauben, weitere Layout-Container darin hinzuzufügen, z. B. für die Spaltensteuerung.

  • Layout-Modus​Sobald der Layout-Container auf der Seite positioniert ist, können Sie die
    Layout -Modus zum Positionieren von Inhalten im interaktiven Raster.

  • EmulatorHiermit können Sie responsive Websites erstellen und bearbeiten, deren Layout durch eine interaktive Größenanpassung der Komponenten an die Größe des Geräts oder Fensters angepasst wird. Der Benutzer kann sich mit dem Emulator ansehen wie der Inhalt für bestimmte Geräte gerendert wird.

ACHTUNG

Auch wenn die Layout-Container-Komponente in der klassischen Benutzeroberfläche verfügbar ist, steht der vollständige Funktionsumfang nur in der Touch-optimierten Benutzeroberfläche zur Verfügung.

Dieser responsive Rastermechanismus bietet folgende Möglichkeiten:

  • Haltepunkte (die eine Gerätegruppierung anzeigen), um unterschiedliches Verhalten der Inhalte basierend auf dem Geräte-Layout zu definieren
  • Ausblenden von Komponenten basierend auf der Gerätegruppe (definieren Sie, an welchem Haltepunkt eine Komponente ausgeblendet werden soll)
  • Horizontale Ausrichtung am Raster (platzieren Sie Komponenten im Raster, passen Sie die Größe an, definieren Sie, wann ein Reduzieren/Umfließen daneben oder drüber/darunter stattfinden soll).
  • Realisieren einer Spaltensteuerung.
Hinweis

Bei einer vorab konfigurierten Installation wurde das responsive Layout für die We.Retail-Referenzwebsite konfiguriert. Sie müssen die Layout-Container-Komponente für andere Seiten nach wie vor aktivieren.

Konfigurieren des responsiven Emulators

Mit diesen Aufgaben können Sie den responsiven Emulator auf Ihrer Website anzeigen.

Registrieren der Seitenkomponenten für die Emulation

Um die Emulator-Unterstützung für Ihre Seiten zu aktivieren, müssen Sie die Seitenkomponenten registrieren. Weitere Informationen finden Sie unter Registrieren von Seitenkomponenten für die Simulation.

Festlegen der Gerätegruppen

Informationen dazu, wie Sie die Gerätegruppen festlegen, die in der Geräteliste des Emulators angezeigt werden, finden Sie unter Festlegen der Gerätegruppen.

Um den Emulator einzubinden, müssen Sie die Website mit den Gerätegruppen verknüpfen. See Adding the Devices List (for both the classic and touch-optimized UI).

Aktivieren des Layout-Modus für die Website

These procedures are used to enable the Layout mode on your site.

Konfigurieren der Haltepunkte

Haltepunkte:

  • werden bei responsiven Designs genutzt

  • können folgendermaßen definiert werden:

    • auf der Seitenvorlage, von der die Einstellungen auf alle Seiten kopiert werden, die mit dieser Vorlage erstellt wurden
    • auf dem Seitenknoten, von dem die Einstellungen von allen untergeordneten Seiten geerbt werden
  • definieren einen Titel und eine Breite:

    • Der Titel beschreibt die allgemeine Gerätegruppierung, bei Bedarf mit Ausrichtung; z. B. phone, tablet, tabletlandscape.
    • Die Breite definiert die Höchstbreite in Pixel für diese allgemeine Gerätegruppierung. Wenn beispielsweise der Haltepunkt „phone“ eine Breite von 768 hat, ist das die Höchstbreite des Layouts, das für ein Smartphone genutzt wird.
  • sind als Markierung oben auf dem Seiten-Editor sichtbar, wenn Sie den Emulator nutzen

  • werden von der übergeordneten Knotenhierarchie geerbt und können beliebig überschrieben werden

  • Es gibt einen standardmäßigen (vorab konfigurierten) Haltepunkt, der alles über dem letzten konfigurierten Haltepunkt abdeckt.

Haltepunkte können Sie mit CRXDE Lite oder XML definieren.

Hinweis

Wenn Sie ein neues Projekt einrichten:

  • müssen Sie Haltepunkte zu den Vorlagen hinzufügen.

Wenn Sie ein vorhandenes Projekt (mit vorhandenen Inhalten) migrieren, müssen Sie:

  • Haltepunkte zu den Vorlagen hinzufügen
  • dieselben Haltepunkte zu vorhandenen Seiten hinzufügen
    Da die Vererbung in Betrieb ist, können Sie diese auf die Stamm-Seite Ihres Inhalts beschränken.

Konfigurieren von Haltepunkten mit CRXDE Lite

  1. Wenn Sie CRXDE Lite (o. ä.) verwenden, navigieren Sie wahlweise zu einer der folgenden Optionen:

    • der Vorlagendefinition
    • The jcr:content node of your page.
  2. Under jcr:content create the node:

    • Name: cq:responsive
    • Typ: nt:unstructured
  3. Erstellen Sie darunter den Knoten:

    • Name: breakpoints
    • Typ: nt:unstructured
  4. Unter dem Haltepunktknoten können Sie eine beliebige Anzahl an Haltepunkten erstellen. Jede Definition ist ein einziger Knoten mit den folgenden Eigenschaften:

    • Name: <descriptive name>
    • Typ: nt:unstructured
    • Titel: String * <descriptive title seen in Emulator>*
    • Breite: Decimal * <value of breakpoint>*

Konfigurieren von Haltepunkten mit XML

Breakpoints are located inside the <jcr:content> section of the .context.html under the appropriate template (or content) folder.

Eine Beispieldefinition

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

Hinzufügen eines responsiven Informationsanbieters

Hinweis

Dies ist nur erforderlich, wenn die Seitenkomponente nicht auf der Foundation-Seitenkomponente basiert.

Kopieren Sie die folgende cq:infoProviders-Knotenstruktur in die übergeordnete Seitenkomponente:

/libs/foundation/components/page/cq:infoProviders/responsive

Aktivieren der Größenänderung von Komponenten für die Seite

These procedures are required so you can resize components in the Layout mode.

Festlegen des Layout-Containers als Haupt-ParSys

Um einen Layout-Container als Haupt-ParSys einer Seite festzulegen, müssen Sie das ParSys wie folgt definieren:

wcm/foundation/components/responsivegrid

Wahlweise in der:

  • Seitenkomponente
  • Seitenvorlage (für die zukünftige Verwendung)

Die folgenden beiden Beispiele veranschaulichen die Definition:

  • HTL:

    <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>
    
  • JSP:

    <cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
    

Einschließen von responsivem CSS

CSS für Haltepunkte mit LESS

AEM nutzt LESS, um Teile des erforderlichen CSS zu erstellen. Sie müssen für Ihre Projekte eingeschlossen sein.

Sie müssen auch eine Client-Bibliothek erstellen, um zusätzliche Konfigurationen und Funktionsaufrufe bereitzustellen. Der folgende LESS-Ausschnitt ist ein Beispiel für den Code, den Sie mindestens zu Ihrem Projekt hinzufügen müssen:

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

Die Basisrasterdefinition finden Sie unter:

/libs/wcm/foundation/clientlibs/grid/grid_base.less

Überlegungen zum Stil

Die Größe von Komponenten in einem responsiven Container (und ihren entsprechenden HTML-DOM-Elementen) wird gemäß der Größe des responsiven Rasters geändert. Daher empfehlen wir in diesen Fällen, Definitionen von (enthaltenen) DOM-Elementen mit fester Breite zu vermeiden (oder zu aktualisieren).

Beispiel:

  • Vorher:

    • width=100px
  • Nachher:

    • max-width=100px

Größenänderung und adaptive Bild-Compliance

Jede Änderung der Größe einer Komponente innerhalb des Rasters löst mindestens einen der folgende Listener aus:

  • beforeedit

  • beforechildedit

  • afteredit

  • afterchildedit

To properly resize and update the content of an adaptive image included in a responsive grid, you need to add an afterEdit set to REFRESH_PAGE listener into the EditConfig file of every contained component.

Beispiel:

<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />

Der adaptive Bildmechanismus wird über ein Skript bereitgestellt, das die Auswahl des korrekten Bildes für die aktuelle Fenstergröße steuert. Es wird aktiviert, wenn das DOM bereit ist oder ein dediziertes Ereignis empfangen wird. Zurzeit muss die Seite aktualisiert werden, um das Ergebnis der Benutzeraktion korrekt widerzuspiegeln.

ACHTUNG

Benutzerdefinierte Stylesheet-clientlibs müssen als Teil der Kopfzeile geladen werden, damit sie sowohl beim Autor als auch bei der Veröffentlichung ordnungsgemäß funktionieren.

Aktivieren der Layout-Container-Komponente für die Seite

Mit den folgenden Aufgaben können Autoren Instanzen der Layout-Container-Komponente auf die Seite verschieben.

Aktivieren der Layout-Container-Komponente für die Seitenbearbeitung

Um es Autoren zu erlauben, weitere responsive Raster zu den Inhaltsseiten hinzuzufügen, müssen Sie die Layout-Container-Komponente für Ihre Seite hinzufügen. Möglich ist dies über folgende Optionen:

  • Autorenumgebung

    Aktivieren Sie im Design-Modus die Layout-Container-Komponente für eine Seite.

  • Komponentendefinition

    Nutzen Sie beim Definieren der Komponente allowedComponent oder ein Static Include.

Konfigurieren des Rasters des Layout-Containers

Sie können die Anzahl an Spalten konfigurieren, die für jede spezifische Instanz des Layout-Containers verfügbar sind:

  1. Autorenumgebung

    Sie können die Anzahl an Spalten konfigurieren, die für jede spezifische Instanz des Layout-Containers verfügbar sind.

    Öffnen Sie dazu im Design-Modus das Design-Dialogfeld für den betroffenen Container. Hier können Sie festlegen, wie viele Spalten für die Positionierung und Größeneinstellung vorhanden sein sollen. Standard: 12.

  2. XML

    Die Definitionen für das responsive Raster werden in folgender Datei festgelegt:

    etc/design/<*your-project-name*>/.content.xml

    Sie können die folgenden Parameter festlegen:

    • Anzahl an verfügbaren Spalten:

      • columns="{String}8"
    • Komponenten, die zur aktuellen Komponente hinzugefügt werden können:

      • components="[/libs/wcm/foundation/components/responsivegrid, ...

Auf dieser Seite