AEM permet d’avoir une mise en page réactive pour vos pages à l’aide de la fonction Conteneur de mises en page composant.
Vous disposez ainsi d’un système de paragraphes qui vous permet de positionner les composants dans une grille réactive. Cette grille peut réorganiser la mise en page en fonction de l’appareil/de la taille de fenêtre et du format. Le composant est utilisé conjointement avec la fonction Disposition mode, qui vous permet de créer et de modifier votre mise en page 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.
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.
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.
Bien que le composant conteneur de mise 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.
AEM effectue une mise en page réactive de vos pages en combinant plusieurs mécanismes :
Composant Conteneur de mise en page
Ce composant est disponible dans la explorateur de composants et fournit un système grid-paragraph 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 mises en page est positionné sur la page, vous pouvez utiliser le mode Mise en page 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 mise en page en fonction de la taille de l’appareil ou de la fenêtre en redimensionnant les composants de manière interactive. L’utilisateur peut alors voir comment le contenu sera rendu à l’aide de l’émulateur.
Grâce à ces mécanismes de grille réactive, vous pouvez :
En fonction de votre projet, le conteneur de mise en page peut être utilisé en tant que système de paragraphes par défaut pour vos pages ou en tant que composant pouvant être ajouté à votre page via l’explorateur de composants (ou les deux).
Adobe fournit Documentation GitHub de la mise en page réactive en tant que référence pouvant être fournie aux développeurs front-end pour leur permettre d’utiliser la grille AEM en dehors d’AEM, par exemple, lors de la création de maquettes de HTML statiques pour un site d’ futur.
L’utilisation des mécanismes ci-dessus est activée par une configuration du modèle. Pour plus d’informations, consultez la section Configuration d’une mise en page réactive.
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 :
AEM permet de définir des mises en page en fonction 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.
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é).
Il est possible de définir des points d’arrêt pour chaque appareil, mais cela augmenterait la charge de travail requise pour la définition des mises en page et la maintenance.
Lors de l’utilisation de l’émulateur, vous sélectionnez un appareil spécifique pour l’émulation et la définition de mise en page. Le point d’arrêt associé est également mis en surbrillance. Toute modification de mise en page que vous apportez sera applicable aux autres appareils auxquels s’applique le point d’arrêt, c’est-à-dire aux appareils situé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 mise en page, 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).
Ouvrez la page requise en vue de la modifier. Par exemple :
http://localhost:4502/editor.html/content/we-retail/us/en/experience.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 du périphérique - Permet de faire pivoter un appareil de l’orientation verticale (portrait) à l’orientation horizontale (paysage), et inversement.
Sélectionner un appareil : 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 :
Une fois un appareil spécifique sélectionné, vous pouvez visualiser les éléments suivants :
Un conteneur de mise en page est un système de paragraphes qui présente les caractéristiques suivantes :
S’il n’est pas déjà disponible, le conteneur de mise en page doit être explicitement activé pour un système de paragraphes ou une page (en utilisant le mode de conception, par exemple).
Le conteneur de mise en page est disponible en tant que composant standard dans l’explorateur de composants. De là, vous pouvez le faire glisser vers l’emplacement souhaité sur la page, après lequel vous verrez 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 :
À l’instar des autres composants, vous pouvez sélectionner un conteneur de mise en page, puis effectuer une opération (couper, copier, supprimer) sur ce dernier (en mode d’édition) :
Un conteneur de mise en page étant un système de paragraphes, la suppression du composant entraîne la suppression de la grille de mise en page et de tous les composants (ainsi que de leur contenu) qu’il contient.
Si vous pointez ou sélectionnez l’espace réservé de la grille, 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.
Cette opération sélectionne l’ensemble de la grille avec son contenu. La barre d’outils s’affiche. Vous pouvez alors sélectionner une action comme Supprimer.
Vous pouvez définir une mise en page distincte pour chaque point d’arrêt (déterminée par l’orientation et le type d’appareil émulé).
Pour configurer la mise en page d’une grille réactive mise en œuvre avec le conteneur de mise en page, vous devez utiliser le mode Mise en page.
Le mode Mise en page peut être activé de deux façons.
À l’aide du menu de mode de la barre d’outils, en sélectionnant le mode Mise en page.
Lors de la modification d’un composant individuel.
Une fois le mode Mise en page sélectionné, vous pouvez effectuer diverses actions sur une grille :
Redimensionnez les composants de contenu à l’aide des points bleus. Le redimensionnement s’accroche toujours à la grille. Lors du redimensionnement, la grille d’arrière-plan s’affiche pour faciliter l’alignement :
Les proportions et les rapports sont conservés lorsque des composants, tels que des images, sont redimensionnés.
Cliquez sur un composant de contenu. La barre d'outils permet d'effectuer les opérations suivantes :
Parent
Permet de sélectionner l’intégralité du composant Conteneur de mises en page pour effectuer une action.
Flotter sur une nouvelle ligne
Le composant est déplacé vers une nouvelle ligne selon l’espace disponible dans la grille.
Masquer le composant
Le composant devient invisible (il peut être restauré à partir de la barre d’outils du conteneur de mise en page).
Dans Disposition vous pouvez cliquer sur le bouton Faire glisser des composants ici pour sélectionner le composant entier. La barre d’outils de ce mode s’affiche.
La barre d’outils propose différentes options en fonction de l’état du composant de mise en page et des composants qui lui sont associés. Par exemple :
Parent : permet de sélectionner le composant parent.
Afficher les composants masqués - Affiche tous les composants, ou individuellement certains composants. Ce nombre indique le nombre actuel de composants masqués. Le compteur indique le nombre de composants masqués.
Rétablir la disposition du point d’arrêt : rétablit la mise en page par défaut. Cela signifie qu’aucune disposition personnalisée ne sera imposée.
Flotter sur une nouvelle ligne : déplace le composant d’une position vers le haut si l’espace est suffisant.
Masquer le composant : masque le composant actif.
Dans l’exemple ci-dessus, les actions de flottement et de masquage sont disponibles, car ce conteneur de mise en page est imbriqué dans un conteneur de mise en page parent.
Afficher les composants
Sélectionnez les composants parents pour afficher la barre d’outils comportant l’option Afficher les composants masqués. Dans cet exemple, deux composants sont masqués.
Si vous sélectionnez l’option Afficher les composants masqués, les composants actuellement masqués s’affichent en bleu à leur position initiale.
Sélectionnez Restaurer tout pour afficher tous les composants masqués.