La disposition réactive est un mécanisme qui permet de réaliser un design web réactif. Les utilisateurs peuvent ainsi créer des pages Web dont la disposition et les dimensions dépendent des appareils utilisés.
Ce mécanisme est comparable aux mécanismes de Web mobile, qui utilisent le design web adaptatif (principalement pour l’interface utilisateur classique).
AEM effectue une mise en page réactive de vos pages en combinant plusieurs mécanismes :
Composant Conteneur de mises en page
Ce composant fournit un système de paragraphes/grille qui permet d’ajouter et de positionner des composants dans une grille réactive. Il peut être utilisé comme système de paragraphes (parsys) par défaut pour votre page et mis à la disposition des créateurs dans l’explorateur de composants.
Le composant Conteneur de dispositions par défaut est défini sous :
/libs/wcm/foundation/components/responsivegrid
Vous pouvez définir des conteneurs de mises en page :
en tant que composant que l’utilisateur peut ajouter à une page ;
comme système de paragraphes par défaut pour la page ;
les deux.
Le conteneur de dispositions peut être utilisé de manière standard pour la page, tout en permettant à l’utilisateur d’y ajouter d’autres conteneurs de mises en page, par exemple, pour contrôler les colonnes.
Mode Disposition
Une fois que le conteneur de disposition est positionné sur la page, vous pouvez utiliser la
Disposition pour positionner le contenu dans la grille réactive.
Émulateur
Permet de créer et de modifier des sites réactifs qui réorganisent la disposition en fonction de l’appareil ou de la taille de la fenêtre, en redimensionnant les composants de manière interactive. L’utilisateur peut ensuite afficher un aperçu du contenu à l’aide de l’émulateur.
Bien que le composant Conteneur de mises en page soit disponible dans l’IU classique, il n’est entièrement fonctionnel et pris en charge que dans l’interface utilisateur optimisée pour les écrans tactiles.
Grâce à ces mécanismes de grille responsive, vous pouvez effectuer les opérations suivantes :
Dans une installation prête à l’emploi, une mise en page responsive a été configurée pour le site de référence We.Retail. Vous devez encore activer le composant Conteneur de dispositions pour d’autres pages.
Ces tâches vous permettent d’afficher l’émulateur en responsive design sur votre site.
Pour permettre à l’émulateur de prendre en charge vos pages, vous devez enregistrer vos composants Page. Voir Enregistrement de composants de page en vue de la simulation.
Pour spécifier les groupes d’appareils qui s’affichent dans la liste des appareils de l’émulateur, voir Définition des groupes de périphériques.
Pour inclure l’émulateur, vous devez lier votre site aux groupes d’appareils. Consultez Ajout de la liste des périphériques (pour l’interface utilisateur classique et l’interface utilisateur optimisée pour les écrans tactiles).
Ces procédures sont utilisées pour activer le mode Disposition sur votre site.
Les points d’arrêt :
sont utilisés en responsive design ;
peuvent être définis :
définissent un titre et une largeur :
sont visibles en tant que repères dans la partie supérieure de l’éditeur de page lorsque vous utilisez l’émulateur ;
sont hérités de la hiérarchie de nœuds parents et peuvent être remplacés à volonté ;
comportent un point d’arrêt par défaut, qui couvre tout ce qui se trouve au-delà du dernier point d’arrêt configuré.
Ils peuvent être définis à l’aide de CRXDE Lite ou de code XML.
Si vous configurez un nouveau projet :
Si vous migrez un projet existant (avec du contenu existant), vous devez :
ajouter des points d’arrêt aux modèles ;
ajouter les mêmes points d’arrêt aux pages existantes.
Comme l’héritage est en cours d’opération, vous pouvez le limiter à la page racine de votre contenu.
À l’aide de CRXDE Lite (ou équivalent), accédez à l’un des éléments suivants :
jcr:content
de votre pageSous jcr:content
, créez le nœud :
cq:responsive
nt:unstructured
En dessous, créez le nœud :
breakpoints
nt:unstructured
Sous le nœud Points d’arrêt, vous pouvez créer un nombre illimité de points d’arrêt. Chaque définition correspond à un nœud unique avec les propriétés suivantes :
<descriptive name>
nt:unstructured
String
* <descriptive title seen in Emulator>
*Decimal
* <value of breakpoint>
*Les points d’arrêt se trouvent à l’intérieur de la section <jcr:content>
du fichier .context.html
sous le dossier de modèles (ou de contenu) approprié.
Exemple de définition :
<cq:responsive jcr:primaryType="nt:unstructured">
<breakpoints jcr:primaryType="nt:unstructured">
<phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
<tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
</breakpoints>
</cq:responsive>
Cette opération est nécessaire uniquement si le composant Page ne repose pas sur le composant Page de base.
Copiez le nœud cq:infoProviders
ci-dessous dans votre composant Page parent :
/libs/foundation/components/page/cq:infoProviders/responsive
Ces procédures sont nécessaires afin de redimensionner des composants en mode Disposition.
Pour définir le système de paragraphes principal de votre page pour qu’il soit un conteneur de mises en page, vous devez définir le système de paragraphes de la façon suivante :
wcm/foundation/components/responsivegrid
Dans :
Les deux exemples ci-dessous illustrent la définition :
HTL :
<sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>
JSP :
<cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
AEM utilise le langage LESS pour générer les parties de code CSS nécessaires, qui doivent être incluses dans vos projets.
Vous devez également créer une bibliothèque cliente pour fournir des appels de configuration et de fonction supplémentaires. L’extrait LESS ci-dessous est un exemple du code minimal à ajouter à votre projet :
@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";
/* maximum amount of grid cells to be provided */
@max_col: 12;
/* default breakpoint */
.aem-Grid {
.generate-grid(default, @max_col);
}
/* phone breakpoint */
@media (max-width: 768px) {
.aem-Grid {
.generate-grid(phone, @max_col);
}
}
/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
.aem-Grid {
.generate-grid(tablet, @max_col);
}
}
Vous trouverez la définition de la grille de base ci-dessous :
/libs/wcm/foundation/clientlibs/grid/grid_base.less
Les composants contenus dans un conteneur responsive sont redimensionnés (ainsi que les éléments DOM HTML correspondants) en fonction de la taille de la grille responsive. Par conséquent, dans ce cas, il est recommandé d’éviter (ou de mettre à jour) les définitions d’éléments DOM à largeur fixe (contenus).
Par exemple :
Avant :
width=100px
Après :
max-width=100px
Tout redimensionnement d’un composant dans la grille déclenche les programmes d’écoute ci-dessous de façon appropriée :
beforeedit
beforechildedit
afteredit
afterchildedit
Pour redimensionner et mettre à jour correctement le contenu d’une image adaptative incluse dans une grille responsive, vous devez ajouter un ensemble afterEdit
au programme d’écoute REFRESH_PAGE
dans le fichier EditConfig
de chaque composant contenu.
Par exemple :
<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />
Le mécanisme d’image adaptative est disponible par le biais d’un script qui contrôle la sélection de l’image appropriée pour la taille actuelle de la fenêtre. Il est activé une fois que le modèle DOM est prêt ou lors de la réception d’un événement dédié. Actuellement, la page doit être actualisée de manière à refléter correctement le résultat de l’action de l’utilisateur.
Pour que les bibliothèques clientes de feuilles de style personnalisées fonctionnent correctement tant dans un environnement de création que dans un environnement de publication, elles doivent être chargées dans l’en-tête.
Ces tâches permettent aux créateurs de faire glisser des instances du composant Conteneur de mises en page dans la page.
Pour permettre aux créateurs d’ajouter d’autres grilles responsive dans des pages de contenu, vous devez activer le composant Conteneur de mises en page pour la page. Vous pouvez effectuer cette opération à l’aide de l’une des fonctions suivantes :
Environnement de création
Utilisez le mode Conception pour activer le composant Conteneur de mises en page pour une page.
Définition du composant
Lors de la définition du composant, utilisez allowedComponent
ou une inclusion statique.
Vous pouvez configurer le nombre de colonnes disponibles pour chaque instance spécifique du conteneur de mises en page.
Environnement de création
Vous pouvez configurer le nombre de colonnes disponibles pour chaque instance spécifique du conteneur de mises en page.
À cet effet, utilisez le mode Conception, puis ouvrez la boîte de dialogue de conception pour le conteneur nécessaire. Vous pouvez spécifier le nombre de colonnes disponibles pour le positionnement et le redimensionnement. La valeur par défaut est 12.
XML
Les définitions de la grille responsive sont spécifiées dans :
etc/design/<*your-project-name*>/.content.xml
Les paramètres ci-dessous peuvent être définis :
Nombre de colonnes disponibles :
columns="{String}8"
Composants qui peuvent être ajoutés au composant actif :
components="[/libs/wcm/foundation/components/responsivegrid, ...