Disposition réactive
AEM vous propose une disposition réactive des pages à l’aide du composant Conteneur de disposition.
TIP- Pour les administrateurs de site, les détails de la configuration du conteneur de mises en page pour vos sites sont décrits dans le document Configuration du conteneur et du mode de mise en page.
- Pour les développeurs, les détails du conteneur de disposition et de la grille réactive sont décrits dans le document The Responsive Design qui fournit des conseils et des astuces pour l’utilisation des conteneurs de disposition et de la grille réactive lors de la conception de votre site.
Vue d’ensemble
Le composant conteneur de disposition fournit un système de paragraphes qui permet de positionner des composants sur une grille réactive. Cette grille peut réorganiser la disposition en fonction de la taille et du format de la fenêtre/l’appareil. Le composant est utilisé avec le mode Disposition, ce qui permet de créer et de modifier votre disposition réactive en fonction de l’appareil.
Le conteneur de mise en page :
- Permet un alignement horizontal sur la grille, ainsi que la possibilité de placer côte à côte les composants dans la grille et de définir quand ils doivent être réduits/développés.
- Il utilise des points d’arrêt prédéfinis (par exemple, pour le téléphone, la tablette, etc.) pour vous permettre de définir le comportement requis du contenu pour l’orientation/les appareils associés.
- Par exemple, vous pouvez personnaliser la taille du composant ou décider s’il peut être affiché sur des appareils spécifiques.
- Il peut être imbriqué pour permettre le contrôle des colonnes.
L’utilisateur ou l’utilisatrice peut ensuite afficher le rendu du contenu pour des appareils spécifiques à l’aide de l’émulateur.
AEM effectue une mise en page réactive de vos pages en combinant plusieurs mécanismes :
-
Composant Conteneur de mise en page
Ce composant, qui est disponible dans l’explorateur de composants, fournit un système de paragraphes/grille qui permet d’ajouter et de positionner des composants dans une grille réactive. Il peut également être défini comme le système de paragraphes par défaut de votre page.
-
Une fois que le conteneur de disposition est positionné sur la page, vous pouvez utiliser le mode Disposition pour placer le contenu dans la grille réactive.
-
Émulateur
Vous pouvez ainsi créer et modifier des sites web réactifs qui réorganisent la disposition en fonction de la taille de l’appareil ou de la fenêtre en redimensionnant les composants de manière interactive. L’utilisateur ou l’utilisatrice peut alors voir comment le contenu est rendu à l’aide de l’émulateur.
Grâce à ces mécanismes de grille réactive, vous pouvez :
- utiliser des points d’arrêt pour définir différentes mises en page de contenu en fonction de la largeur de l’appareil (selon le type et l’orientation de l’appareil) ;
- utiliser ces points d’arrêt et les mises en page de contenu pour veiller à ce que le contenu s’ajuste à la taille de la fenêtre du navigateur sur le poste de travail ;
- utiliser l’alignement horizontal sur la grille, ce qui permet de placer les composants dans la grille, de les redimensionner selon les besoins et de définir quand ils doivent être réduits ou développés pour être côte à côte ou l’un au-dessus de l’autre ;
- masquer des composants pour des mises en page spécifiques à certains appareils ;
- contrôler les colonnes.
Selon votre projet, le conteneur de disposition peut être utilisé comme système de paragraphes par défaut pour vos pages ou comme composant pouvant être ajouté à votre page par le biais de l’explorateur de composants (ou les deux).
NOTEDéfinitions de mise en page, émulation d’appareil et points d’arrêt
Lorsque vous créez le contenu de votre site web, vous voulez être certain que celui-ci sera affiché correctement sur l’appareil utilisé pour le consulter :
Dans AEM, vous pouvez définir des dispositions qui dépendent de la largeur de l’appareil :
-
L’émulateur vous permet d’émuler ces mises en page sur divers appareils. Tout comme le type d’appareil, l’orientation, qui est sélectionnée à l’aide de l’option Rotation du périphérique, peut avoir une incidence sur le point d’arrêt sélectionné lors du changement de largeur.
-
Les points d’arrêt sont des points qui séparent les définitions de mise en page.
- Ils définissent la largeur maximale (en pixels) de n’importe quel appareil à l’aide d’une mise en page spécifique.
- Les points d’arrêt sont généralement valides pour plusieurs appareils en fonction de la largeur de leur écran.
- La plage d’un point d’arrêt s’étend sur la gauche, jusqu’au point d’arrêt suivant.
- Vous ne pouvez pas sélectionner le point d’arrêt. La sélection de l’appareil et de l’orientation permet de sélectionner automatiquement le point d’arrêt adéquat.
L’appareil Bureau, qui ne possède pas de largeur spécifique, est associé au point d’arrêt par défaut (c’est-à-dire tout ce qui se trouve au-dessus du dernier point d’arrêt configuré).
NOTELors de l’utilisation de l’émulateur, vous sélectionnez un appareil spécifique pour l’émulation et la définition de disposition. Le point d’arrêt associé est également mis en surbrillance. Toutes les modifications apportées à la disposition s’appliquent à d’autres appareils auxquels s’applique le point d’arrêt. En d’autres termes, tous les appareils placés à gauche du marqueur de point d’arrêt actif, mais avant le marqueur de point d’arrêt suivant.
Par exemple, lorsque vous sélectionnez l’appareil iPhone 6 Plus (défini avec une largeur de 540 pixels) pour l’émulation et la disposition, le point d’arrêt Téléphone (défini sur 768 pixels) est également activé. Toutes les modifications apportées à la mise en page pour l’iPhone 6 s’appliquent aux autres appareils sous le point d’arrêt Téléphone, tel que l’iPhone 5 (défini sur 320 pixels).
Sélection d’un appareil à émuler
-
Ouvrez la page requise en vue de la modifier. Par exemple :
http://<host>:<port>/editor.html/content/wknd/en/sports/la-skateparks.html -
Sélectionnez l’icône Émulateur dans la barre d’outils supérieure :
-
La barre d’outils de l’émulateur s’ouvre.
La barre d’outils de l’émulateur affiche des options de mise en page supplémentaires :
- Rotation de l’appareil : permet de faire pivoter un appareil de l’orientation verticale (portrait) à l’orientation horizontale (paysage), et inversement.
- Sélectionner un périphérique : permet de sélectionner un appareil spécifique à émuler dans une liste (pour plus d’informations, voir l’étape suivante).
-
Pour sélectionner un appareil spécifique à émuler, vous pouvez effectuer l’une des opérations suivantes :
- utiliser l’icône Sélectionner un périphérique et sélectionner l’appareil dans la liste déroulante ;
- Sélectionnez l’indicateur d’appareil dans la barre d’outils de l’émulateur.
-
Une fois un appareil spécifique sélectionné, vous pouvez visualiser les éléments suivants :
- Marqueurs actifs de l’appareil sélectionné (iPad, par exemple).
- Marqueurs actifs du point d’arrêt approprié (Tablette, par exemple).
- La ligne pointillée bleue représente le pli pour l’appareil sélectionné (ici, iPhone 6 Plus en mode Paysage).
- Le pli peut également être considéré comme un saut de ligne de page (à ne pas confondre avec les points d’arrêt) pour le contenu. Il est affiché à des fins pratiques pour indiquer la partie du contenu que l’utilisateur voit sur l’appareil avant de faire défiler l’écran.
- La ligne du pli n’est pas affichée si la hauteur de l’appareil émulé est supérieure à la taille de l’écran.
- Le pli est affiché pour faciliter le travail de l’auteur et n’apparaît pas sur la page publiée.
Ajout d’un conteneur de mise en page et de son contenu (mode d’édition)
Un conteneur de mise en page est un système de paragraphes qui présente les caractéristiques suivantes :
- Il contient d’autres composants.
- Il définit la mise en page.
- Il répond aux modifications.
NOTE-
Le conteneur de mise en page est disponible en tant que composant standard dans l’explorateur de composants. À partir de là, vous pouvez le faire glisser à l’emplacement requis sur la page, après quoi vous pouvez voir l’espace réservé Faire glisser les composants ici.
-
Vous pouvez ensuite ajouter des composants au conteneur de mise en page, qui contiendront le contenu proprement dit :
Sélection et exécution d’une action sur un conteneur de mise en page (mode d’édition)
Comme pour d’autres composants, vous pouvez sélectionner un conteneur de disposition (en mode Modifier), puis agir sur celui-ci (le couper, le copier et le supprimer) :
CAUTION-
Si vous placez le pointeur de la souris sur l’espace réservé de la grille ou le sélectionnez, le menu d’actions s’affiche.
Vous devez sélectionner l’option Parent.
-
Si le composant de mise en page est imbriqué, la sélection de l’option Parent présente une sélection déroulante, ce qui vous permet de sélectionner le conteneur de mise en page imbriqué ou ses parents.
Lorsque vous placez le pointeur de la souris sur les noms de conteneurs dans la liste déroulante, leurs contours s’affichent sur la page.
- Les contours du conteneur de mises en page imbriqué du plus bas niveau s’affichent en bleu.
- Les contours de chaque conteneur successif s’affichent dans une nuance plus claire de bleu.
-
La grille entière est mise en surbrillance avec son contenu. La barre d’outils s’affiche. Vous pouvez alors sélectionner une action comme Supprimer.
