AEM ermöglicht das Erstellen eines responsiven Layouts für Ihre Seiten mithilfe der Komponente Layout-Container.
Dieses liefert ein Absatzsystem, mit dem Sie Komponenten in einem responsiven Raster hinzufügen und positionieren können. Dieses Raster kann das Layout abhängig von der Größe des Geräts/Fensters und des Formats neu anordnen. Die Komponente wird zusammen mit dem Layout-Modus verwendet, in dem Sie Ihr responsives Layout geräteabhängig erstellen und bearbeiten können.
Der Layout-Container:
Der Benutzer kann sich mit dem Emulator ansehen, wie der Inhalt für bestimmte Geräte gerendert wird.
Das responsive Layout für Ihre Seiten wird von AEM mithilfe einer Kombination von Mechanismen ermöglicht:
Diese Komponente ist im Komponenten-Browser verfügbar. Sie bietet ein Raster-Absatzsystem, mit dem Sie Komponenten in einem responsiven Raster hinzufügen und positionieren können. Dieses kann auf Ihrer Seite auch als Standardabsatzsystem festgelegt werden.
Sobald der Layout-Container auf der Seite positioniert ist, können Sie im Layout-Modus Inhalte im responsiven Raster positionieren.
Emulator
Hiermit 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 dann mit dem Emulator ansehen, wie der Inhalt für bestimmte Geräte gerendert wird.
Dieser responsive Rastermechanismus bietet folgende Möglichkeiten:
Je nach Projekt kann der Layout-Container als standardmäßiges Absatzsystem für Ihre Seiten oder als Komponente verwendet werden, die über den Komponenten-Browser zu Ihrer Seite hinzugefügt werden kann (oder beides).
Adobe stellt eine GitHub-Dokumentation zum responsiven Layout als Referenz bereit. Diese kann Frontend-Entwicklern zur Verfügung gestellt werden, damit sie das AEM-Raster außerhalb von AEM verwenden können, um beispielsweise statische HTML-Modelle für künftige AEM Sites zu erstellen.
Die Verwendung des obigen Mechanismus wird durch die Konfiguration der Vorlage aktiviert. Weitere Informationen finden Sie unter „Konfigurieren des responsiven Layouts“.
Wenn Sie den Inhalt Ihrer Website erstellen, möchten Sie sicherstellen, dass Ihr Inhalt auf dem für die Anzeige verwendeten Gerät angemessen angezeigt wird.
AEM ermöglicht die Definition von Layouts, die von der Breite des Geräts abhängig sind:
Das Gerät Desktop, das keine bestimmte Breite aufweist und sich auf den Standard-Breakpoint bezieht (d. h. auf alles über dem letzten konfigurierten Breakpoint).
Es wäre möglich, Breakpoints für jedes einzelne Gerät zu definieren. Dies würde jedoch den Aufwand für die Layout-Definition und die Wartung deutlich erhöhen.
Wenn Sie mit dem Emulator ein bestimmtes zu emulierendes Gerät und die Layout-Definition auswählen, wird auch der zugehörige Breakpoint hervorgehoben. Alle von Ihnen durchgeführten Änderungen am Layout wirken sich auch auf andere Geräte aus, für die derselbe Breakpoint gilt – also auf alle links vom aktiven Breakpoint bis zum nächsten Breakpoint platzierten Geräte.
Wenn Sie z. B. das Gerät iPhone 6 Plus für die Emulation und das Layout auswählen (das mit einer Breite von 540 Pixel definiert ist), wird auch der Breakpoint Telefon (768 Pixel) aktiviert. Alle Änderungen am Layout, die Sie für das iPhone 6 durchführen, gelten auch für die anderen Geräte unter dem Breakpoint Telefon, wie das iPhone 5 (mit 320 Pixel definiert).
Öffnen Sie die gewünschte Seite für die Bearbeitung. Beispiel:
http://<host>:<port>/editor.html/content/wknd/en/sports/la-skateparks.html
Wählen Sie in der oberen Symbolleiste das Symbol Emulator aus:
Die Emulator-Symbolleiste wird geöffnet.
In der Emulator-Symbolleiste werden zusätzliche Layout-Optionen angezeigt:
Um ein bestimmtes Gerät für das Emulieren auszuwählen, können Sie wie folgt vorgehen:
Nachdem Sie ein bestimmtes Gerät ausgewählt haben, sind folgende Möglichkeiten verfügbar:
Ein Layout-Container ist ein Absatzsystem mit folgenden Eigenschaften:
Falls er noch nicht verfügbar ist, muss der Layout-Container explizit für ein Absatzsystem/eine Seite aktiviert werden.
Der Layout-Container ist als Standardkomponente im Komponentenbrowser verfügbar. Von hier können Sie ihn an die gewünschte Position auf der Seite ziehen, nach der der Platzhalter Komponenten hierher ziehen angezeigt wird.
Anschließend können Sie Komponenten zum Layout-Container hinzufügen. Diese Komponenten enthalten dann den eigentlichen Inhalt:
Einen Layout-Container können Sie wie andere Komponenten im Bearbeitungsmodus auswählen und anschließend bearbeiten (ausschneiden, kopieren, löschen):
Da ein Layout-Container ein Absatzsystem ist, werden beim Löschen der Komponente sowohl das Layout-Raster als auch sämtliche im Container vorhandenen Komponenten und deren Inhalte gelöscht.
Wenn Sie den Mauszeiger über den Rasterplatzhalter halten oder darauf tippen, wird das Aktionsmenü angezeigt.
Wählen Sie daraufhin die Option Übergeordnetes Element aus.
Wenn die Layout-Komponente verschachtelt ist, wird durch Auswählen der Option Übergeordnetes Element eine Dropdown-Liste geöffnet, über die Sie den verschachtelten Layout-Container oder seine übergeordneten Elemente auswählen können.
Wenn Sie den Mauszeiger im Dropdown-Menü über die Container-Namen halten, wird ihre Gliederung auf der Seite angezeigt.
Dadurch wird das gesamte Raster mit den Inhalten markiert. Die Aktionssymbolleiste wird angezeigt, über die Sie eine Aktion auswählen können, z. B. Löschen.
Sie können für jeden Breakpoint (der durch den emulierten Gerätetyp und die Ausrichtung bestimmt wird) ein eigenes Layout definieren.
Das Layout eines mit dem Layout-Container implementierten responsiven Rasters muss im Layout-Modus konfiguriert werden.
Der Layout-Modus kann auf zwei Arten aktiviert werden.
Im Layout-Modus können Sie verschiedene Aktionen für ein Raster durchführen:
Passen Sie die Größe der Inhaltskomponenten mithilfe der blauen Punkte an. Die Größenanpassung wird immer am Raster ausgerichtet. Während der Größenanpassung wird im Hintergrund das Raster sichtbar, das die Ausrichtung erleichtert:
Wenn Sie die Größe von Komponenten wie Bildern ändern, bleiben die Proportionen und Seitenverhältnisse erhalten.
Wenn Sie auf eine Inhaltskomponente klicken/tippen, bietet Ihnen die Symbolleiste folgende Möglichkeiten:
Im Layout-Modus können Sie auf Komponenten hierher ziehen tippen/klicken, um die gesamte Komponente auszuwählen. Dadurch wird die Symbolleiste für diesen Modus angezeigt.
Die Symbolleiste weist je nach Status der Layout-Komponente und zugehörigen Komponenten verschiedene Optionen auf. Beispiel:
Übergeordnetes Element: Wählt die übergeordnete Komponente aus.
Verborgene Komponenten einblenden: Ermöglicht das Einblenden aller oder einzelner Komponenten. Die Zahl gibt an, wie viele verborgene Komponenten es jeweils gibt. Der Zähler zeigt an, wie viele Komponenten ausgeblendet sind.
Breakpoint-Layout zurücksetzen: Ermöglicht die Rückkehr zum Standard-Layout. Dies bedeutet, dass kein benutzerdefiniertes Layout vorgegeben wird.
In neue Zeile verschieben: Verschiebt die Komponente um eine Position nach oben, wenn der Leerraum dies erlaubt.
Komponente ausblenden: Blendet die aktuelle Komponente aus.
Im obigen Beispiel sind die Aktionen zum Verschieben und Ausblenden verfügbar, weil dieser Layout-Container in einem übergeordneten Layout-Container verschachtelt ist.
Komponenten einblenden
Wählen Sie die übergeordneten Komponenten aus, um die Aktionssymbolleiste mit der
Option Ausgeblendete Komponenten anzeigen anzuzeigen. In diesem Beispiel gibt es zwei ausgeblendete Komponenten.
Bei Auswahl der Option Verborgene Komponenten einblenden werden die jeweils ausgeblendeten Komponenten in Blau an ihren ursprünglichen Positionen angezeigt.
Bei Auswahl der Option Alle wiederherstellen werden alle verborgenen Komponenten eingeblendet.