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

Gestalten Sie Ihre Webseiten so, dass sie sich an den Client-Viewport anpassen, in 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 Änderungen der Viewport-Größe reagieren kann:

Entwickeln Sie Adobe Experience Manager-Anwendungen (AEM), die HTML5-Seiten generieren, die sich an verschiedene Fenstergrößen und Ausrichtungen anpassen. Beispielsweise entsprechen die folgenden Darstellungsfeldbreiten 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 eines AEM-Programms, das Ihre Web-Seiten unterstützt, müssen Sie einige Design-Entscheidungen treffen. Sie benötigen beispielsweise die folgenden Informationen:

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 Seiten-Rendering. 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 Ihrer CSS-Datei Medienabfragen anhand der Eigenschaften der Geräte, die Sie als Ziel auswählen. 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 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 implementiert Stilpriorität. Stile sind spezifischerer, da die Gerätegröße sinkt.

#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 mit AEM Seiten using-media-queries-with-aem-pages

Schließen Sie den Client-Bibliotheksordner in das JSP-Skript Ihrer Seitenkomponente ein, um die CSS-Datei zu generieren, die die Medienabfragen enthält, und um auf die Datei zu verweisen.

<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 verschiedenen 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-64/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 Tools-Konsole, um Erstellen und Bearbeiten von Gerätegruppen.

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 ist das Herunterladen aller Ressourcen keine effiziente Nutzung der Datenpipeline des Kunden. Um Ressourcen selektiv herunterzuladen, verwenden Sie JavaScript, um die Ressourcenanforderung zu starten, nachdem die Medienabfragen die Auswahl durchgeführt haben.

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

Prüfen von Medienabfragen mithilfe von JavaScript evaluating-media-queries-using-javascript

Implementierungen der MediaQueryList-Benutzeroberfläche, die W3C definiert, ermöglichen Ihnen die Prüfung 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 von W3C vorgeschlagene Bildelement verwendet Medienabfragen, um die für Bildelemente zu verwendende Quelle zu ermitteln. Das Bildelement verwendet Elementattribute, um Medienabfragen Bildpfaden zuzuordnen.

Die frei verfügbare Bibliothek picturefill.js bietet ähnliche Funktionen wie das vorgeschlagene Element picture 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 zu implementieren, müssen Sie die erforderlichen JavaScript-Bibliotheken hinzufügen und das erforderliche HTML-Markup in Ihre Seiten einfügen.

Bibliotheken

Rufen Sie die folgenden JavaScript-Bibliotheken ab und fügen 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-Ausgabeformate 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 Image-Rendering-Servlet bereit, das zusammenarbeitet, um Bilder für Webseiten zu rendern. Die folgende Ereignisabfolge 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">

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 parbase-Komponente enthält das Skript img.GET.java , das mit dem Selektor und der Dateinamenerweiterung der Anfrage-URL übereinstimmt. CQ verwendet dieses Skript (Servlet) zum Rendern des Bildes.

Um den Quellcode des Skripts anzuzeigen, öffnen Sie mithilfe der CRXDE Lite die /libs/foundation/components/parbase/img.GET.java
file.

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-Viewports, um Bilder bereitzustellen, die den Prinzipien des responsiven Designs entsprechen. Verwenden Sie dasselbe Designmuster wie das statische Bild-Rendering, 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 Image-Komponente anpassen und die Breitenselektoren ändern, müssen Sie auch das Adaptive Image Component Servlet konfigurieren, um die Breiten zu unterstützen.

Das Servlet der 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 für die Adaptive Bildkomponente 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 Pixel 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 Pixel):

Der vollständige Wert zeigt keine Skalierung an.

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 verwenden, um die unterstützten Breiten des Adobe CQ Adaptive Image Component Servlet zu konfigurieren.

Informationen zum Konfigurieren AEM Services 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 SCR-Anmerkung Eigenschaft , um die standardmäßige unterstützte Bildqualität und -dimensionen festzulegen.

@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 Beispiel-Image Reference Modification Servlet generiert Größenattribute für das img-Element, um ein Bild auf der Web-Seite zu skalieren.

Servlet aufrufen 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 zusätzliche Selektoren geben die angeforderte Bildbreite, -höhe und (optional) -Qualität an. Im folgenden Beispiel wird ein Bild mit einer Breite von 770 Pixel, einer Höhe von 360 Pixel und 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 Bilddimensionen und Qualitätswerten.

Die folgenden Werte werden standardmäßig unterstützt (widthxheight):

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.

Bildressource festlegen 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 SCR-Anmerkung Eigenschaft , um die standardmäßige unterstützte Bildqualität und -dimensionen festzulegen.

@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 zu ihrer Konzeption.

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

Verwenden Sie Seitenkomponenten, um die HTML-Elemente zu generieren, die die Inhaltsbausteine der Seite definieren. Der ClientLibraryFolder, auf den die Seite verweist, stellt das CSS bereit, das das Layout der Inhaltsbausteine 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 Darstellungsfeldgrößen.

