Responsives Design für Web-Seiten responsive-design-for-web-pages

Gestalten Sie Ihre Seiten 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 Abbildung zeigt einige Möglichkeiten, wie eine Seite auf Größenänderungen des Darstellungsfelds reagieren kann:

Entwickeln Sie Adobe Experience Manager(AEM)-Anwendungen, die HTML5-Seiten generieren, welche sich an verschiedene Fenstergrößen und Ausrichtungen anpassen. Beispielsweise entsprechen die folgenden Breiten von Darstellungsfeldern verschiedenen Gerätetypen und -ausrichtungen.

Weitere Informationen finden Sie unter den folgenden Themen zur Implementierung von responsivem Design:

Nutzen Sie beim Design den Sidekick, um eine Vorschau Ihrer Seiten in verschiedenen Bildschirmgrößen anzuzeigen.

Vor der Entwicklung before-you-develop

Vor der Entwicklung einer AEM-Anwendung, die Ihre Web-Seiten unterstützt, sollten Sie einige Design-Entscheidungen treffen. Sie müssen beispielsweise über die folgenden Informationen verfügen:

Programmstruktur application-structure

Die typische AEM-Programmstruktur unterstützt alle Implementierungen responsiven Designs:

Verwenden von Medienabfragen using-media-queries

Medienabfragen ermöglichen die selektive Verwendung von CSS-Stilen für das Rendern von Seiten. AEM-Entwicklungs-Tools und -funktionen ermöglichen Ihnen die effektive und effiziente Implementierung von Medienabfragen in Programmen.

Die W3C-Gruppe stellt die Medienabfragen-Empfehlung zur Verfügung, die diese CSS3-Funktion und die Syntax beschreibt.

Erstellen der CSS-Datei creating-the-css-file

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 We.Retail-Beispiel „Media“ verwendet diese Strategie zur Definition von Stilen 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.

Die Datei „css.txt“ im Ordner /etc/designs/weretail/clientlibs führt die CSS-Dateien auf, die der Client-Bibliotheksordner enthält. Die Reihenfolge der Dateien gibt die Priorität der Stile vor. Je kleiner das Gerät, desto spezifischer sind die Stile.

#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: Anhand aussagekräftiger Namen können Sie die jeweilige Darstellungsfeldgröße leicht identifizieren.

Verwenden von Medienabfragen bei AEM-Seiten using-media-queries-with-aem-pages

Schließen Sie den Client-Bibliotheksordner in das JSP-Skript Ihrer Seitenkomponente ein. Dies hilft bei der Erstellung der CSS-Datei, die die Medienabfragen enthält und auf die Datei verweist.

<ui:includeClientLib categories="apps.weretail.all"/>

Das JSP-Skript generiert den folgenden HTML-Code, der auf die Stylesheets verweist:

<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css" type="text/css">
<link href="/etc/designs/weretail.css" rel="stylesheet" type="text/css">

Anzeigen der Vorschau für bestimmte Geräte previewing-for-specific-devices

Sie haben die Möglichkeit, eine Vorschau Ihrer Seiten in Darstellungsfeldern verschiedener Größen anzuzeigen, um das Verhalten Ihres responsiven Designs zu testen. Im Vorschaumodus umfasst der Sidekick zur Auswahl von Geräten ein Dropdown-Menü Geräte. Wenn Sie ein Gerät auswählen, passt sich die Seite der jeweiligen Darstellungsfeldgröße an.

Zur Aktivierung der Gerätevorschau im Sidekick müssen Sie die Seite und den Service MobileEmulatorProvider konfigurieren. Eine andere Seitenkonfiguration kontrolliert die Liste von Geräten, die in der Liste Geräte angezeigt wird.

Hinzufügen der Liste „Geräte“ adding-the-devices-list

Die Liste Geräte wird im Sidekick angezeigt, wenn Ihre Seite das JSP-Skript enthält, das die Liste Geräte rendert. Fügen Sie das Skript /libs/wcm/mobile/components/simulator/simulator.jsp dem Abschnitt head Ihrer Seite hinzu, um im Sidekick die Liste Geräte hinzuzufügen.

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"/>

