Configuration du conteneur et du mode de disposition configuring-layout-container-and-layout-mode

Découvrez comment configurer le conteneur et le mode de disposition pour activer les dispositions réactives pour les auteurs de contenu.

Vue d’ensemble overview

La disposition réactive est un mécanisme qui permet de réaliser un design web réactif. Cela permet à l’auteur de contenu de créer des pages web dont la disposition et les dimensions dépendent des appareils utilisés par leurs utilisateurs.

AEM effectue une mise en page réactive de vos pages en combinant plusieurs mécanismes :

Grâce à ces mécanismes de grille réactive, vous pouvez :

Activation de l’émulateur enabling-emulator

L’archétype de projet et le modèle de site standard sont déjà activés pour utiliser l’émulateur. Si vous avez développé votre propre contenu non basé sur les composants principaux ou l’archétype, consultez le document Responsive Design pour plus d’informations sur la manière de développer vos composants lors de l’utilisation de ces fonctionnalités.

Activation du mode Disposition pour votre site activate-layout-mode-for-your-site

Le mode Disposition permet d’utiliser l’émulateur pour ajuster la disposition de votre contenu pour différents appareils. L’exemple de site WKND est déjà activé pour le mode Disposition. Pour activer votre propre site, procédez comme suit.

Configurer les points d’arrêt configure-breakpoints

Les points d’arrêt sont essentiels au Responsive Design et définissent comment et quand le contenu est ajusté sur l’appareil cible. Toutefois, faites attention, car chaque point d’arrêt que vous introduisez génère du travail supplémentaire pour que vos auteurs puissent s’adapter au contenu. Souvent, deux points d’arrêt peuvent suffire, y compris le point d’arrêt par défaut qui est toujours présent. Adobe recommande de ne pas créer plus de trois points d’arrêt, y compris la valeur par défaut, c’est-à-dire de ne pas créer plus de deux nœuds sous cq:responsive/breakpoint.

Des points d’arrêt doivent être pris en compte pour les projets nouveaux et existants.

En raison de l’héritage, il vous suffit de le faire pour la page racine de votre contenu.

Configurer des points d’arrêt à l’aide de CRXDE Lite configuring-breakpoints-using-crxde-lite

Configuration des points d’arrêt à l’aide de code XML configuring-breakpoints-using-xml

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>

Activation du redimensionnement des composants pour la page enable-component-resizing-for-the-page

Le redimensionnement des composants en mode Disposition est une partie importante du Responsive Design, qui peut être utilisée dans l’exemple de site WKND. Pour activer votre propre site, procédez comme suit.

Définir le conteneur de mise en page comme parsys (système de paragraphes) principal set-layout-container-as-main-parsys

Pour définir le parsys principal de votre page comme conteneur de mise en page, définissez le parsys en tant que :

wcm/foundation/components/responsivegrid

Dans :

Les deux exemples ci-dessous illustrent la définition :

Inclure le fichier CSS réactif include-the-responsive-css

CSS pour les points d’arrêt à l’aide de LESS css-for-breakpoints-using-less

AEM utilise LESS pour générer des parties de la feuille de style CSS nécessaire, qui doivent être incluses pour vos projets.

Vous devez créer une bibliothèque cliente pour fournir des appels de configuration et de fonction supplémentaires. L’extrait LESS suivant est un exemple du minimum à 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);
  }
}

La définition de la grille de base se trouve sous :

/libs/wcm/foundation/clientlibs/grid/grid_base.less

Observations relatives au style styling-considerations

Les composants contenus dans un conteneur réactif sont redimensionnés (ainsi que les éléments DOM HTML correspondants) en fonction de la taille de la grille réactive. Par conséquent, dans ces circonstances, il est recommandé d’éviter (ou de mettre à jour) les définitions d’éléments DOM à largeur fixe (contenus).

Par exemple :

Redimensionnement et conformité d’images adaptatives resizing-and-adaptive-image-compliance

Tout redimensionnement d’un composant dans la grille déclenche les écouteurs suivants selon les besoins :

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 pour refléter correctement le résultat de l’action de l’utilisateur et de l’utilisatrice.

Activer le composant Conteneur de mise en page pour la page enable-the-layout-container-component-for-page

Pour une mise en page réactive efficace, l’auteur du contenu doit pouvoir faire glisser des instances du composant Conteneur de mise en page sur la page. Cela est déjà activé pour l’exemple de site WKND. Pour activer votre propre site, procédez comme suit.

Activer le composant Conteneur de mise en page pour la modification de pages enable-the-layout-container-component-for-page-editing

Pour permettre aux créateurs d’ajouter d’autres grilles réactives dans des pages de contenu, vous devez activer le composant conteneur de mise en page pour la page. Vous pouvez effectuer cette opération à l’aide de l’une des fonctions suivantes :

Configurer la grille du Conteneur de mise en page configure-the-grid-of-the-layout-container

Vous pouvez configurer le nombre de colonnes disponibles pour chaque instance spécifique du conteneur de disposition en modifiant vos modèles de page.

Grilles réactives imbriquées nested-responsive-grids

La bonne pratique recommandée par Adobe est de conserver la structure aussi plate que possible.

Lorsque vous ne pouvez pas éviter d’utiliser des grilles réactives imbriquées, consultez le document de développement Responsive Design.