Das folgende Beispiel-CSS ist eine Teilmenge 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 Beispielanwendung "Geometrixx Media"verteilen Zeilen von Inhaltsbausteinen horizontal in einem breiten Viewport. In kleineren Viewports werden dieselben Blöcke vertikal verteilt. Das folgende Beispiel-CSS zeigt die Stile, die dieses Verhalten für den HTML-Code implementieren, den die Medien-Homepage-Komponente 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, um den Code effizient zu nutzen. 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.

Seitenkomponentenüberlagerungen verwenden

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 enthält eine Datei content.jsp , die die Datei content.jsp der Seitenkomponente überschreibt.

Skripte wiederverwenden

Erstellen Sie mehrere JSP-Skripte, die Zeilen- und Spaltenkombinationen generieren, die für mehrere Seitenkomponenten häufig 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 der Zieldarstellungsfeldgröße

Schließen Sie CSS-Stile und Medienabfragen für verschiedene Darstellungsfeldgrößen in separate Dateien ein. 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.

Autoren sollten wissen, dass der Inhaltsbaustein in verschiedenen Größen und relativen Positionen dargestellt werden kann. Der Inhaltstext sollte keine relativen Anweisungen verwenden, um auf andere Inhaltsbausteine zu verweisen.

Bei Bedarf sollte die Komponente alle CSS- oder JavaScript-Bibliotheken bereitstellen, 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. Um die Dateien verfügbar zu machen, Erstellen einer Abhängigkeit oder Einbetten der Bibliothek in einem anderen Client-Bibliotheksordner unterhalb des Ordners /etc gespeichert.

Unterraster

Wenn die Komponente mehrere Inhaltsblöcke enthält, fügen Sie die Inhaltsbausteine 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 Seitenlayouts an die Dimensionen des Client-Viewports. 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 Seitenlayouts an verschiedene Darstellungsfeldgrößen anzupassen:

Verwenden separater Breiten using-discrete-widths

Verwenden Sie für jeden Bereich der Viewport-Breiten, die Sie als Ziel auswählen, eine statische Seitenbreite und Inhaltsblöcke mit konstanter Breite. Bei der manuellen Größenanpassung eines Browser-Fensters treten Änderungen an der Inhaltsgröße bei separaten Fensterbreiten (auch als Haltepunkte bezeichnet) auf. Daher werden Seitenentwürfe genauer eingehalten, wodurch das Benutzererlebnis maximiert wird.

Skalieren des Rasters scaling-the-grid

Verwenden Sie Raster zum Skalieren von Inhaltsbausteinen, um sie an verschiedene Darstellungsfeldgrößen anzupassen. Inhaltsbausteine erstrecken sich über eine bestimmte Anzahl von Spalten. Wenn sich die Spaltenbreiten erhöhen oder verringern, um an verschiedene Darstellungsfeldgrößen anzupassen, wird die Breite der Inhaltsblöcke entsprechend erhöht oder verringert. Die Skalierung kann sowohl große als auch mittlere Viewports unterstützen, die groß genug sind, um die nebeneinander platzierte Platzierung von Inhaltsbausteinen zu ermöglichen.

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

Die Größe von Inhaltsbausteinen kann durch eine minimale Breite beschränkt werden, über die die Skalierung nicht mehr effektiv ist. Bei kleineren Viewports kann das Raster verwendet werden, um Inhaltsblöcke vertikal und nicht 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.

Spaltenanzahl

Fügen Sie genügend Spalten hinzu, um die Inhaltsbausteine für alle Darstellungsfeldgrößen in allen Layouts horizontal zu positionieren. Sie sollten mehr Spalten als derzeit erforderlich verwenden, um zukünftige Seitenentwürfe aufzunehmen.

Zeileninhalt

Verwenden Sie Zeilen, um die vertikale Positionierung von Inhaltsbausteinen zu steuern. Legen Sie die Inhaltsbausteine fest, die dieselbe Zeile aufweisen:

Rasterimplementierungen grid-implementations

Erstellen Sie CSS-Klassen und -Stile, um das Layout der Inhaltsbausteine auf einer Seite zu steuern. Seitenentwürfe basieren häufig auf der relativen Größe und Position von Inhaltsbausteinen im Viewport. Der Viewport bestimmt die tatsächliche Größe der Inhaltsbausteine. Ihr CSS muss die relativen und absoluten Größen berücksichtigen. Sie können ein fließendes Raster mit drei CSS-Typen implementieren:

Zielgerichtete Darstellungsfeldbreiten (und die zugehörigen Medienabfragen) markieren diskrete Breiten, die für ein Seitenlayout 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. Das folgende Diagramm zeigt beispielsweise eine Zeile, die Inhalte für breite Viewports horizontal und für schmale Viewports vertikal verteilt.

Dieses Verhalten kann durch die folgende CSS 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 jeder gewünschten Darstellungsfeldgröße die Anzahl der Spalten fest, die jeder Inhaltsbaustein umfasst. Bestimmen Sie dann, welche Klasse für die div-Elemente dieser Inhaltsbausteine verwendet werden soll.

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