Öffnen Sie die Datei /apps/weretail/components/page/head.jsp in CRXDE Lite, um ein Beispiel zu sehen.

Registrieren von Seitenkomponenten für die Simulation registering-page-components-for-simulation

Registrieren Sie Ihre Seitenkomponenten beim Factory-Service „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 Services auf unterschiedliche Weise vornehmen. Umfassende Informationen finden Sie unter Konfigurieren von OSGi.

Erstellen Sie beispielsweise einen Knoten [sling:OsgiConfig](/docs/experience-manager-65/content/implementing/deploying/configuring/configuring-osgi.md#adding-a-new-configuration-to-the-repository) in Ihrem Programm:

Fügen Sie folgende Knoteneigenschaft hinzu:

Angeben der Gerätegruppen specifying-the-device-groups

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ätegruppenknoten.

Gerätegruppenknoten befinden sich im Ordner /etc/mobile/groups.

Beispielsweise ist die Stammseite der Geometrixx Media-Website /content/geometrixx-media. Der Knoten /content/geometrixx-media/jcr:content umfasst die folgende Eigenschaft:

Verwenden Sie die Konsole „Tools“, um Gerätegruppen zu erstellen und zu bearbeiten.

Verwenden adaptiver Bilder using-adaptive-images

Sie können Medienabfragen verwenden, um eine Bildressource auszuwählen, die auf der Seite angezeigt werden soll. Jede Ressource, die eine Medienabfrage verwendet, um ihre Verwendung an Bedingungen zu knüpfen, wird jedoch zum Client heruntergeladen. Die Medienabfrage bestimmt lediglich, ob die heruntergeladene Ressource angezeigt wird.

Bei großen Ressourcen wie Bildern stellt das Herunterladen aller Ressourcen keine effiziente Nutzung der Datenpipeline des Clients dar. Verwenden Sie JavaScript, um die Ressourcenanforderung zu initiieren, nachdem die Medienabfragen die Auswahl durchgeführt haben. Auf diese Weise können Sie Ressourcen selektiv herunterladen.

Die folgende Strategie lädt eine einzelne Ressource, die mithilfe von Medienabfragen ausgewählt wird:

Bewerten von Medienabfragen mithilfe von JavaScript evaluating-media-queries-using-javascript

Implementierungen der von W3C definierten MediaQueryList-Benutzeroberfläche ermöglichen Ihnen die Bewertung von Medienabfragen mithilfe von JavaScript. Sie können Logik auf die Medienabfrageergebnisse anwenden und Skripte ausführen, die für das aktive Fenster bestimmt sind:

Auswählen von medienspezifischen Ressourcen selecting-media-specific-resources

Das W3C-Bildelement verwendet Medienabfragen, um die für Bildelemente zu verwendende Quelle zu ermitteln. Das Bildelement verwendet Elementattribute, um Medienabfragen mit Bildpfaden zu verknüpfen.

Die frei verfügbare Bibliothek picturefill.js bietet ähnliche Funktionen wie das vorgeschlagene picture-Element und nutzt eine ähnliche Strategie. Die Bibliothek „picturefill.js“ ruft window.matchMedia auf, um die Medienabfragen zu prüfen, die für einen Satz von div-Elementen definiert ist. Alle div-Elemente geben auch eine Bildquelle an. Die Quelle wird verwendet, wenn die Medienabfrage des div-Elements true zurückgibt.

Die Bibliothek picturefill.js erfordert HTML-Code, der dem folgenden Beispiel ähnlich ist:

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

Wenn die Seite gerendert wird, fügt „picturefull.js“ ein img-Element als letztes untergeordnetes Element des Elements <div data-picture> 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.

Implementieren von adaptiven Bildern in AEM implementing-adaptive-images-in-aem

Um adaptive Bilder in Ihre AEM-Anwendung zu implementieren, müssen Sie die erforderlichen JavaScript-Bibliotheken hinzufügen und das erforderliche HTML-Markup auf Ihren Seiten einfügen.

Bibliotheken

Rufen Sie die folgenden JavaScript-Bibliotheken ab und schließen Sie sie in einen Client-Bibliotheksordner ein:

Tipp: Durch Einbettung können Sie automatisch mehrere Client-Bibliotheksordner zusammenfassen.

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 Attributs „data-src“ 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-Beispiel werden zwei DAM-Ausgabedarstellungen desselben Bildes 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>

Grundlegendes zum Bild-Rendering in AEM understanding-image-rendering-in-aem

Um das Bild-Rendering anzupassen, sollten Sie die standardmäßige AEM-Implementierung des statischen Bild-Renderings kennen. AEM stellt die Bildkomponente und ein Bild-Rendering-Servlet bereit, die zusammenarbeiten, um Bilder für Web-Seiten zu rendern. Die folgende Ereignissequenz tritt auf, wenn die Bildkomponente in das Absatzsystem der Seite eingefügt wird:

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">

Wenn der Browser die Seite lädt, fordert er das Bild mit dem Wert des src-Attributs als URL an. Sling dekomprimiert die URL:

Der Knoten image_0 hat einen jcr:resourceType-Wert von foundation/components/image, der einen sling:resourceSuperType-Wert von foundation/components/parbase hat. Die Komponente „parbase“ enthält das Skript „img.GET.java“, das dem Selektor und der Dateinamenerweiterung der Anfrage-URL entspricht. CQ verwendet dieses Skript (Servlet) zum Rendern des Bildes.

Öffnen Sie mit CRXDE Lite die Datei /libs/foundation/components/parbase/img.GET.java, um den Quell-Code des Skripts zu anzuzeigen.

Skalieren von Bildern für die aktuelle Darstellungsfeldgröße scaling-images-for-the-current-viewport-size

Skalieren Sie Bilder zur Laufzeit entsprechend den Eigenschaften des Client-Darstellungsfelds, um Bilder bereitzustellen, die den Prinzipien des responsiven Designs entsprechen. Verwenden Sie dasselbe Design-Muster wie für das Rendering statischer Bilder, indem Sie ein Servlet und eine Authoring-Komponente verwenden.

Die Komponente muss die folgenden Aufgaben ausführen:

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.

Grundlegendes zur Komponente für adaptive Bilder understanding-the-adaptive-image-component

Die Komponente für adaptive Bilder generiert Aufrufe an „Adaptive Image Component Servlet“ zum Rendern eines Bildes, dessen Größe an den Gerätebildschirm angepasst ist. Die Komponente umfasst die folgenden Ressourcen:

Hinzufügen der DIV-Elemente adding-the-div-elements

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 das JSP generiert:

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

Ändern der Bildgrößenselektoren changing-the-image-size-selectors

Wenn Sie die adaptive Bildkomponente anpassen und die Breitenselektoren ändern, müssen Sie auch das Servlet „Adaptive Image Component“ konfigurieren, um die Breiten zu unterstützen.

Grundlegendes zum Servlet „Adaptive Image Component“ understanding-the-adaptive-image-component-servlet

„Adaptive Component Servlet“ ändert die Größe eines JPEG-Bilds in eine gegebene Breite und legt die JPEG-Qualität fest.

Die Benutzeroberfläche von „Adaptive Image Component Servlet“ the-interface-of-the-adaptive-image-component-servlet

Das Servlet „Adaptive Image Component“ ist an das standardmäßige Sling-Servlet gebunden und unterstützt die Dateierweiterungen .jpg, .jpeg, .gif und .png. Der Servlet-Selektor ist „img“.

Deshalb löst Sling HTTP-Anforderungs-URLs im folgenden Format in dieses Servlet auf:

*path-to-node*.img.*extension*

Beispielsweise leitet Sling HTTP-Anfragen mit der URL http://localhost:4502/content/geometrixx/adaptiveImage.img.jpg an „Adaptive Image Component Servlet“ weiter.

Zwei zusätzliche Selektoren geben die gewünschte Bildbreite und JPEG-Qualität an. Im folgenden Beispiel wird ein Bild mit einer Breite von 480 Pixeln und 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 Pixeln):

