Adobe empfiehlt die Verwendung des SPA-Editors für Projekte, für die ein clientseitiges Framework für die Einzelseitenanwendung (z. B. React) erforderlich ist. Weitere Informationen.
Gestalten Sie Ihre Webseiten so, dass sie sich dem Client-Darstellungsfeld anpassen, auf dem sie angezeigt werden. Responsives Design ermöglicht die effektive Darstellung derselben Web-Seiten auf verschiedenen Geräten in beiden Ausrichtungen. Die folgende Grafik zeigt eine Reihe von Möglichkeiten, wie eine Seite auf Änderungen der Fenstergröße reagieren kann:
Entwickeln Sie Adobe Experience Manager (AEM)-Anwendungen, die HTML5-Seiten generieren, die sich an verschiedene Fenstergrößen und Ausrichtungen anpassen. Beispielsweise entsprechen die folgenden Darstellungsfeldbreiten unterschiedlichen Gerätetypen und Ausrichtungen:
Weitere Informationen finden Sie unter den folgenden Themen zur Implementierung von responsivem Design:
Verwenden Sie beim Entwerfen Sidekick, um Ihre Seiten für verschiedene Bildschirmgrößen Vorschau.
Vor der Entwicklung einer AEM-Anwendung, die Ihre Web-Seiten unterstützt, müssen Sie einige Designentscheidungen treffen. Beispielsweise benötigen Sie die folgenden Informationen:
Die typische AEM-Programmstruktur unterstützt alle Implementierungen responsiven Designs:
Medienabfragen ermöglichen die selektive Nutzung von CSS-Stilen für das Seiten-Rendering. AEM-Entwicklungs-Tools und -funktionen ermöglichen Ihnen die effektive und effiziente Implementierung von Medienabfragen in Anwendungen.
Die W3C-Gruppe stellt die Medienabfragen-Empfehlung zur Verfügung, die diese CSS3-Funktion und die Syntax beschreibt.
Definieren Sie in der CSS-Datei Medienabfragen anhand der Eigenschaften der Zielgeräte. Die folgende Implementierungsstrategie kann für die Verwaltung der Stile der verschiedenen Medienabfragen verwendet werden:
Das Beispiel „We.Retail Media“ verwendet diese Strategie zur Definition von Styles beim Website-Design. Die von We.Retail verwendete CSS-Datei befindet sich unter */apps/weretail/clientlibs/clientlib-site/less/grid.less
.
In der folgenden Tabelle werden die Dateien im untergeordneten css-Ordner aufgeführt.
Dateiname | Beschreibung | Media-Abfrage |
---|---|---|
style.css | Allgemeine Stile. | Nicht zutreffend |
bootstrap.css | Allgemeine Stile, die vom Twitter-Bootstrap definiert werden. | Nicht zutreffend |
responsive-1200px.css | Stile für alle Medien mit einer Breite von 1200 Pixeln oder einer Breite. | @media (min-width: 1200px) { |
responsive-980px-1199px.css | Stile für Medien mit einer Breite zwischen 980 und 1199 Pixeln. | @media (min-width: 980 px) und (max-width: 1199px) { |
responsive-768px-979px.css | Stile für Medien mit einer Breite zwischen 768 und 979 Pixeln. | @media (min-width: 768 px) und (max-width: 979px) { |
responsive-767px-max.css | Stile für alle Medien mit einer Breite von weniger als 768 Pixeln. | @media (max-width: 767px) { |
responsive-480px.css | Stile für alle Medien mit einer Breite von weniger als 481 Pixeln. | @media (max-width: 480) { ... } |
Die Datei "css.txt"im Ordner "/etc/designs/weretail/clientlibs
"Liste die CSS-Dateien, die der Clientbibliotheksordner enthält. Die Reihenfolge der Dateien gibt die Priorität der Styles vor. Je kleiner das Gerät, desto spezifischer sind Styles.
#base=css
style.css
bootstrap.css
responsive-1200px.css
responsive-980px-1199px.css
responsive-768px-979px.css
responsive-767px-max.css
responsive-480px.css
Tipp: Beschreibende Dateinamen ermöglichen Ihnen die einfache Identifizierung der angestrebten Viewport-Größe.
Binden Sie den Client-Bibliotheksordner in das JSP-Skript Ihrer Seitenkomponente ein, um die CSS-Datei zu erzeugen, die die Medienabfragen enthält, und auf die Datei zu verweisen.
<ui:includeClientLib categories="apps.weretail.all"/>
Der Clientbibliotheksordner apps.weretail.all
bettet die clientlibs-Bibliothek ein.
Das JSP-Skript generiert den folgenden HTML-Code, der auf die Stylesheets verweist:
<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css?lang=de" type="text/css">
<link href="/etc/designs/weretail.css?lang=de" rel="stylesheet" type="text/css">
Sie haben die Möglichkeit, Vorschauen Ihrer Seiten in verschiedenen Größen anzuzeigen, um das Verhalten Ihres responsiven Designs zu testen. Im Modus Vorschau enthält Sidekick ein Geräte-Dropdownmenü, mit dem Sie ein Gerät auswählen können. Wenn Sie ein Gerät auswählen, passt sich die Seite der jeweiligen Darstellungsfeldgröße an.
Um die Vorschau des Geräts in Sidekick zu aktivieren, müssen Sie die Seite und den MobileEmulatorProvider-Dienst konfigurieren. Eine andere Seitenkonfiguration steuert die Liste der Geräte, die in der Liste Geräte angezeigt wird.
Die Liste Geräte wird in Sidekick angezeigt, wenn Ihre Seite das JSP-Skript enthält, das die Liste Geräte rendert. Um die Liste Geräte zu Sidekick hinzuzufügen, fügen Sie im Abschnitt head
das Skript /libs/wcm/mobile/components/simulator/simulator.jsp
ein.
Fügen Sie folgenden Code in das JSP-Skript ein, das den Abschnitt head
definiert:
<cq:include script="/libs/wcm/mobile/components/simulator/simulator.jsp?lang=de"/>
Um ein Beispiel anzuzeigen, öffnen Sie die Datei /apps/weretail/components/page/head.jsp
in CRXDE Lite.
Registrieren Sie Ihre Seitenkomponenten beim Werksdienst „MobileEmulatorProvider“ und definieren Sie die Eigenschaft mobile.resourceTypes
, um zur Unterstützung Ihrer Seiten den Gerätesimulator zu aktivieren.
In AEM können Sie die Konfigurationseinstellungen für solche Dienste auf unterschiedliche Weise vornehmen. Umfassende Informationen finden Sie unter Konfigurieren von OSGi.
Erstellen Sie beispielsweise einen Knoten [sling:OsgiConfig](/docs/experience-manager-64/deploying/configuring/configuring-osgi.html?lang=de#adding-a-new-configuration-to-the-repository)
in Ihrer Anwendung:
Übergeordneter Ordner: /apps/application_name/config
Name: com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-*alias*
Das Suffix - *alias*
ist erforderlich, da der MobileEmulatorProvider-Dienst ein Factory-Dienst ist. Verwenden Sie ein beliebiges eindeutiges Alias für diese Factory.
jcr:primaryType: sling:OsgiConfig
Fügen Sie folgende Knoteneigenschaft hinzu:
Name: mobile.resourceTypes
Typ: String[]
Wert: Die Pfade zu den Seitenkomponenten, die Ihre Webseiten rendern. Beispielsweise verwendet die geometrixx-media-App die folgenden Werte:
geometrixx-media/components/page
geometrixx-unlimited/components/pages/page
geometrixx-unlimited/components/pages/coverpage
geometrixx-unlimited/components/pages/issue
Zur Angabe der Gerätegruppen, die in der Liste „Geräte“ angezeigt werden, fügen Sie dem Knoten cq:deviceGroups
der Stammseite Ihrer Website eine Eigenschaft jcr:content
hinzu. Der Wert der Eigenschaft ist ein Array von Pfaden zu den Gerätegruppeknoten.
Gerätegruppenknoten befinden sich im Ordner /etc/mobile/groups
.
Die Stammseite der Geometrixx Media-Site ist beispielsweise /content/geometrixx-media
. Der Knoten /content/geometrixx-media/jcr:content
enthält die folgende Eigenschaft:
cq:deviceGroups
String[]
/etc/mobile/groups/responsive
Verwenden Sie die Tools-Konsole, um Gerätegruppen zu erstellen und zu bearbeiten.
Bearbeiten Sie Gerätegruppen, die Sie für responsives Design verwenden, und wählen Sie auf der Registerkarte „Allgemein“ die Option „Emulator deaktivieren“ aus. Diese Option verhindert, dass das Emulatorkarussel angezeigt wird, das für responsives Design nicht relevant ist.
Mithilfe von Medienabfragen können Sie eine Bildressource auswählen, die auf der Seite angezeigt wird. Allerdings werden alle Ressourcen, die eine Medienabfrage verwenden, um ihre Nutzung mit Bedingungen zu belegen, auf den Client heruntergeladen. Die Medienabfrage bestimmt lediglich, ob die heruntergeladene Ressource angezeigt wird.
Bei großen Ressourcen (z. B. Bildern) stellt das Herunterladen aller Ressourcen keine effiziente Nutzung der Client-Datenleitung dar. Verwenden Sie JavaScript zum Initiieren der Ressourcenanfrage, nachdem die Medienabfragen die Auswahl durchgeführt haben, um Ressourcen selektiv herunterzuladen.
Die folgende Strategie lädt eine einzelne Ressource, die mithilfe von Medienabfragen ausgewählt wird:
Implementierungen der MediaQueryList-Schnittstelle, die vom W3C definiert werden, ermöglichen es Ihnen, Media-Abfragen mithilfe von JavaScript auszuwerten. Sie können Logik auf die Medienabfrageergebnisse anwenden und Skripte ausführen, die für das aktive Fenster bestimmt sind:
Browser, die die MediaQueryList-Schnittstelle implementieren, unterstützen die Funktion window.matchMedia()
. Diese Funktion testet Medienabfragen anhand einer gegebenen Zeichenfolge. Die Funktion gibt ein MediaQueryList
-Objekt zurück, das Zugriff auf die Abfrageergebnisse bietet.
Für Browser, die die Schnittstelle nicht implementieren, können Sie eine matchMedia()
-Polyfill verwenden, z. B. matchMedia.js, eine frei verfügbare JavaScript-Bibliothek.
Das von W3C-vorgeschlagene Bildelement verwendet Medienabfragen, um die für Bildelemente zu verwendende Quelle zu ermitteln. Das Bildelement verwendet Elementattribute, um Medienpfade mit Bildpfaden zu verknüpfen.
Die frei verfügbare picturefill.js-Bibliothek bietet ähnliche Funktionen wie das vorgeschlagene picture
-Element und verwendet eine ähnliche Strategie. Die picturefill.js-Bibliothek ruft window.matchMedia
auf, um die Medienabfragen zu prüfen, die für einen Satz von div
-Elementen definiert sind. Alle div
-Elemente geben auch eine Bildquelle an. Die Quelle wird verwendet, wenn die Medienabfrage des div
-Elements true
zurückgibt.
Die picturefill.js
-Bibliothek erfordert HTML-Code, der dem folgenden Beispiel ähnelt:
<div data-picture>
<div data-src='path to default image'></div>
<div data-src='path to small image' data-media="(media query for phone)"></div>
<div data-src='path to medium image' data-media="(media query for tablet)"></div>
<div data-src='path to large image' data-media="(media query for monitor)"></div>
</div>
Beim Rendern der Seite fügt picturefull.js ein img
-Element als letztes untergeordnetes Element des <div data-picture>
-Elements ein:
<div data-picture>
<div data-src='path to default image'></div>
<div data-src='path to small image' data-media="(media query for phone)"></div>
<div data-src='path to medium image' data-media="(media query for tablet)"></div>
<div data-src='path to large image' data-media="(media query for monitor)"></div>
<img src="path to medium image">
</div>
Auf einer AEM Seite ist der Wert des Attributs data-src
der Pfad zu einer Ressource im Repository.
Sie müssen die erforderlichen JavaScript-Bibliotheken hinzufügen und auf Ihren Seiten das erforderliche HTML-Markup einfügen, um in einer AEM-Anwendung adaptive Bilder zu implementieren.
Bibliotheken
Beziehen Sie die folgenden JavaScript-Bibliotheken und fügen Sie sie in einen Client-Bibliotheksordner ein:
/etc/clientlibs/granite/jquery
(Kategorie = jquery)Tipp: Sie können mehrere Clientbibliotheksordner automatisch durch Einbetten verketten.
HTML
Erstellen Sie eine Komponente, die die erforderlichen div-Elemente generiert, die der picturefill.js-Code erwartet. Auf einer AEM Seite ist der Wert des data-src-Attributs der Pfad zu einer Ressource im Repository. Beispielsweise kann eine Seitenkomponente die Medienabfragen und die zugeordneten Pfade für Bilddarstellungen in DAM fest programmieren. Alternativ können Sie eine benutzerdefinierte Bildkomponente erstellen, die es Autoren ermöglicht, Bilddarstellungen auszuwählen oder Laufzeit-Render-Optionen anzugeben.
Im folgenden HTML-Codebeispiel wird aus 2 DAM-Darstellungen desselben Bilds ausgewählt.
<div data-picture>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png'></div>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png' data-media="(min-width: 769px)"></div>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.140.100.png' data-media="(min-width: 481px)"></div>
</div>
Die Foundation-Komponente „Adaptive Image“ implementiert adaptive Bilder:
/libs/foundation/components/adaptiveimage/clientlibs
/libs/foundation/components/adaptiveimage/adaptiveimage.jsp
Der folgende Abschnitt enthält Details zu dieser Komponente.
Sie müssen die standardmäßige AEM-Implementierung des Renderings für statische Bilder verstehen, um das Bild-Rendering anzupassen. AEM stellt die Bildkomponente und ein Bild-Render-Servlet zur Verfügung, die zusammenarbeiten, um Bilder für Webseiten zu rendern. Die folgende Reihenfolge von Ereignissen tritt auf, wenn die Bildkomponente im Absatzsystem der Seite enthalten ist:
Beispielsweise erzeugt das JSP der Bildkomponente das folgende HTML-Element:
<img title="My Image" alt="My Image" class="cq-dd-image" src="/content/mywebsite/en/_jcr_content/par/image_0.img.jpg/1358372073597.jpg?lang=de">
Wenn der Browser die Seite lädt, fordert er das Bild an und nutzt dazu den Wert des src-Attributs als URL. Sling zerlegt die URL:
/content/mywebsite/en/_jcr_content/par/image_0
.jpg
img
1358372073597.jpg
Der Knoten image_0
hat den Wert jcr:resourceType
von foundation/components/image
, der den Wert sling:resourceSuperType
von foundation/components/parbase
hat. Die parbase-Komponente umfasst das Skript img.GET.java, das mit dem Selektor und der Dateierweiterung der Anfrage-URL übereinstimmt. CQ verwendet dieses Skript (Servlet), um das Bild zu rendern.
Um den Quellcode des Skripts anzuzeigen, verwenden Sie CRXDE Lite, um das /libs/foundation/components/parbase/img.GET.java
-Datei an.
Skalieren Sie Bilder zur Laufzeit entsprechend den Eigenschaften des Client-Darstellungsfeldes, um Bilder zur Verfügung zu stellen, die den Prinzipien des responsiven Designs entsprechen. Verwenden Sie dasselbe Designmuster wie für das Rendering statischer Bilder und verwenden Sie ein Servlet und eine Bearbeitungskomponente.
Die Komponente muss die folgenden Aufgaben durchführen:
div
-Elemente, die Medienselektoren und Dienstaufrufe zum Rendern des Bildes enthalten.Der Webclient verwendet die JavaScript-Bibliotheken matchMedia und Picturefill (oder ähnliche Bibliotheken), um die Medienauswahl zu bewerten.
Das Servlet, das die Bildanforderung verarbeitet, muss die folgenden Aufgaben ausführen:
Verfügbare Lösungen
AEM installiert die folgenden Implementierungen, die Sie verwenden oder erweitern können.
Die Komponente "Adaptives Bild"generiert Aufrufe des Servlets für adaptive Bildkomponenten, um ein Bild zu rendern, dessen Größe dem Gerätebildschirm entspricht. Die Komponente enthält die folgenden Ressourcen:
cq:ClientLibraryFolder
, der die Javascript-Bibliothek matchMedia polyfill und eine geänderte Javascript-Bibliothek für Picturefill zusammenstellt.cq:editConfig
überschreibt die CQ-Stiftungsbildkomponente, sodass die Dropkomponente eine adaptive Bildkomponente anstelle einer Stiftungsbildkomponente erstellt.Das Skript „adaptive-image.jsp“ enthält den folgenden Code, der div-Elemente und Medienabfragen generiert:
<div data-picture data-alt='<%= alt %>'>
<div data-src='<%= path + ".img.320.low." + extension + suffix %>' data-media="(min-width: 1px)"></div> <%-- Small mobile --%>
<div data-src='<%= path + ".img.320.medium." + extension + suffix %>' data-media="(min-width: 320px)"></div> <%-- Portrait mobile --%>
<div data-src='<%= path + ".img.480.medium." + extension + suffix %>' data-media="(min-width: 321px)"></div> <%-- Landscape mobile --%>
<div data-src='<%= path + ".img.476.high." + extension + suffix %>' data-media="(min-width: 481px)"></div> <%-- Portrait iPad --%>
<div data-src='<%= path + ".img.620.high." + extension + suffix %>' data-media="(min-width: 769px)"></div> <%-- Landscape iPad --%>
<div data-src='<%= path + ".img.full.high." + extension + suffix %>' data-media="(min-width: 1025px)"></div> <%-- Desktop --%>
<%-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --%>
<noscript>
<img src='<%= path + ".img.320.low." + extension + suffix %>' alt='<%= alt %>'>
</noscript>
</div>
die Variable path
enthält den Pfad der aktuellen Ressource (der Komponentenknoten für adaptive Bilder). Der Code generiert eine Reihe von div
-Elementen mit der folgenden Struktur:
<div data-scr = "*path-to-parent-node*.adaptive-image.adapt.*width*.*quality*.jpg" data-media="*media query*"></div>
Der Wert des Attributs data-scr
ist eine URL, die Sling auflöst, um „Adaptive Image Component Servlet“ zu erhalten, das das Bild rendert. Das Datenmedienattribut umfasst die Medienabfrage, die anhand der Client-Eigenschaften geprüft wird.
Der folgende HTML-Code ist ein Beispiel für die div
-Elemente, die von JSP generiert werden:
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.low.jpg'></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.medium.jpg' data-media="(min-width: 320px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.480.medium.jpg' data-media="(min-width: 321px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.476.high.jpg' data-media="(min-width: 481px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.620.high.jpg' data-media="(min-width: 769px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.full.high.jpg' data-media="(min-width: 1025px)"></div>
Falls Sie die adaptive Bildkomponente anpassen und die Breitenselektoren ändern, müssen Sie auch „Adaptive Image Component Servlet“ so konfigurieren, dass es die Breiten unterstützt.
„Adaptive Component Servlet“ ändert die Größe eines JPEG-Bilds in eine gegebene Breite und legt die JPEG-Qualität fest.
„Adaptive Image Component Servlet“ ist an das standardmäßige Sling-Servlet gebunden und unterstützt die Dateiformate JPG, JPEG, GIF und PNG. Der Servlet-Selektor ist img.
Animierte GIF-Dateien werden in AEM für adaptive Darstellungen nicht unterstützt.
Deshalb löst Sling HTTP-Anforderungs-URLs im folgenden Format in dieses Servlet auf:
*path-to-node*.img.*extension*
Beispiel: Sling leitet HTTP-Anforderungen mit der URL http://localhost:4502/content/geometrixx/adaptiveImage.img.jpg
an das Servlet Adaptive Image Component weiter.
Zwei weitere Selektoren definieren die angeforderte Bildbreite und JPEG-Qualität. Im folgenden Beispiel wird ein Bild mit einer Breite von 480 Pixel und von mittlerer Qualität angefordert:
http://localhost:4502/content/geometrixx/adaptiveImage.adapt.480.MEDIUM.jpg
Unterstützte Bildeigenschaften
Das Servlet akzeptiert eine begrenzte Anzahl von Bildbreiten und -qualitäten. Die folgenden Breiten werden standardmäßig unterstützt (in Pixel):
Der Wert „vollständig“ bedeutet, dass keine Skalierung vorgenommen wird.
Die folgenden Werte für die JPEG-Qualität werden unterstützt:
Sie entsprechen jeweils den numerischen Werten 0,4, 0,82 und 1,0.
Standardmäßige unterstützte Breiten ändern
Konfigurieren Sie die unterstützten Breiten von „Adobe CQ Adaptive Image Component Servlet“ anhand der Web-Konsole (http://localhost:4502/system/console/configMgr) oder eines sling:OsgiConfig-Knotens.
Weitere Informationen dazu, wie Sie AEM-Dienste konfigurieren, finden Sie unter Konfigurieren von OSGi.
Web-Konsole | sling:OsgiConfig | |
---|---|---|
Dienst- oder Knotenname | Der Dienstname auf der Registerkarte "Konfiguration"ist Adobe CQ Adaptive Image Component Servlet | com.day.cq.wcm.foundation.impl. AdaptiveImageComponentServlet |
Property | Unterstützte Breiten
|
adapt.supported.widths
|
Die com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet
-Klasse erweitert die Klasse AbstractImageServlet. Der Quellcode von AdaptiveImageComponentServlet befindet sich im Ordner /libs/foundation/src/impl/src/com/day/cq/wcm/foundation/impl
.
Die Klasse verwendet Felix SCR-Benachrichtigungen zum Konfigurieren des Ressourcentyps und der Dateierweiterung, die dem Servlet zugeordnet werden, und des Namens des ersten Selektors.
@Component(metatype = true, label = "Adobe CQ Adaptive Image Component Servlet",
description = "Render adaptive images in a variety of qualities")
@Service
@Properties(value = {
@Property(name = "sling.servlet.resourceTypes", value = "foundation/components/adaptiveimage", propertyPrivate = true),
@Property(name = "sling.servlet.selectors", value = "img", propertyPrivate = true),
@Property(name = "sling.servlet.extensions", value ={
"jpg",
"jpeg",
"png",
"gif"
}, propertyPrivate = true)
})
Das Servlet verwendet die Property-SCR-Anmerkung zum Festlegen der standardmäßig unterstützten Bildqualitäten und -abmessungen.
@Property(value = {
"320", // iPhone portrait
"480", // iPhone landscape
"476", // iPad portrait
"620" // iPad landscape
},
label = "Supported Widths",
description = "List of widths this component is permitted to generate.")
Die AbstractImageServlet
-Klasse stellt die doGet
-Methode bereit, die die HTTP-Anforderung verarbeitet. Diese Methode bestimmt die Ressource, die der Anforderung zugeordnet ist, ruft die Ressourceneigenschaften aus dem Repository ab und gibt sie in einem ImageContext-Objekt zurück.
Die Klasse com.day.cq.commons.DownloadResource stellt die Klasse getFileReference method
bereit, die den Wert der Eigenschaft fileReference
der Ressource abruft.
Die AdaptiveImageComponentServlet
-Klasse überschreibt die createLayer
-Methode. Die Methode ruft den Pfad der Bildressource und die angeforderte Bildbreite vom ImageContext
-Objekt ab. Dann ruft Sie die Methoden der Klasse info.geometrixx.commons.impl.AdaptiveImageHelper
auf, die die tatsächliche Bildskalierung durchführen.
Die Klasse AdaptiveImageComponentServlet überschreibt auch die Methode writeLayer. Diese Methode wendet die JPEG-Qualität auf das Bild an.
Das beispielhafte „Image Reference Modification Servlet“ generiert Größenattribute für das img-Element zum Skalieren eines Bilds auf der Webseite.
Das Servlet ist an cq:page
-Ressourcen gebunden und unterstützt das Dateiformat JPG. Der Servlet-Selektor ist image
. Deshalb löst Sling HTTP-Anforderungs-URLs im folgenden Format in dieses Servlet auf:
path-to-page-node.image.jpg
Beispiel: Sling leitet HTTP-Anforderungen mit der URL http://localhost:4502/content/geometrixx/en.image.jpg
an das Image Reference Modification Servlet weiter.
Drei weitere Selektoren definieren die angeforderte Bildbreite, -höhe und (optional) -qualität. Im folgenden Beispiel wird ein Bild mit einer Breite von 770 Pixel, einer Höhe von 360 Pixel und von mittlerer Qualität angefordert.
http://localhost:4502/content/geometrixx/en.image.770.360.MEDIUM.jpg
Unterstützte Bildeigenschaften
Das Servlet akzeptiert eine begrenzte Anzahl von Bildabmessungen und Qualitätswerten.
Die folgenden Werte werden standardmäßig unterstützt (Breite x Höhe):
Die folgenden Werte für die Bildqualität werden unterstützt:
Bei AEM können Sie die Konfigurationseinstellungen für Dienste dieser Art auf unterschiedliche Weise vornehmen. Ausführliche Details finden Sie unter Konfigurieren von OSGi.
Der Bildpfad, die Abmessungen und die Qualitätswerte müssen als Eigenschaften eines Knotens im Repository gespeichert werden:
Der Knotenname ist image
.
Der übergeordnete Knoten ist der jcr:content
-Knoten einer cq:page
-Ressource.
Der Bildpfad wird als Wert einer Eigenschaft mit der Bezeichnung fileReference
gespeichert.
Verwenden Sie beim Erstellen einer Seite Sidekick, um das Bild anzugeben und den Knoten image
den Seiteneigenschaften hinzuzufügen:
Die Klasse info.geometrixx.commons.impl.servlets.ImageReferenceModificationServlet erweitert die Klasse AbstractImageServlet. Wenn das cq-geometrixx-commons-pkg-Paket installiert ist, befindet sich der Quellcode von ImageReferenceModificationServlet im Ordner /apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/commons/impl/servlets
.
Die Klasse verwendet Felix SCR-Benachrichtigungen zum Konfigurieren des Ressourcentyps und der Dateierweiterung, die dem Servlet zugeordnet werden, und des Namens des ersten Selektors.
@Component(metatype = true, label = "Adobe CQ Image Reference Modification Servlet",
description = "Render the image associated with a page in a variety of dimensions and qualities")
@Service
@Properties(value = {
@Property(name = "sling.servlet.resourceTypes", value = NameConstants.NT_PAGE, propertyPrivate = true),
@Property(name = "sling.servlet.selectors", value = "image", propertyPrivate = true),
@Property(name = "sling.servlet.extensions", value = "jpg", propertyPrivate = true)
})
Das Servlet verwendet die Property-SCR-Anmerkung zum Festlegen der standardmäßig unterstützten Bildqualitäten und -abmessungen.
@Property(label = "Image Quality",
description = "Quality must be a double between 0.0 and 1.0", value = "0.82")
@Property(value = {
"256x192", // Category page article list images
"370x150", // "Most popular" desktop & iPad & carousel min-width: 1px
"480x200", // "Most popular" phone
"127x127", // article summary phone square images
"770x360", // article summary, desktop
"620x290", // article summary, tablet
"480x225", // article summary, phone (landscape)
"320x150", // article summary, phone (portrait) and fallback
"375x175", // 2-column article summary, desktop
"303x142", // 2-column article summary, tablet
"1170x400", // carousel, full
"940x340", // carousel min-width: 980px
"770x300", // carousel min-width: 768px
"480x190" // carousel min-width: 480px
},
label = "Supported Resolutions",
description = "List of resolutions this component is permitted to generate.")
Die AbstractImageServlet
-Klasse stellt die doGet
-Methode bereit, die die HTTP-Anforderung verarbeitet. Diese Methode bestimmt die Ressource, die mit dem Aufruf verknüpft ist, ruft Ressourceneigenschaften aus dem Repository ab und speichert sie in einem ImageContext-Objekt.
Die ImageReferenceModificationServlet
-Klasse überschreibt die createLayer
-Methode und implementiert die Logik, die die zu rendernde Bildressource bestimmt. Die Methode ruft einen untergeordneten Knoten des jcr:content
-Knotens der Seite mit dem Namen image
ab. Ein Image-Objekt wird von diesem image
-Knoten erstellt und die getFileReference
-Methode gibt den Pfad zur Bilddatei aus der fileReference
-Eigenschaft des Image-Knotens zurück.
Die Klasse com.day.cq.commons.DownloadResource stellt die Methode getFileReferences bereit.
AEM ermöglicht Ihnen die effiziente und effektive Implementierung fließender Raster. Auf dieser Seite wird erläutert, wie Sie Ihr fließendes Raster oder eine vorhandene Rasterimplementierung (z. B. Bootstrap) in Ihre AEM integrieren können.
Im Abschnitt Einführung zu fließenden Rastern unten auf dieser Seite finden Sie nähere Informationen zu fließenden Rastern. Diese Einführung bietet einen Überblick über fließende Raster und Anleitungen für ihren Entwurf.
Verwenden Sie Seitenkomponenten, um die HTML-Elemente zu erzeugen, die die Inhaltsblöcke der Seite definieren. Der ClientLibraryFolder, auf den die Seite verweist, stellt das CSS zur Verfügung, das das Layout der Inhaltsblöcke steuert:
Beispielsweise enthält die beispielhafte Anwendung „geometrixx-media“ die Komponente „media-home“. Diese Seitenkomponente fügt zwei Skripte hinzu, die zwei div
-Elemente der Klasse row-fluid
generieren:
Die erste Zeile enthält ein div
-Element der Klasse span12
(der Inhalt umfasst 12 Spalten). Das div
-Element enthält die parsys-Komponente.
Die zweite Zeile enthält zwei div
-Elemente, eines der Klassen span8
und das andere der Klasse span4
. Jedes div
-Element enthält die parsys-Komponente.
<div class="page-content">
<div class="row-fluid">
<div class="span12">
<cq:include path="grid-12-par" resourceType="foundation/components/parsys" />
</div>
</div>
<div class="row-fluid">
<div class="span8">
<cq:include path="grid-8-par" resourceType="foundation/components/parsys" />
</div>
<div class="span4">
<cq:include path="grid-4-par" resourceType="foundation/components/parsys" />
</div>
</div>
</div>
Wenn eine Komponente mehrere cq:include
-Elemente enthält, die auf die parsys-Komponente verweisen, muss jedes path
-Attribut einen anderen Wert haben.
Der mit der geometrixx-media-Seitenkomponente (/etc/designs/geometrixx-media
) verknüpfte Entwurf enthält den clientlibs
ClientLibraryFolder. Dieser ClientLibraryFolder definiert CSS-Stile für row-fluid
-Klassen, span*
-Klassen und span*
-Klassen, die untergeordnete Elemente von row-fluid
-Klassen sind. Medienabfragen ermöglichen die Neudefinition von Styles für verschiedene Darstellungsfeldgrößen.
Das folgende Beispiel-CSS ist eine Untergruppe dieser Styles. Diese Untergruppe konzentriert sich auf die Klassen span12
, span8
und span4
und die Medien-Abfragen für zwei Viewport-Größen. Beachten Sie die folgenden Eigenschaften des CSS:
.span
-Stile definieren Elementbreiten mit absoluten Zahlen..row-fluid .span*
-Stile definieren Elementbreiten als Prozentwerte des übergeordneten Elements. Prozentsätze werden anhand der absoluten Breiten berechnet.Das Geometrixx Media-Beispiel integriert das Bootstrap-JavaScript-Framework in seine Implementierung fließender Raster. Das Bootstrap-Framework stellt die Datei "bootstrap.css"bereit.
/* default styles (no media queries) */
.span12 { width: 940px }
.span8 { width: 620px }
.span4 { width: 300px }
.row-fluid .span12 { width: 100% }
.row-fluid .span8 { width: 65.95744680851064% }
.row-fluid .span4 { width: 31.914893617021278% }
@media (min-width: 768px) and (max-width: 979px) {
.span12 { width: 724px; }
.span8 { width: 476px; }
.span4 { width: 228px; }
.row-fluid .span12 { width: 100%;}
.row-fluid .span8 { width: 65.74585635359117%; }
.row-fluid .span4 { width: 31.491712707182323%; }
}
@media (min-width: 1200px) {
.span12 { width: 1170px }
.span8 { width: 770px }
.span4 { width: 370px }
.row-fluid .span12 { width: 100% }
.row-fluid .span8 { width: 65.81196581196582% }
.row-fluid .span4 { width: 31.623931623931625% }
}
Die Seiten der beispielhaften Geometrixx Media-Anwendung verteilen Zeilen von Inhaltsblöcken horizontal in breiten Darstellungsfeldern. In kleineren Darstellungsfeldern werden dieselben Blöcke vertikal verteilt. Das folgende Beispiel-CSS zeigt die Dateitypen, die dieses Verhalten für den HTML-Code implementieren, den die Seitenkomponente „media-home“ generiert:
Die Standard-CSS für die Media-Begrüßungsseite weist den float:left
-Stil für span*
-Klassen zu, die sich in row-fluid
-Klassen befinden.
Media-Abfragen für kleinere Viewports weisen den float:none
-Stil für dieselben Klassen zu.
/* default styles (no media queries) */
.row-fluid [class*="span"] {
width: 100%;
float: left;
}
@media (max-width: 767px) {
[class*="span"], .row-fluid [class*="span"] {
float: none;
width: 100%;
}
}
Modularisieren Sie Ihre Komponenten, um die Nutzung Ihres Codes effizienter zu machen. Ihre Website verwendet wahrscheinlich verschiedene Seitentypen, z. B. eine Willkommensseite, eine Artikelseite oder eine Produktseite. Jeder Seitentyp enthält verschiedene Inhaltstypen und verwendet wahrscheinlich ein anderes Layout. Wenn jedoch bestimmte Elemente der einzelnen Layouts auf mehreren Seiten verwendet werden, können Sie den Code wiederverwenden, der diesen Teil des Layouts implementiert.
Seitenkomponentenüberlagerungen verwenden
Erstellen Sie eine Hauptseitenkomponente, die Skripten zum Generieren der verschiedenen Teile einer Seite bereitstellt, z. B. die Abschnitte head
und body
sowie header
, content
und footer
.
Erstellen Sie andere Seitenkomponenten, die die Hauptseitenkomponente als cq:resourceSuperType
verwenden. Diese Komponenten umfassen Skripte, die die Skripte der Hauptseite je nach Bedarf überschreiben.
Beispielsweise umfasst die Anwendung „geometrixx-media“ die Seitenkomponente (der sling:resourceSuperType
ist die Foundation-Seitenkomponente). Einige untergeordnete Komponenten (z. B. „article“, „category“ und „media-home“) verwenden diese Seitenkomponente als sling:resourceSuperType
. Jede untergeordnete Komponente beinhaltet eine Datei „content.jsp“, die die content.jsp-Datei der Seitenkomponente überschreibt.
Skripte wiederverwenden
Erstellen Sie mehrere JSP-Skripte, die Zeilen- und Spaltenkombinationen generieren, die verschiedene Seitenkomponenten gemeinsam haben. Beispielsweise verweisen das Skript content.jsp
der Artikel- und die Media-Home-Komponenten beide auf das Skript 8x4col.jsp
.
CSS-Styles nach Darstellungsfeldgröße organisieren
Platzieren Sie CSS-Styles und Medienabfragen für verschiedene Darstellungsfeldgrößen in verschiedenen Dateien. Verwenden Sie Client-Bibliotheksordner, um sie zu verketten.
Wenn Komponenten einen einzelnen Inhaltsblock erstellen, steuert im Allgemeinen das Raster, das von der Seitenkomponente erstellt wird, die Platzierung des Inhalts.
Autoren müssen sich darüber im Klaren sein, dass die Inhaltsblöcke in verschiedenen Größen und relativen Positionen gerendert werden können. Inhaltstext darf keine relativen Verweise auf andere Inhaltsblöcke enthalten.
Bei Bedarf muss die Komponente jegliche CSS- oder JavaScript-Bibliotheken zur Verfügung stellen, die für den von ihr generierten HTML-Code erforderlich sind. Verwenden Sie einen Client-Bibliotheksordner innerhalb der Komponente, um die CSS- und JS-Dateien zu generieren. Zum Anzeigen der Dateien erstellen Sie eine Abhängigkeit oder betten Sie die Bibliothek in einem anderen Client-Bibliotheksordner unterhalb des /etc-Ordners ein.
Unterraster
Falls die Komponente mehrere Inhaltsblöcke enthält, fügen Sie die Inhaltsblöcke innerhalb einer Zeile hinzu, um ein Unterraster auf der Seite zu erstellen:
Beispielsweise generiert die Komponente /apps/geometrixx-media/components/2-col-article-summary
zwei Inhaltsspalten. Der HTML-Code, den sie generiert, weist die folgende Struktur auf:
<div class="row-fluid mutli-col-article-summary">
<div class="span6">
<article>
<div class="article-summary-image">...</div>
<div class="social-header">...</div>
<div class="article-summary-description">...</div>
<div class="social">...</div>
</article>
</div>
</div>
Die .row-fluid .span6
-Selektoren der CSS der Seite gelten für die div
-Elemente derselben Klasse und Struktur in diesem HTML. Die Komponente enthält jedoch auch den Clientbibliothekordner /apps/geometrixx-media/components/2-col-article-summary/clientlibs:
multi-col-article-summary
des div
-Elements der Zeile, um das Verhalten der Klasse row-fluid
der Seite zu überschreiben.Beispielsweise sind die folgenden Stile in der Datei /apps/geometrixx-media/components/2-col-article-summary/clientlibs/css/responsive-480px.css
enthalten:
@media (max-width: 480px) {
.mutli-col-article-summary .article-summary-image {
float: left;
width: 127px;
}
.mutli-col-article-summary .article-summary-description {
width: auto;
margin-left: 127px;
}
.mutli-col-article-summary .article-summary-description h4 {
padding-left: 10px;
}
.mutli-col-article-summary .article-summary-text {
margin-left: 127px;
min-height: 122px;
top: 0;
}
}
Fließende Raster ermöglichen es Seitenlayouts, die Abmessungen des Client-Darstellungsfelds anzupassen. Raster bestehen aus logischen Spalten und Zeilen, die die Inhaltsblöcke auf der Seite platzieren.
Anhand von HTML5-Technologie können Sie das Raster implementieren und so bearbeiten, dass es Seitenlayouts an verschiedene Darstellungsfeldgrößen anpasst:
div
-Elemente enthalten Inhaltsblöcke, die eine bestimmte Anzahl von Spalten umfassen.Verwenden Sie für jeden Bereich von Darstellungsfeldbreiten eine statische Seitenbreite und Inhaltsblöcke mit einer konstanten Breite. Bei der manuellen Änderung der Größe eines Browserfensters treten Änderungen an der Inhaltsgröße bei bestimmten Fensterbreiten auf, die auch als Haltepunkte bezeichnet werden. So werden Seitendesigns besser eingehalten, wodurch das Anwendererlebnis verbessert wird.
Verwenden Sie Raster zum Skalieren von Inhaltsblöcken, um sie an verschiedene Darstellungsfeldgrößen anzupassen. Inhaltsblöcke erstrecken sich über eine bestimmte Anzahl von Spalten. Wenn Spalten breiter oder schmaler werden, um sich verschiedenen Darstellungsfeldgrößen anzupassen, werden Inhaltsblöcke ebenso entsprechend breiter oder schmaler. Skalierung kann sowohl große als auch mittelgroße Darstellungsfelder unterstützen, die breit genug sind, um Inhaltsblöcke nebeneinander zu platzieren.
Die Größe der Inhaltsblöcke kann durch eine Mindestbreite beschränkt werden, bei deren Überschreitung die Skalierung nicht mehr wirksam ist. Bei kleineren Darstellungsfeldern kann das Raster verwendet werden, um Inhaltsblöcke vertikal statt horizontal zu verteilen.
Bestimmen Sie die Spalten und Zeilen, die Sie benötigen, um die Inhaltsblöcke auf Ihren Seiten zu positionieren. Ihre Seitenlayouts bestimmen die Anzahl der Spalten und Zeilen, die sich über das Raster erstrecken.
Anzahl der Spalten
Verwenden Sie ausreichend Spalten, um die Inhaltsblöcke in all Ihren Layouts für alle Darstellungsfeldgrößen horizontal zu positionieren. Sie sollten zur Unterstützung zukünftiger Seitendesigns mehr Spalten verwenden, als derzeit benötigt werden.
Zeileninhalte
Verwenden Sie Zeilen, um die vertikale Positionierung der Inhaltsblöcke zu steuern. Bestimmen Sie die Inhaltsblöcke, die sich in derselben Zeile befinden:
Erstellen Sie CSS-Klassen und Styles zum Steuern des Layouts der Inhaltsblöcke auf einer Seite. Seitendesigns basieren häufig auf der relativen Größe und Position von Inhaltsblöcken im Darstellungsfeld. Das Darstellungsfeld bestimmt die tatsächliche Größe der Inhaltsblöcke. Ihr CSS muss relative und absolute Größen berücksichtigen. Sie können ein fließendes Raster mit drei Arten von CSS-Klassen implementieren:
div
-Element, das ein Container für alle Zeilen ist. Diese Klasse legt die absolute Breite des Rasters fest.div
-Elemente, die eine Zeile darstellen. Diese Klasse steuert die horizontale bzw. vertikale Positionierung der Inhaltsblöcke, die sie umfasst.div
-Elemente, die Inhaltsblöcke mit verschiedenen Breiten darstellen. Breiten werden als Prozentsatz des übergeordneten Elements (also der Zeile) ausgedrückt.Zieldarstellungsfeldbreiten (und ihre zugehörigen Medienabfragen) markieren Breiten, die für ein Seitenlayout verwendet werden.
Im Allgemeinen basiert der width
-Style von Inhaltsblockklassen auf den folgenden Eigenschaften Ihrer Seite und Ihres Rasters:
Das CSS umfasst eine Reihe von Medienabfragen, die die folgende Struktur verwenden:
@media(query_for_targeted_viewport){
.class_for_container{ width:absolute_page_width }
.class_for_row { width:100%}
/* several selectors for content blocks */
.class_for_content_block1 { width:absolute_block_width1 }
.class_for_content_block2 { width:absolute_block_width2 }
...
/* several selectors for content blocks inside rows */
.class_for_row .class_for_content_block1 { width:relative_block_width1 }
.class_for_row .class_for_content_block2 { width:relative_block_width2 }
...
}
Verwenden Sie den folgenden Algorithmus als Ausgangspunkt für die Entwicklung der Elementklassen und CSS-Styles für Ihre Seiten.
Definieren Sie einen Klassennamen für das div-Element, das alle Zeilen enthält, z. B. content.
.
Definieren Sie eine CSS-Klasse für div-Elemente, die Zeilen darstellen, z. B. row-fluid
.
Definieren Sie Klassennamen für Inhaltsblockelemente. Eine Klasse wird für alle möglichen Breiten benötigt, was Spaltenbereiche angeht. Verwenden Sie beispielsweise die Klasse span3
für div
-Elemente, die sich über drei Spalten erstrecken und span4
-Klassen für Bereiche von vier Spalten. Definieren Sie so viele Klassen, wie Spalten in Ihrem Raster vorhanden sind.
Fügen Sie der CSS-Datei für jede Zieldarstellungsfeldgröße die entsprechende Medienabfrage hinzu. Fügen Sie jeder Medienabfrage die folgenden Elemente hinzu:
content
, z. B. .content{}
..span3{ }
.row-fluid
, z. B. .row-fluid{ }
.row-fluid span3 { }
.Fügen Sie jedem Selektor width-Styles hinzu:
content
-Selektoren die absolute Größe der Seite fest, z. B. width:480px
.(absolute width of page)/(number of columns)
..row-fluid .span
-Selektoren als Prozentsatz der Gesamtbreite fest. Berechnen Sie diese Breite mit der Formel (absolute span width)/(absolute page width)*100
.Verwenden Sie den Fließstil der .row-fluid
-Klasse, um zu steuern, ob die Inhaltsblöcke in einer Zeile horizontal oder vertikal angeordnet sind.
Der Stil float:left
oder float:right
verursacht die horizontale Verteilung von untergeordneten Elementen (Inhaltsblöcken).
Der Stil float:none
verursacht die vertikale Verteilung der untergeordneten Elemente.
hinzufügen Sie den Stil in die .row-fluid
-Auswahl in jeder Mediendatei ein. Legen Sie den Wert entsprechend dem Seitenlayout fest, das Sie für die Medienabfrage verwenden. Beispielsweise zeigt das folgende Diagramm eine Zeile, die Inhalte für breite Darstellungsfelder horizontal und für schmale Darstellungsfelder vertikal verteilt.
Das folgende CSS könnte dieses Verhalten implementieren:
@media (min-width: 768px) and (max-width: 979px) {
.row-fluid {
width:100%;
float:left
}
}
@media (max-width:480px){
.row-fluid {
width:100%;
float:none
}
}
Legen Sie für das Seitenlayout der verschiedenen Darstellungsfeldgrößen die Anzahl der Spalten fest, über die sich die Inhaltsblöcke erstrecken. Dann legen Sie fest, welche Klasse für die div-Elemente dieser Inhaltsblöcke verwendet werden soll.
Wenn Sie die div-Klassen erstellt haben, können Sie das Raster mithilfe Ihrer AEM-Anwendung implementieren.