Sie sehen sich Hilfeinhalte der folgenden Version an:

Das Stilsystem ermöglicht es einem Vorlagenautor, in den Komponentenrichtlinien für Komponenten Stilklassen festzulegen, die ein Inhaltsautor später bei der Bearbeitung der Komponente auf einer Seite auswählen kann. Diese Formatvorlagen können visuelle Varianten der Komponente sein. Dadurch werden Komponenten flexibler.

Aus diesem Grund ist es nicht notwendig, für jeden Stil eine benutzerdefinierte Komponente zu entwickeln oder das Komponenten-Dialogfeld anzupassen, um eine derartige Stil-Funktionalität zu ermöglichen. Dies macht wiederum mehr Komponenten wiederverwertbar, da sie schnell, einfach und ohne AEM-Backend-Entwicklungsschritte an die Bedürfnisse des Inhaltsautors angepasst werden können.

Nutzungsszenario

Vorlagenautoren müssen nicht nur konfigurieren können, wie die Komponenten für Inhaltsautoren funktionieren. Sie müssen auch die möglichen visuellen Varianten der Komponenten konfigurieren können.

Genauso müssen Inhaltsautoren ihre Inhalte nicht nur strukturieren und anordnen können. Sie müssen auch auswählen können, wie der Inhalt visuell präsentiert wird.

Das Stilsystem bietet eine einheitliche Lösung für die Anforderungen des Vorlagenautors und des Inhaltsautors:

  • Vorlagenautoren können in den Komponentenrichtlinien für Komponenten Stilklassen festlegen.
  • Inhaltsautoren können diese Klassen später aus einem Dropdown-Menü auswählen, wenn sie die Komponente auf einer Seite bearbeiten, um die jeweiligen Stile darauf anzuwenden.

Die Stilklasse wird daraufhin in das Decoration-Wrapper-Element der Komponente eingefügt, sodass sich der Komponentenentwickler keine Sorgen über die Handhabung der Stile machen muss. Er muss lediglich das CSS der einzelnen Stile bereitstellen.

Überblick

Die allgemeine Verwendung des Stilsystems sieht wie folgt aus.

  1. Der Webdesigner erstellt unterschiedliche visuelle Varianten für eine Komponente.

  2. Dem HTML-Entwickler werden die HTML-Ausgabe der Komponenten sowie die zu implementierenden visuellen Varianten zur Verfügung übermittelt.

  3. Der HTML-Entwickler definiert die CSS-Klassen, die der visuellen Variante entsprechen und die in das Wrapper-Element der Komponenten eingefügt werden sollen.

  4. Der HTML-Entwickler implementiert den entsprechenden CSS-Code (und optional JS-Code) für die einzelnen visuellen Varianten, damit diese wie definiert angezeigt werden.

  5. Der AEM-Entwickler legt den bereitgestellten CSS-Code (und optional JS-Code) in einer Client-Bibliothek ab und stellt ihn bereit.

  6. Der AEM-Entwickler oder der Vorlagenautor konfiguriert die Seitenvorlagen und bearbeitet die Richtlinien für die formatierten Komponenten mit den definierten CSS-Klassen. Dabei legt er benutzerfreundliche Namen für die einzelnen Stile fest und definiert, welche Stile kombiniert werden können.

  7. Der AEM-Seitenautor kann die entworfenen Stile daraufhin über das Stilmenü in der Symbolleiste einer Komponente im Seiteneditor auswählen.

Beachten Sie, dass nur die letzten drei Schritte direkt in AEM ausgeführt werden. Das bedeutet, dass die gesamte erforderliche CSS- und JavaScript-Entwicklung ohne AEM durchgeführt werden kann.

Für die eigentliche Implementierung der Stile ist nur die Bereitstellung in AEM sowie die Auswahl innerhalb der Komponenten der gewünschten Vorlagen erforderlich.

Das folgende Diagramm stellt die Architektur des Stilsystems dar.

aem-style-system

Verwendung

Das Feature Pack 18678 für AEM 6.3 ist erforderlich, um das Stilsystem zu aktivieren. Es kann über Package Share heruntergeladen werden.

Um die Funktion zu demonstrieren, müssen Stile für eine Komponente erstellt werden. Mit der Listenkomponente der Kernkomponentenimplementierung von We.Retail als Grundlage können Sie das angehängte Paket mit Stilen installieren, um die Funktionalität der Funktion kennenzulernen.

Herunterladen

Hinweis:

Das Demopaket soll zeigen, wie Autoren das Stilsystem verwenden können. Es ist nicht als Referenz für die bestmögliche Implementierung gedacht.

Dieses Paket ist nur erforderlich, bis We.Retail ein integriertes Beispiel sowie Best Practices zur Implementierung bereitstellt.

In den folgenden Abschnitten Als Inhaltsautor und Als Vorlagenautor wird beschrieben, wie Sie die Funktionalität des Stilsystems mit dem Stilsystem-Demopaket sowie We.Retail testen können.

Wenn Sie das Stilsystem für Ihre eigenen Komponenten verwenden möchten, gehen Sie wie folgt vor:

  1. Installieren Sie den CSS-Code als Client-Bibliotheken, wie im Abschnitt Überblick erklärt.
  2. Konfigurieren Sie die CSS-Klassen, die Sie Ihren Inhaltsautoren zur Verfügung stellen möchten, wie im Abschnitt Als Vorlagenautor beschrieben.
  3. Inhaltsautoren können die Stile daraufhin wie im Abschnitt Als Inhaltsautor beschrieben verwenden.