Der vollständige Wert bedeutet, dass keine Skalierung vorgenommen wird.

Die folgenden Werte für die JPEG-Qualität werden unterstützt:

Die numerischen Werte sind 0,4, 0,82 bzw. 1,0.

Ändern der standardmäßig unterstützten Breiten

Verwenden Sie die Web-Konsole (http://localhost:4502/system/console/configMgr) oder einen sling:OsgiConfig-Knoten, um die unterstützten Breiten des Servlets „Adaptive Image Component“ von Adobe CQ zu konfigurieren.

Informationen zum Konfigurieren von AEM-Diensten finden Sie unter Konfigurieren von OSGi.

Implementierungsdetails implementation-details

Die Klasse com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet erweitert die Klasse AbstractImageServlet. Der Quell-Code von „AdaptiveImageComponentServlet“ befindet sich im Ordner /libs/foundation/src/impl/src/com/day/cq/wcm/foundation/impl.

Die Klasse verwendet Felix-SCR-Anmerkungen, um den Ressourcentyp und die Dateierweiterung zu konfigurieren, mit der das Servlet verknüpft ist, sowie den Namen 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 Eigenschaften-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 Klasse AbstractImageServlet stellt die Methode doGet zur Verfügung, die die HTTP-Anfrage verarbeitet. Diese Methode bestimmt die Ressource, die der Anfrage zugeordnet ist, ruft Ressourceneigenschaften aus dem Repository ab und gibt sie in einem ImageContext-Objekt zurück.

Die Klasse AdaptiveImageComponentServlet überschreibt die Methode createLayer. 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.

Image Reference Modification Servlet (Geometrixx Common) image-reference-modification-servlet-geometrixx-common

Das beispielhafte Reference Modification Servlet generiert Größenattribute für das img-Element, die ein Bild auf der Web-Seite zu skalieren.

Aufrufen des Servlets calling-the-servlet

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

Beispielsweise leitet Sling HTTP-Anfragen mit der URL http://localhost:4502/content/geometrixx/en.image.jpg an „Image Reference Modification Servlet“ weiter.

Drei weitere Selektoren geben die gewünschte Breite, Höhe und (optional) Qualität des Bildes an. Im folgenden Beispiel wird ein Bild mit einer Breite von 770 Pixeln, einer Höhe von 360 Pixeln 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:

In AEM können Sie die Konfigurationseinstellungen für solche Services auf unterschiedliche Weise vornehmen. Umfassende Informationen finden Sie unter Konfigurieren von OSGi.

Festlegen der Bildressource specifying-the-image-resource

Der Bildpfad, die Abmessungen und die Qualitätswerte müssen als Eigenschaften eines Knotens im Repository gespeichert werden:

Verwenden Sie beim Bearbeiten einer Seite den Sidekick zum Angeben von Bildern und zum Hinzufügen des Knotens image zu den Seiteneigenschaften:

Implementierungsdetails implementation-details-1

Die Klasse „info.geometrixx.commons.impl.servlets.ImageReferenceModificationServlet“ erweitert die Klasse AbstractImageServlet. Wenn Sie das Paket „cq-geometrixx-commons-pkg“ installiert haben, befindet sich der „ImageReferenceModificationServlet“-Quell-Code im Ordner /apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/commons/impl/servlets.

Die Klasse verwendet Felix-SCR-Anmerkungen, um den Ressourcentyp und die Dateierweiterung zu konfigurieren, mit der das Servlet verknüpft ist, sowie den Namen 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 Eigenschaften-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 Klasse AbstractImageServlet stellt die Methode doGet zur Verfügung, die die HTTP-Anfrage verarbeitet. Diese Methode bestimmt die Ressource, die dem Aufruf zugeordnet ist, ruft Ressourceneigenschaften aus dem Repository ab und speichert sie in einem ImageContext-Objekt.

Die Klasse ImageReferenceModificationServlet überschreibt die Methode createLayer und implementiert die Logik, die die zu rendernde Bildressource festlegt. Die Methode ruft einen untergeordneten Knoten des Knotens jcr:content der Seite mit der Bezeichnung image ab. Aus diesem image-Knoten wird ein Bildobjekt erstellt und die Methode getFileReference gibt den Pfad zur Bilddatei aus der Eigenschaft fileReference des Bildknotens zurück.

Entwickeln eines fließenden Rasters developing-a-fluid-grid

AEM ermöglicht Ihnen die effiziente und effektive Implementierung fließender Raster. Auf dieser Seite wird beschrieben, wie Sie fließende Raster oder eine vorhandene Rasterimplementierung (z. B. Bootstrap) in Ihr AEM-Programm integrieren.

Wenn Sie nicht mit fließenden Rastern vertraut sind, lesen Sie den Abschnitt Einführung in fließende Raster unten auf dieser Seite. Diese Einführung bietet einen Überblick über fließende Raster und Anleitungen für deren Entwurf.

Definieren des Rasters mithilfe einer Seitenkomponente defining-the-grid-using-a-page-component

Verwenden Sie Seitenkomponenten, um die HTML-Elemente zu generieren, 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 Beispielanwendung „geometrixx-media“ die Komponente „media-home“. Diese Seitenkomponente fügt zwei Skripte hinzu, die zwei div-Elemente der Klasse row-fluid generieren:

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

Skalieren des Seitenkomponentenrasters scaling-the-page-component-grid

Das Design, das der Seitenkomponente „geometrixx-media“ (/etc/designs/geometrixx-media) zugeordnet ist, umfasst den ClientLibraryFolder clientlibs. 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 Stilen für verschiedene Größen von Darstellungsfeldern.

Das folgende Beispiel-CSS ist eine Untergruppe dieser Stile. Diese Untergruppe konzentriert sich auf die Klassen span12, span8 und span4 sowie Medienabfragen für zwei Darstellungsfeldgrößen. Beachten Sie die folgenden Eigenschaften des CSS:

/* 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% }
}

Neupositionieren von Inhalten im Seitenkomponentenraster repositioning-content-in-the-page-component-grid

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:

/* 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 der Seitenkomponenten tip-modularize-your-page-components

Modularisieren Sie Ihre Komponenten, damit Sie den Code effizienter nutzen können. Ihre Site verwendet wahrscheinlich mehrere verschiedene Seitentypen, z. B. eine Begrüßungsseite, eine Artikelseite oder eine Produktseite. Jeder Seitentyp enthält verschiedene Inhaltstypen und verwendet wahrscheinlich unterschiedliche Layouts. Wenn jedoch bestimmte Elemente eines Layouts auf mehreren Seiten verwendet werden, können Sie den Code wiederverwenden, der diesen Teil des Layouts implementiert.

Verwenden von Seitenkomponentenüberlagerungen

Erstellen Sie eine Hauptseitenkomponente, die Skripte für die Generierung der einzelnen Bestandteile einer Seite bietet (z. B. die Abschnitte head und body sowie die Abschnitte header, content und footer im Hauptteil).

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 das Programm „geometrixx-media“ die Seitenkomponente (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.

Wiederverwenden von Skripten

Erstellen Sie mehrere JSP-Skripte, die Zeilen- und Spaltenkombinationen generieren, die für mehrere Seitenkomponenten die gleichen sind. Beispielsweise verweisen sowohl das Skript content.jsp des Artikels als auch die media-home-Komponenten auf das Skript 8x4col.jsp.

Organisieren von CSS-Stilen nach Darstellungsfeldgrößen

Platzieren Sie CSS-Stile und Medienabfragen für verschiedene Darstellungsfeldgrößen in verschiedenen Dateien. Verwenden Sie Client-Bibliotheksordner, um sie zu verketten.

Einfügen von Komponenten in das Seitenraster inserting-components-into-the-page-grid

Wenn Komponenten einen einzelnen Inhaltsblock generieren, steuert normalerweise das von der Seitenkomponente erstellte Raster die Platzierung des Inhalts.

Sie als Autorin oder Autor können den Inhaltsblock in verschiedenen Größen und relativen Positionen darstellen lassen. Der Inhaltstext sollte 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, damit die CSS- und JS-Dateien generiert werden. 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 des CSS der Seite gelten für die div-Elemente derselben Klasse und Struktur in diesem HTML-Code. Allerdings umfasst die Komponente auch den Client-Bibliotheksordner /apps/geometrixx-media/components/2-col-article-summary/clientlibs:

Beispielsweise sind in der Datei /apps/geometrixx-media/components/2-col-article-summary/clientlibs/css/responsive-480px.css die folgenden Stile 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;
    }
}

Einführung zu fließenden Rastern introduction-to-fluid-grids

Fließende Raster ermöglichen die Anpassung von Seiten-Layouts an die Dimensionen des Client-Darstellungsfelds. Raster bestehen aus logischen Spalten und Zeilen, die die Inhaltsblöcke auf der Seite positionieren.

Mithilfe der HTML5-Technologie können Sie das Raster implementieren und bearbeiten, um Seiten-Layouts an verschiedene Darstellungsfeldgrößen anzupassen:

Verwenden separater Breiten using-discrete-widths

Verwenden Sie für jeden Bereich von Darstellungsfeldbreiten eine statische Seitenbreite und Inhaltsblöcke mit einer konstanten Breite. Bei der manuellen Größenanpassung eines Browser-Fensters treten Änderungen an der Inhaltsgröße bei bestimmten Fensterbreiten (auch als Haltepunkte bezeichnet) auf. So werden Seiten-Designs besser eingehalten, wodurch das Anwendererlebnis verbessert wird.

Skalieren des Rasters scaling-the-grid

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.

Neupositionieren von Inhalten im Raster repositioning-content-in-the-grid

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.

Entwerfen des Rasters designing-the-grid

Bestimmen Sie die Spalten und Zeilen, die Sie benötigen, um die Inhaltsblöcke auf Ihren Seiten zu positionieren. Ihre Seiten-Layouts bestimmen die Anzahl der Spalten und Zeilen, die sich über Ihr Raster erstrecken.

Anzahl der Spalten

Verwenden Sie ausreichend Spalten, um die Inhaltsblöcke für alle Darstellungsfeldgrößen in allen Layouts horizontal zu positionieren. Sie sollten zur Unterstützung zukünftiger Seiten-Designs mehr Spalten verwenden, als derzeit benötigt werden.

Zeileninhalte

Verwenden Sie Zeilen, um die vertikale Positionierung von Inhaltsblöcken zu steuern. Legen Sie die Inhaltsblöcke fest, die sich in derselben Zeile befinden:

Rasterimplementierungen grid-implementations

Erstellen Sie CSS-Klassen und -Stile, damit Sie das Layout der Inhaltsblöcke auf einer Seite steuern können. Seiten-Designs 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 die relativen und absoluten Größen berücksichtigen. Sie können ein fließendes Raster mit drei Arten von CSS-Klassen implementieren:

Zieldarstellungsfeldbreiten (und ihre zugehörigen Medienabfragen) grenzen bestimmte Breiten ein, die für ein Seiten-Layout verwendet werden.

Breiten von Inhaltsblöcken widths-of-content-blocks

Im Allgemeinen basiert der width-Stil 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-Stile für Ihre Seiten.

Positionieren von Inhaltsblöcken in Zeilen positioning-content-blocks-in-rows

Verwenden Sie den float-Stil der .row-fluid-Klasse, um zu steuern, ob die Inhaltsblöcke in einer Zeile horizontal oder vertikal angeordnet werden.

Fügen Sie den Stil dem .row-fluid-Selektor in den Medienabfragen hinzu. Legen Sie den Wert entsprechend dem Seiten-Layout 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.

Dieses Verhalten kann durch die folgende CSS-Anweisung implementiert werden:

@media (min-width: 768px) and (max-width: 979px) {
   .row-fluid {
       width:100%;
       float:left
   }
}

@media (max-width:480px){
    .row-fluid {
       width:100%;
       float:none
   }
}

Zuweisen von Klassen zu Inhaltsblöcken assigning-classes-to-content-blocks

Legen Sie für das Seitenlayout der verschiedenen Darstellungsfeldgrößen die Anzahl der Spalten fest, über die sich die Inhaltsblöcke jeweils erstrecken. Bestimmen Sie dann, welche Klasse für die div-Elemente dieser Inhaltsblöcke verwendet werden soll.

Wenn Sie die div-Klassen eingerichtet haben, können Sie das Raster mithilfe Ihrer AEM-Anwendung implementieren.