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

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.

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 :

Configuration de l’émulateur en responsive design configuring-the-responsive-emulator

Ces tâches vous permettent d’afficher l’émulateur en responsive design sur votre site.

Enregistrement des composants de page pour l’émulation register-your-page-components-for-emulation

Pour permettre à l’émulateur de prendre en charge vos pages, vous devez enregistrer vos composants Page. Voir Enregistrement des composants de page pour la simulation.

Définition des groupes d’appareils specify-the-device-groups

Pour spécifier les groupes d’appareils qui apparaissent dans la liste Périphériques de l’émulateur, voir Spécification des groupes d’appareils.

Lier votre site aux groupes d’appareils spécifiés link-your-site-to-the-specified-device-groups

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

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

Ces procédures sont utilisées pour activer le mode Disposition sur votre site.

Configuration des points d’arrêt configure-the-breakpoints

Les points d’arrêt :

Ils peuvent être définis à l’aide de CRXDE Lite ou de code XML.

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

Ajout d’un fournisseur d’informations réactif add-a-responsive-information-provider

Copiez le nœud cq:infoProviders ci-dessous dans votre composant Page parent :

/libs/foundation/components/page/cq:infoProviders/responsive

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

Ces procédures sont nécessaires afin de redimensionner des composants en mode Disposition.

Définition du conteneur de mises en page comme système de paragraphes principal set-layout-container-as-main-parsys

Pour définir le parsys principal de votre page comme un conteneur de mises en page, vous devez définir le parsys comme suit :

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 également 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 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 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’image adaptative 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.

Activation du composant Conteneur de mises en page pour la page enable-the-layout-container-component-for-page

Ces tâches permettent aux auteurs de faire glisser des instances de Conteneur de mises en page sur la page.

Activation du composant Conteneur de mises 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 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 :

Configuration de la grille du conteneur de mises 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 mises en page :