Als Inhaltsautor

  1. Navigieren Sie nach der Installation des Stilsystem-Demopakets zur englischsprachigen Master-Homepage von We.Retail unter http://localhost:4502/sites.html/content/we-retail/language-masters/en und bearbeiten Sie die Seite.

  2. Wählen Sie die Komponente Listen unten oder oben im Absatzsystem aus. Verwechseln Sie sie nicht mit der Komponente Artikelliste.

    screen_shot_2017-11-15at162032
  3. Tippen oder klicken Sie auf die Schaltfläche Stile in der Symbolleiste der Komponente Liste, um das Stilmenü zu öffnen und das Erscheinungsbild der Komponente zu bearbeiten.

    screen_shot_2017-11-15at162358

    Hinweis:

    In diesem Beispiel schließen sich die Layout-Stile (Block und Raster) gegenseitig aus, während die Optionen zur Anzeige (Bild oder Datum) kombinierbar sind. Dies kann in der Vorlage durch den Vorlagenautor konfiguriert werden.

Als Vorlagenautor

  1. Bei der Bearbeitung der englischsprachigen Master-Homepage von We.Retail unter http://localhost:4502/sites.html/content/we-retail/language-masters/en können Sie die Vorlage der Seite über Seiteninformationen > Vorlage bearbeiten anpassen.

    screen_shot_2017-11-15at162922
  2. Bearbeiten Sie die Richtlinien für die Komponente Liste, indem Sie auf die Schaltfläche Richtlinie der Komponente klicken. Verwechseln Sie sie nicht mit der Komponente Artikelliste.

    screen_shot_2017-11-15at163133
  3. Auf der Registerkarte „Stile“ in den Eigenschaften können Sie sehen, wie die Stile konfiguriert wurden.

    screen_shot_2017-11-15at163546
    • Gruppenname: Stile können im Stilmenü gruppiert werden, das dem Inhaltsautor angezeigt wird, während er den Stil einer Komponente konfiguriert.
    • Mehrere: Legt fest, dass mehrere Stile innerhalb einer Gruppe gleichzeitig ausgewählt werden können.
    • Stilname: Die Beschreibung des Stils, der dem Inhaltsautor bei der Konfiguration des Stils der Komponente angezeigt wird.
    • CSS-Klassen: Der tatsächliche Name der dem Stil zugeordneten CSS-Klasse.

    Ordnen Sie die Gruppen und die Stile innerhalb der Gruppen mit den Ziehpunkten. Nutzen Sie die Symbole „Hinzufügen“ oder „Löschen“, um Gruppen bzw. Stile innerhalb der Gruppen hinzuzufügen oder zu entfernen.

Vorsicht:

Die als Stil-Eigenschaften einer Komponentenrichtlinie konfigurierten CSS-Klassen (sowie der JavaScript-Code, soweit erforderlich) müssen als Client-Bibliotheken bereitgestellt werden, damit sie funktionieren.

Einrichtung

Hinweis:

Version 2 der Kernkomponenten kann das Stilsystem vollständig nutzen. Dafür ist keine zusätzliche Konfiguration erforderlich.

Befolgen Sie diese Schritte, um das Stilsystem für Ihre eigenen benutzerdefinierten Komponenten zu aktivieren.

Damit eine Komponente mit dem Stilsystem von AEM verwendet werden kann und die Registerkarte „Stil“ im Dialogfeld „Design“ angezeigt wird, muss der Komponentenentwickler diese Registerkarte mit den folgenden Einstellungen für die Komponente miteinbeziehen:

  • path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"

Ist die Komponente entsprechend konfiguriert, fügt AEM die von den Seitenautoren festgelegten Stile automatisch in den Decoration-Element-Wrapper ein, der automatisch auf alle bearbeitbaren Komponenten angewendet wird. Dafür ist keine weitere Aktion der Komponente erforderlich.

Stile mit Elementnamen

Mit der String-Array-Eigenschaft cq:styleElements können Entwickler auch eine Liste der zulässigen Elementnamen für Stile in der Komponente konfigurieren. In der Registerkarte „Stile“ für die Richtlinie im Dialogfeld „Design“ kann der Vorlagenautor außerdem Elementnamen auswählen, die für die einzelnen Stile festgelegt werden sollen. Dadurch wird der Elementname des Wrapper-Elements definiert.

Diese Eigenschaft wird auf dem Knoten cq:Component festgelegt. Beispiel:

  • /apps/weretail/components/content/list@cq:styleElements=[div,section,span]

Vorsicht:

Definieren Sie keine Elementnamen für Stile, die kombiniert werden können. Wenn mehrere Elementnamen definiert werden, gilt die folgende Prioritätsreihenfolge:

  1. HTL hat stets den Vorrang: data-sly-resource="${'path/to/resource' @ decorationTagName='span'}
  2. Danach wird unter mehreren aktiven Stilen der erste Stil in der Liste der in der Komponentenrichtlinie konfigurierten Stile ausgewählt.
  3. Die Werte cq:htmlTag/cq:tagName der Komponente werden schließlich als Ausweichwert verwendet.

Die Fähigkeit, Stilnamen zu definieren, ist bei sehr generischen Komponenten wie dem Layout-Container oder der Inhaltsfragmentkomponente hilfreich, um diesen eine zusätzliche Bedeutung zu verleihen.

Zum Beispiel können einem Layout-Container so Semantik-Elemente wie <main>, <aside>, <nav> usw. zugewiesen werden.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie