Adobe recommande d’utiliser l’éditeur d’application d’une seule page (SPA) pour les projets nécessitant un rendu côté client basé sur la structure SPA (par exemple, React). En savoir plus
Divers exemples sont basés sur l’exemple de contenu de Geometrixx, qui n’est plus fourni avec AEM, ayant été remplacé par We.Retail. Pour savoir comment télécharger et installer Geometrixx, consultez le document Implémentation de référence We.Retail.
Concevez vos pages web afin qu’elles s’adaptent à la fenêtre dans laquelle elles sont affichées. Le Responsive Design permet d’afficher les mêmes pages sur plusieurs appareils dans les deux orientations. L’image suivante présente différentes méthodes par lesquelles une page peut s’adapter aux changements de taille de la fenêtre d’affichage :
Développez des applications Adobe Experience Manager (AEM) qui génèrent des pages HTML5 qui s’adaptent à plusieurs tailles de fenêtre et orientations. À titre d’exemple, les plages de largeurs de fenêtre d’affichage suivantes correspondent à divers types d’appareil et à diverses orientations :
Consultez les rubriques suivantes pour en savoir plus sur la mise en œuvre du comportement Responsive Design :
Lors de la phase de conception, utilisez le sidekick pour afficher un aperçu de vos pages pour différents formats d’écran.
Avant de développer l’application AEM prenant en charge vos pages web, il convient de prendre plusieurs décisions en matière de conception. Vous devez, par exemple, disposer des informations suivantes :
La structure d’application AEM type prend en charge toutes les implémentations de Responsive Design :
Les requêtes de média permettent une utilisation sélective des styles CSS pour le rendu des pages. Les fonctionnalités et outils de développement AEM vous permettent d’implémenter efficacement des requêtes de média dans vos applications.
Le groupe W3C fournit la recommandation Media Queries (Requêtes de média) qui décrit cette fonctionnalité CSS3, ainsi que la syntaxe.
Dans votre fichier CSS, définissez les requêtes de média en fonction des propriétés des appareils que vous ciblez. La stratégie d’implémentation suivante se révèle particulièrement utile pour gérer des styles pour chaque requête de média :
L’exemple de média We.Retail utilise cette stratégie pour définir des styles dans la conception du site. Le fichier CSS utilisé par We.Retail est situé à l’emplacement suivant : */apps/weretail/clientlibs/clientlib-site/less/grid.less
.
Le tableau suivant répertorie les fichiers situés dans le dossier enfant CSS.
Nom du fichier | Description | Requête de média |
---|---|---|
style.css | Styles communs. | S/O |
bootstrap.css | Styles communs, définis par le Bootstrap Twitter. | S/O |
responsive-1200px.css | Styles pour tous les médias d’une largeur ou d’une largeur de 1 200 pixels. | @media (largeur min. : 1200 px) { |
responsive-980px-1199px.css | Styles pour les médias dont la largeur est comprise entre 980 et 1 199 pixels. | @media (largeur min. : 980 px) et (largeur max. : 1199 px) { |
responsive-768px-979px.css | Styles pour les médias dont la largeur est comprise entre 768 et 979 pixels. | @media (largeur min. : 768 px) et (largeur max. : 979 px) { |
responsive-767px-max.css | Styles pour tous les médias dont la largeur est inférieure à 768 pixels. | @media (largeur max. : 767 px) { |
responsive-480px.css | Styles pour tous les médias dont la largeur est inférieure à 481 pixels. | @media (largeur max. : 480) { ... } |
Le fichier css.txt situé dans le dossier /etc/designs/weretail/clientlibs
répertorie les fichiers CSS inclus dans le dossier de bibliothèque cliente. L’ordre des fichiers applique la priorité de style. Plus la taille du périphérique diminue, plus les styles sont précis.
#base=css
style.css
bootstrap.css
responsive-1200px.css
responsive-980px-1199px.css
responsive-768px-979px.css
responsive-767px-max.css
responsive-480px.css
Conseil : les noms de fichier descriptifs vous permettent d’identifier facilement la taille de la fenêtre d’affichage ciblée.
Ajoutez le dossier de bibliothèque cliente dans le script JSP de votre composant de page afin de générer le fichier CSS qui contient les requêtes de média et de référencer le fichier.
<ui:includeClientLib categories="apps.weretail.all"/>
Le dossier de bibliothèque cliente apps.weretail.all
intègre la bibliothèque clientlibs.
Le script JSP génère le code HTML suivant qui référence les feuilles de style :
<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css" type="text/css">
<link href="/etc/designs/weretail.css" rel="stylesheet" type="text/css">
Vous pouvez afficher des aperçus de vos pages dans différents formats de fenêtre afin de tester le comportement de votre conception Responsive Design. En mode Aperçu, le sidekick comprend un menu déroulant Appareils que vous pouvez utiliser pour sélectionner un appareil. Lorsque vous sélectionnez un appareil, la page change afin de s’adapter à la taille de la fenêtre d’affichage.
Pour activer l’aperçu de périphérique dans le sidekick, vous devez configurer la page et le service MobileEmulatorProvider. Une autre option de configuration de page permet de déterminer les appareils affichés dans la liste Appareils.
La liste Appareils s’affiche dans le sidekick lorsque votre page contient le script JSP qui effectue le rendu de la liste Appareils. Pour ajouter la liste Appareils au sidekick, insérez le script /libs/wcm/mobile/components/simulator/simulator.jsp
dans la section head
de votre page.
Insérez le code suivant dans le JSP qui définit la section head
:
<cq:include script="/libs/wcm/mobile/components/simulator/simulator.jsp"/>
Pour voir un exemple, ouvrez le fichier /apps/weretail/components/page/head.jsp
dans CRXDE Lite.
Pour permettre au simulateur d’appareils de prendre en charge vos pages, enregistrez vos composants de page auprès du service de fabrique MobileEmulatorProvider et définissez la propriété mobile.resourceTypes
.
Dans AEM, il existe plusieurs méthodes pour gérer les paramètres de configuration pour ces services. Pour plus d’informations, voir Configuration d’OSGi.
Par exemple, pour créer un nœud [sling:OsgiConfig](/docs/experience-manager-65/deploying/configuring/configuring-osgi.md#adding-a-new-configuration-to-the-repository)
dans votre application, procédez comme suit :
Dossier parent : /apps/application_name/config
Nom : com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-*alias*
Le suffixe - *alias*
est requis, car MobileEmulatorProvider est un service de fabrique. Utilisez un alias unique pour cette fabrique.
jcr:primaryType: sling:OsgiConfig
Ajoutez la propriété de nœud suivante :
Nom : mobile.resourceTypes
Type : String[]
Valeur : chemins d’accès aux composants de page qui effectuent le rendu de vos pages web. Par exemple, l’application geometrixx-media utilise les valeurs suivantes :
geometrixx-media/components/page
geometrixx-unlimited/components/pages/page
geometrixx-unlimited/components/pages/coverpage
geometrixx-unlimited/components/pages/issue
Pour spécifier les groupes d’appareils qui figurent dans la liste appareils, ajoutez une propriété cq:deviceGroups
au nœud jcr:content
de la page racine de votre site. La valeur de la propriété est un tableau de chemins d’accès pointant vers les nœuds du groupe d’appareils.
Les nœuds du groupe d’appareils sont situés dans le dossier /etc/mobile/groups
.
Par exemple, la page racine du site Geometrixx Media est /content/geometrixx-media
. Le nœud /content/geometrixx-media/jcr:content
contient la propriété suivante :
cq:deviceGroups
String[]
/etc/mobile/groups/responsive
Utilisez la console Outils pour créer et modifier des groupes de périphériques.
S’agissant des groupes de périphériques que vous utilisez dans le cadre du Responsive Design, modifiez le groupe, puis sélectionnez Désactiver l’émulateur sur l’onglet Général. Cette option empêche l’affichage du carrousel de l’émulateur, qui n’est pas pertinent dans le cadre du Responsive Design.
Vous pouvez utiliser des requêtes de média pour sélectionner une ressource d’image à afficher sur la page. Sachez toutefois que chaque ressource qui utilise une requête de média pour appliquer des conditions à son utilisation est téléchargée sur le client. La requête de média détermine simplement si la ressource téléchargée est affichée.
Dans le cas des ressources de grande taille, comme les images, télécharger l’ensemble des éléments ne constitue pas une utilisation efficace du pipeline des données du client. Pour télécharger les ressources de manière sélective, utilisez du code JavaScript afin de lancer une requête de ressource après que les requêtes de média ont effectué la sélection.
La stratégie suivante charge une ressource unique qui est sélectionnée à l’aide des requêtes de média :
Les implémentations de l’interface MediaQueryList définie par le W3C vous permettent d’évaluer des requêtes de média à l’aide de JavaScript. Vous pouvez appliquer la logique à des résultats de requête de média et exécuter les scripts qui sont destinés à la fenêtre active :
Les navigateurs qui mettent en œuvre l’interface MediaQueryList prennent en charge la fonction window.matchMedia()
. Cette fonction teste les requêtes de média par rapport à une chaîne donnée. La fonction renvoie un objet MediaQueryList
qui permet d’accéder aux résultats de la requête.
Dans le cas des navigateurs qui n’implémentent pas cette interface, vous pouvez utiliser un polyfill matchMedia()
, tel que matchMedia.js, qui est une bibliothèque JavaScript en libre accès.
L’élément picture proposé par le W3C utilise des requêtes de média afin de déterminer la source à utiliser pour les éléments images. L’élément picture utilise des attributs d’élément pour associer des requêtes de média à des chemins d’accès aux images.
La bibliothèque picturefill.js disponible en libre accès fournit les mêmes fonctionnalités que l’élément picture
proposé. Elle applique également une stratégie semblable. La bibliothèque picturefill.js appelle window.matchMedia
pour évaluer les requêtes de média définies pour un ensemble d’éléments div
. Chaque élément div
spécifie également une source d’images. Cette source est utilisée lorsque la requête de média de l’élément div
renvoie la valeur true
.
La bibliothèque picturefill.js
nécessite du code HTML semblable à l’exemple suivant :
<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>
Lorsque la page est rendue, picturefull.js insère un élément img
en tant que dernier enfant de l’<div data-picture>
:
<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>
Dans une page AEM, la valeur de l’attribut data-src
est le chemin d’accès à une ressource dans le référentiel.
Pour implémenter des images adaptatives dans votre application AEM, vous devez ajouter les bibliothèques JavaScript requises et inclure le balisage HTML dans vos pages.
Bibliothèques
Procurez-vous les bibliothèques JavaScript suivantes et insérez-les dans un dossier de bibliothèque cliente :
/etc/clientlibs/granite/jquery
) (catégorie = jquery)Conseil : vous pouvez concaténer automatiquement plusieurs dossiers de bibliothèques clientes en ayant recours à l’incorporation.
HTML
Créez un composant qui génère les éléments div requis attendus par le code picturefill.js. Dans une page AEM, la valeur de l’attribut data-src est le chemin d’accès à une ressource dans le référentiel. Par exemple, un composant de page peut coder en dur les requêtes de média et les chemins d’accès associés pour les rendus d’images dans la gestion des ressources numériques (DAM). Vous pouvez également créer un composant Image personnalisé permettant aux auteurs de sélectionner des rendus d’image ou de définir des options de rendu lors de l’exécution.
L’exemple de code HTML ci-dessous effectue une sélection parmi 2 rendus DAM de la même image.
<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>
Le composant de base Image adaptative implémente des images adaptatives :
/libs/foundation/components/adaptiveimage/clientlibs
/libs/foundation/components/adaptiveimage/adaptiveimage.jsp
Vous trouverez plus d’informations sur ce composant à la section suivante.
Pour personnaliser le rendu d’images, vous devez comprendre l’implémentation du rendu d’images statiques par défaut dans AEM. AEM fournit le composant Image et un servlet de rendu d’images qui fonctionnent de concert pour effectuer le rendu d’images pour la page web. La séquence d’événements ci-dessous se produit lorsque le composant Image est inclus dans le système de paragraphes de la page :
Par exemple, le JSP du composant Image génère l’élément HTML suivant :
<img title="My Image" alt="My Image" class="cq-dd-image" src="/content/mywebsite/en/_jcr_content/par/image_0.img.jpg/1358372073597.jpg">
Lorsque la navigateur charge la page, il demande l’image en utilisant la valeur de l’attribut src en tant qu’URL. Sling décompose l’URL :
/content/mywebsite/en/_jcr_content/par/image_0
.jpg
img
1358372073597.jpg
Le nœud image_0
possède une valeur jcr:resourceType
de foundation/components/image
, qui a une valeur sling:resourceSuperType
de foundation/components/parbase
. Le composant parbase contient le script img.GET.java qui correspond au sélecteur et à l’extension de nom de fichier de l’URL de demande. CQ utilise ce script (servlet) pour effectuer le rendu de l’image.
Pour voir le code source du script, utilisez CRXDE Lite afin d’ouvrir le fichier /libs/foundation/components/parbase/img.GET.java
.
Dimensionnez les images au moment de l’exécution en fonction des caractéristiques de la fenêtre d’affichage du client pour fournir des images conformes aux principes du Responsive Design. Utilisez le même schéma de conception que le rendu d’images statiques, à l’aide d’un servlet et d’un composant de création.
Le composant doit effectuer les tâches suivantes :
div
contenant des sélecteurs de médias et des appels de service pour le rendu de l’image.Le client web utilise les bibliothèques JavaScript matchMedia and Picturefill (ou des bibliothèques du même type) pour évaluer les sélecteurs de médias.
Le servlet qui traite la demande d’image doit effectuer les tâches suivantes :
Solutions disponibles
AEM installe les implémentations suivantes que vous pouvez utiliser ou étendre.
Le composant de base Image adaptative génère des appels vers le servlet de composant d’image adaptative afin d’effectuer le rendu d’une image qui est redimensionnée en fonction de l’écran de l’appareil. Le composant contient les ressources suivantes :
cq:ClientLibraryFolder
qui assemble la bibliothèque JavaScript polyfill matchMedia à une bibliothèque JavaScript Picturefill modifiée.cq:editConfig
remplace le composant Image de base CQ, de sorte que la cible de dépôt crée un composant Image adaptative plutôt qu’un composant Image de base.Le script adaptive-image.jsp contient le code suivant qui génère des éléments div et des requêtes de média :
<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>
La variable path
contient le chemin d’accès de la ressource actuelle (le nœud du composant Image adaptative). Le code génère une série d’éléments div
avec la structure suivante :
<div data-scr = "*path-to-parent-node*.adaptive-image.adapt.*width*.*quality*.jpg" data-media="*media query*"></div>
La valeur de l’attribut data-scr
est une URL que Sling résout sur le servlet de composant d’image adaptative qui effectue le rendu de l’image. L’attribut data-media contient la requête de média qui est évaluée par rapport aux propriétés du client.
Le code HTML suivant est un exemple des éléments div
générés par le JSP :
<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>
Si vous personnalisez le composant Image adaptative et modifiez les sélecteurs de largeur, vous devez également configurer le servlet Adaptive Image Component Servlet pour qu’il prenne en charge ces largeurs.
Le servlet de composant d’image adaptative redimensionne une image JPEG selon une largeur spécifiée et définit la qualité JPEG.
Le servlet Adaptive Image Component Servlet est lié au servlet Sling par défaut. Il prend en charge les extensions de fichier .jpg, .jpeg, .gif et .png. Le sélecteur de servlet est img.
Les fichiers .gif animés ne sont pas pris en charge dans AEM pour les rendus adaptatifs.
Par conséquent, Sling résout les URL de requête HTTP au format suivant sur ce servlet :
*path-to-node*.img.*extension*
Par exemple, Sling transmet les requêtes HTTP avec l’URL http://localhost:4502/content/geometrixx/adaptiveImage.img.jpg
au servlet de composant d’image adaptative.
Deux sélecteurs supplémentaires définissent la largeur d’image demandée et la qualité JPEG. L’exemple suivant demande une image d’une largeur de 480 pixels et de qualité moyenne :
http://localhost:4502/content/geometrixx/adaptiveImage.adapt.480.MEDIUM.jpg
Propriétés d’image prises en charge
Le servlet accepte un nombre fini de largeurs et de qualités d’image. Les largeurs suivantes sont prises en charge par défaut (en pixels) :
La valeur full (complet) indique qu’il n’y a pas de mise à l’échelle.
Les valeurs de qualité JPEG ci-dessous sont prises en charge :
Les valeurs numériques sont, respectivement, 0,4, 0,82 et 1,0.
Modification des largeurs prises en charge par défaut
Utilisez la console web (http://localhost:4502/system/console/configMgr) ou un nœud sling:OsgiConfig pour configurer les largeurs prises en charge du servlet Adaptive Image Component Servlet Adobe CQ.
Pour plus d’informations sur la configuration des services AEM, voir Configuration d’OSGi.
Console web | sling:OsgiConfig | |
---|---|---|
Nom du service ou du nœud | Le nom du service sur l’onglet Configuration est Servlet de composant d’image adaptative Adobe CQ. | com.day.cq.wcm.foundation.impl. AdaptiveImageComponentServlet |
Propriété | Largeurs prises en charge
|
adapt.supported.widths
|
La classe com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet
étend la classe AbstractImageServlet. Le code source AdaptiveImageComponentServlet se trouve dans le dossier /libs/foundation/src/impl/src/com/day/cq/wcm/foundation/impl
.
La classe utilise les annotations SCR Felix pour configurer le type de ressource et l’extension de fichier auxquels le servlet est associé, ainsi que le nom du premier sélecteur.
@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)
})
Le servlet utilise l’annotation SCR Property pour définir les dimensions et la qualité d’image prises en charge par défaut.
@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.")
La classe AbstractImageServlet
fournit la méthode doGet
qui traite la requête HTTP. Cette méthode détermine la ressource associée à la requête, récupère les propriétés de la ressource à partir du référentiel et les renvoie dans un objet ImageContext.
Remarque : la classe com.day.cq.commons.DownloadResource fournit la getFileReference method
. Celle-ci récupère la valeur de la propriété fileReference
de la ressource.
La classe AdaptiveImageComponentServlet
remplace la méthode createLayer
. La méthode récupère le chemin d’accès de la ressource d’image et la largeur d’image demandée auprès de l’objet ImageContext
. Elle appelle ensuite les méthodes de la classe info.geometrixx.commons.impl.AdaptiveImageHelper
, qui effectue la mise à l’échelle proprement dite de l’image.
La classe AdaptiveImageComponentServlet remplace également la méthode writeLayer. Cette méthode applique la qualité JPEG à l’image.
L’exemple de servlet Image Reference Modification Servlet génère des attributs de taille pour l’élément img afin de dimensionner une image sur la page web.
Le servlet est lié aux ressources cq:page
et prend en charge l’extension de fichier .jpg. Le sélecteur de servlet est image
. Par conséquent, Sling résout les URL de requête HTTP au format suivant sur ce servlet :
path-to-page-node.image.jpg
Par exemple, Sling transmet les requêtes HTTP avec l’URL http://localhost:4502/content/geometrixx/en.image.jpg
au servlet de modification de référence d’image.
Trois sélecteurs supplémentaires définissent la largeur, la hauteur et (éventuellement) la qualité d’image demandées. L’exemple suivant demande une image d’une largeur de 770 pixels, d’une hauteur de 360 pixels et de qualité moyenne :
http://localhost:4502/content/geometrixx/en.image.770.360.MEDIUM.jpg
Propriétés d’image prises en charge
Le servlet accepte un nombre fini de dimensions d’image et de valeurs de qualité.
Les valeurs suivantes sont prises en charge par défaut (largeur x hauteur) :
Les valeurs de qualité d’image ci-dessous sont prises en charge :
Dans AEM, il existe plusieurs méthodes pour gérer les paramètres de configuration pour ces services. Pour plus d’informations, voir Configuration d’OSGi.
Le chemin d’accès de l’image, les dimensions et les valeurs de qualité doivent être stockés sous la forme de propriétés d’un nœud dans le référentiel :
Le nom du nœud est image
.
Le nœud parent est le nœud jcr:content
d’une ressource cq:page
.
Le chemin d’accès de l’image est stocké en tant que valeur d’une propriété nommée fileReference
.
Lorsque vous créez une page, utilisez le sidekick pour spécifier l’image et ajouter le nœud image
aux propriétés de la page :
La classe info.geometrixx.commons.impl.servlets.ImageReferenceModificationServlet étend la classe AbstractImageServlet. Si le module cq-geometrixx-commons-pkg est installé, le code source ImageReferenceModificationServlet est situé dans le dossier /apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/commons/impl/servlets
.
La classe utilise les annotations SCR Felix pour configurer le type de ressource et l’extension de fichier auxquels le servlet est associé, ainsi que le nom du premier sélecteur.
@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)
})
Le servlet utilise l’annotation SCR Property pour définir les dimensions et la qualité d’image prises en charge par défaut.
@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.")
La classe AbstractImageServlet
fournit la méthode doGet
qui traite la requête HTTP. Cette méthode détermine la ressource associée à l’appel, récupère les propriétés de la ressource à partir du référentiel et les enregistre dans un objet ImageContext.
La classe ImageReferenceModificationServlet
remplace la méthode createLayer
et implémente la logique qui détermine la ressource d’images dont le rendu doit être effectué. La méthode récupère un nœud enfant du nœud jcr:content
de la page, nommé image
. Un objet Image est créé à partir de ce nœud image
et la méthode getFileReference
renvoie le chemin d’accès au fichier image à partir de la propriété fileReference
du nœud image.
Remarque : la classe com.day.cq.commons.DownloadResource fournit la méthode getFileReference.
AEM permet une implémentation efficace de grilles fluides. Cette page vous explique comment intégrer votre grille fluide ou une implémentation de grille existante (telle que Bootstrap) dans votre application AEM.
Si le concept des grilles fluides ne vous est pas familier, reportez-vous à la section Présentation des grilles fluides au bas de cette page. Vous y trouverez une présentation des grilles fluides, ainsi que des conseils de conception.
Utilisez les composants de page pour générer les éléments HTML qui définissent les blocs de contenu de la page. Le dossier de bibliothèque cliente (ClientLibraryFolder) auquel la page fait référence fournit le CSS qui contrôle la mise en page des blocs de contenu :
Par exemple, l’exemple d’application geometrixx-media contient le composant media-home. Ce composant insère deux scripts, lesquels génèrent deux éléments div
de la classe row-fluid
:
La première ligne contient un élément div
de la classe span12
(le contenu s’étend sur 12 colonnes). L’élément div
contient le composant parsys.
La deuxième ligne contient deux éléments div
, l’un de la classe span8
et l’autre de la classe span4
. Chaque élément div
inclut le composant parsys.
<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>
Remarque : lorsqu’un composant comprend plusieurs éléments cq:include
qui font référence au composant parsys, chaque attribut path
doit avoir une valeur différente.
La conception qui est associée au composant de page geometrixx-media (/etc/designs/geometrixx-media
) contient le dossier de bibliothèque cliente (ClientLibraryFolder) clientlibs
. Ce dossier définit les styles CSS des classes row-fluid
, des classes span*
, ainsi que des classes span*
qui sont les enfants des classes row-fluid
. Les requêtes de média permettent de redéfinir les styles pour différentes tailles de fenêtre d’affichage.
L’exemple de CSS suivant est un sous-ensemble de ces styles. Ce sous-ensemble porte sur les classes span12
, span8
et span4
, et sur les requêtes de média relatives à deux tailles de fenêtre d’affichage. Notez les caractéristiques suivantes du CSS :
.span
définissent les largeurs d’élément à l’aide de valeurs absolues..row-fluid .span*
définissent les largeurs d’élément sous la forme de pourcentages du parent. Les pourcentages sont calculés à partir des largeurs absolues.L’exemple d’application Geometrixx Media intègre la structure JavaScript Bootstrap dans son implémentation de grille fluide. La structure Bootstrap fournit le fichier bootstrap.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% }
}
Dans l’exemple d’application Geometrixx Media, les lignes de blocs de contenu sont distribuées horizontalement dans les fenêtres larges. Dans les fenêtres plus petites, ces mêmes blocs sont distribués verticalement. L’exemple CSS suivant illustre les styles qui implémentent ce comportement pour le code HTML généré par le composant de page media-home :
Le CSS par défaut de la page media-welcome affecte le style float:left
pour les classes span*
imbriquées dans des classes row-fluid
.
Les requêtes de média relatives aux fenêtres d’affichage plus petites affectent le style float:none
pour ces mêmes classes.
/* 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%;
}
}
Il est conseillé de modulariser les composants de page pour utiliser efficacement le code. Il est probable que votre site utilise différents types de pages, comme une page de bienvenue, une page d’article ou encore une page de produit. Le contenu affiché et la mise en page varient généralement en fonction du type de page. Cependant, lorsque des éléments d’une mise en page se retrouvent sur plusieurs pages, vous pouvez réutiliser le code qui implémente cette partie de la mise en page.
Utilisation d’incrustations de composants de page
Créez un composant de page principal qui fournit des scripts pour générer les différentes parties d’une page, telles que les sections head
et body
, ainsi que les sections header
, content
et footer
du corps du texte.
Créez d’autres composants de page qui utilisent le composant de page principal en tant que cq:resourceSuperType
. Ces composants comprennent des scripts qui remplacent les scripts de la page principale suivant les besoins.
Par exemple, l’application geometrixx-media comprend le composant de page (sling:resourceSuperType
est le composant de page de base). Plusieurs composants enfants (tels que article, category et media-home) utilisent ce composant de page en tant que sling:resourceSuperType
. Chaque composant enfant contient un fichier content.jsp qui remplace le fichier content.jsp du composant de page.
Réutilisation de scripts
Créez des scripts JSP qui génèrent des combinaisons de lignes et de colonnes communes à plusieurs composants de page. Par exemple, les scripts content.jsp
des composants article et media-home font tous deux référence au script 8x4col.jsp
.
Organisation des styles CSS par taille de fenêtre d’affichage ciblée
Insérez les styles CSS et les requêtes de média relatifs à différentes tailles de fenêtre dans des fichiers distincts. Utilisez des dossiers de bibliothèques clientes pour les concaténer.
Lorsque les composants génèrent un seul bloc de contenu, la grille définie par le composant de page contrôle généralement le positionnement du contenu.
Les auteurs doivent comprendre que le bloc de contenu peut être rendu selon différentes tailles et positions relatives. Le texte de contenu ne doit pas utiliser de directions relatives pour faire référence à d’autres blocs de contenu.
Si nécessaire, le composant doit fournir toutes les bibliothèques CSS ou JavaScript requises pour le code HTML qu’il génère. Utilisez un dossier de bibliothèque cliente au sein du composant pour générer les fichiers CSS et JS. Pour exposer les fichiers, créez une dépendance ou incorporez la bibliothèque dans un autre dossier de bibliothèque cliente sous /etc.
Sous-grilles
Si le composant comporte plusieurs blocs de contenu, ajoutez-les à l’intérieur d’une ligne pour créer une sous-grille sur la page :
Le composant /apps/geometrixx-media/components/2-col-article-summary
, par exemple, génère deux colonnes de contenu. Le code HTML généré présente la structure suivante :
<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>
Les sélecteurs .row-fluid .span6
du CSS de la page s’appliquent aux éléments div
de la même classe et de la même structure dans ce code HTML. Cependant, le composant comprend également le dossier de bibliothèque cliente /apps/geometrixx-media/components/2-col-article-summary/clientlibs :
multi-col-article-summary
de l’élément div
de la ligne pour remplacer le comportement de la classe row-fluid
de la page.Par exemple, les styles suivants sont inclus dans le fichier /apps/geometrixx-media/components/2-col-article-summary/clientlibs/css/responsive-480px.css
:
@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;
}
}
Les grilles fluides permettent aux mises en page de s’adapter aux dimensions de la fenêtre d’affichage du client. Les grilles sont constituées de lignes et de colonnes logiques qui positionnent les blocs de contenu sur la page.
La technologie HTML5 vous permet d’implémenter la grille et de la manipuler afin d’adapter les mises en page à différentes tailles de fenêtre :
div
HTML comportent des blocs de contenu qui s’étendent sur plusieurs colonnes.Pour chaque plage de largeurs de fenêtre que vous ciblez, utilisez une largeur de page statique et des blocs de contenu de largeur constante. Lors du redimensionnement manuel d’une fenêtre de navigateur, les modifications apportées à la taille du contenu s’opèrent au niveau des largeurs de fenêtre discrètes (connues également sous le nom de points d’arrêt). En conséquence, les conceptions de page sont respectées de façon plus rigoureuse, optimisant ainsi l’expérience utilisateur.
Utilisez des grilles pour redimensionner les blocs de contenu à adapter à différentes tailles de fenêtre. Les blocs de contenu s’étendent sur un nombre spécifique de colonnes. La largeur des blocs de contenu augmente ou diminue à mesure que la largeur des colonnes s’adapte à la taille des fenêtres d’affichage. La mise à l’échelle peut prendre en charge les fenêtres de grande taille et de taille moyenne qui sont suffisamment larges pour permettre l’affichage des blocs de contenu côte à côte.
La taille des blocs de contenu peut être limitée par une largeur minimale au-delà de laquelle la mise à l’échelle n’est plus efficace. Dans le cas des fenêtres plus petites, la grille peut être utilisée pour répartir des blocs de contenu verticalement plutôt qu’horizontalement.
Déterminez les colonnes et les lignes dont vous avez besoin pour positionner les blocs de contenu sur vos pages. Vos mises en page déterminent le nombre de colonnes et de lignes qui couvrent votre grille.
Nombre de colonnes
Insérez suffisamment de colonnes pour positionner horizontalement les blocs de contenu dans toutes vos mises en page et pour toutes les tailles de fenêtre. Il est conseillé d’utiliser plus de colonnes que ce qui est actuellement nécessaire pour prendre en charge les futures conceptions de page.
Contenu de ligne
Utilisez des lignes pour contrôler le positionnement vertical des blocs de contenu. Déterminez les blocs de contenu qui partagent la même ligne :
Créez des styles et des classes CSS pour contrôler la disposition des blocs de contenu sur une page. Les conceptions de page dépendent souvent de la position et de la taille relatives des blocs de contenu dans la fenêtre d’affichage. La fenêtre détermine la taille réelle des blocs de contenu. Votre CSS doit prendre en compte les tailles relatives et absolues. Vous pouvez implémenter une grille fluide à l’aide de trois types de classes CSS :
div
qui est un conteneur pour toutes les lignes. Cette classe définit la largeur absolue de la grille.div
qui représentent une ligne. Cette classe contrôle le positionnement horizontal ou vertical des blocs de contenu qui y sont inclus.div
qui représentent des blocs de contenu de largeurs différentes. Les largeurs sont exprimées en tant que pourcentage du parent (la ligne).Les largeurs de fenêtre ciblées (et les requêtes de média qui y sont associées) définissent les largeurs discrètes utilisées pour une mise en page.
En règle générale, le style width
des classes de blocs de contenu repose sur les caractéristiques suivantes de votre page et de votre grille :
Le CSS comprend une série de requêtes de média qui utilisent la structure suivante :
@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 }
...
}
Utilisez l’algorithme suivant comme point de départ pour développer les classes d’éléments et les styles CSS de vos pages.
Définissez un nom de classe pour l’élément div contenant toutes les lignes ; content.
, par exemple.
Définissez une classe CSS pour les éléments div qui représentent des lignes, comme row-fluid
.
Définissez des noms de classe pour les éléments de bloc de contenu. Une classe est requise pour toutes les largeurs possibles, en termes d’étendues de colonnes. Utilisez, par exemple, la classe span3
pour les éléments div
qui s’étendent sur 3 colonnes et span4
pour les étendues de 4 colonnes. Définissez autant de classes qu’il y a de colonnes dans votre grille.
Pour chaque taille de fenêtre que vous ciblez, ajoutez la requête de média correspondante à votre fichier CSS. Ajoutez les éléments suivants dans chaque requête de média :
content
; .content{}
, par exemple..span3{ }
, par exemple.row-fluid
; .row-fluid{ }
, par exemple..row-fluid span3 { }
, par exemple.Ajout des styles width pour chaque sélecteur :
content
sur la taille absolue de la page ; width:480px
, par exemple.(absolute width of page)/(number of columns)
..row-fluid .span
en pourcentage de la largeur totale. Calculez cette largeur à l’aide de la formule (absolute span width)/(absolute page width)*100
.Utilisez le style flottant de la classe .row-fluid
pour déterminer si les blocs de contenu d’une ligne sont disposés horizontalement ou verticalement.
Le style float:left
ou float:right
entraîne la répartition horizontale des éléments enfants (blocs de contenu).
Le style float:none
entraîne la répartition verticale des éléments enfants.
Ajoutez le style au sélecteur .row-fluid
à l’intérieur de chaque requête de média. Définissez la valeur en fonction de la mise en page que vous utilisez pour cette requête de média. Par exemple, le schéma ci-dessous illustre une ligne qui répartit le contenu horizontalement pour les fenêtres larges et verticalement pour les fenêtres étroites.
Le code CSS suivant peut implémenter ce comportement :
@media (min-width: 768px) and (max-width: 979px) {
.row-fluid {
width:100%;
float:left
}
}
@media (max-width:480px){
.row-fluid {
width:100%;
float:none
}
}
Pour la mise en page de chaque taille de fenêtre que vous ciblez, déterminez le nombre de colonnes couvertes par chaque bloc de contenu. Déterminez ensuite la classe à utiliser pour les éléments div de ces blocs de contenu.
Après avoir créé les classes div, vous pouvez implémenter la grille à l’aide de votre application AEM.