Structure de l’interface utilisateur d’AEM structure-of-the-aem-ui

L’interface utilisateur d’AEM s’accompagne de plusieurs principes sous-jacents et se compose d’une série d’éléments clés :

Consoles consoles

Redimensionnement et mise en page de base basic-layout-and-resizing

L’interface utilisateur convient à la fois aux appareils mobiles et aux ordinateurs de bureau. Cependant, au lieu de créer deux styles distincts, AEM utilise un seul style qui fonctionne pour tous les écrans et appareils.

Tous les modules utilisent la même disposition de base :

La disposition adhère au style Responsive Design et s’adapte à la taille de l’appareil et de la fenêtre que vous utilisez.

Par exemple, si la résolution passe sous 1 024 pixels (comme c’est le cas sur un appareil mobile), l’affichage est adapté en conséquence :

Barre d’en-tête header-bar

La barre d’en-tête affiche des éléments globaux, parmi lesquels :

Barre d’outils toolbar

Le contenu de cette barre varie en fonction de l’emplacement. La barre d’outils affiche des outils permettant de contrôler la vue ou des ressources dans la page ci-dessous. La barre d’outils est propre au produit, mais elle contient des éléments communs.

Quel que soit l’emplacement, la barre d’outils affiche les actions actuellement disponibles :

Le contenu dépend également du fait qu’une ressource est sélectionnée ou non :

Rail de gauche left-rail

Le rail de gauche peut être ouvert/masqué suivant les besoins afin d’afficher les éléments suivants :

La valeur par défaut est Contenu uniquement (rail masqué).

Création de pages page-authoring

Lors de la création de pages, les zones structurelles sont les suivantes.

Cadre de contenu content-frame

Le contenu de la page est rendu dans le cadre de contenu. Le cadre de contenu est indépendant de l’éditeur, afin de s’assurer qu’il n’y a aucun conflit en raison de CSS ou JavaScript.

Le cadre de contenu se situe dans la partie droite de la fenêtre, sous la barre d’outils.

Cadre d’éditeur editor-frame

Le cadre d’éditeur active les fonctions d’édition.

Le cadre d’éditeur est un conteneur pour l’ensemble des éléments de création de pages. Il se situe au-dessus du cadre de contenu et comprend les éléments suivants :

Panneau latéral side-panel

Il contient trois onglets par défaut. Les onglets Ressources et Composants vous permettent de sélectionner de tels éléments, de les faire glisser du panneau et de les déposer sur la page. L’onglet Arborescence du contenu vous permet d’examiner la hiérarchie du contenu de la page.

Par défaut, le panneau latéral est masqué. Lorsqu’il est sélectionné, il s’affiche sur le côté gauche ou lorsque la largeur de la fenêtre est inférieure à 1 024 pixels, il s’étend sur toute la fenêtre comme, par exemple, sur un appareil mobile.

Panneau latéral – Ressources side-panel-assets

Dans l’onglet Ressources, vous pouvez effectuer une sélection parmi la plage de ressources. Vous pouvez également filtrer selon un terme spécifique ou sélectionner un groupe.

Panneau latéral - Groupes de ressources side-panel-asset-groups

L’onglet Ressources comprend un menu déroulant que vous pouvez utiliser pour sélectionner les groupes de ressources spécifiques.

Panneau latéral – Composants side-panel-components

Dans l’onglet Composants, vous pouvez effectuer une sélection parmi la plage de composants. Vous pouvez également filtrer selon un terme spécifique ou sélectionner un groupe.

Panneau latéral - Arborescence de contenu side-panel-content-tree

Dans l’onglet Arborescence de contenu, vous pouvez afficher la hiérarchie du contenu de la page. Cliquer sur une entrée dans l’onglet permet d’accéder à l’élément et de le sélectionner sur la page dans l’éditeur.

Recouvrements overlays

Ils recouvrent le cadre de contenu et sont utilisés par les calques pour appliquer le mécanisme d’interaction de manière transparente avec les composants et leur contenu.

Les recouvrements résident dans le cadre d’éditeur (avec tous les autres éléments de création de pages) même si, en fait, ils recouvrent les composants appropriés dans le cadre de contenu.

Calque layer

Un calque est un groupe indépendant de fonctionnalités pouvant être activées pour :

Les calques fournissent des fonctionnalités sophistiquées pour toute la page, par opposition aux actions spécifiques sur un composant individuel.

AEM s’accompagne de plusieurs calques qui sont déjà implémentés pour la création de pages. Il s’agit notamment des calques d’édition, de prévisualisation et d’annotation.

Sélecteur de calques layer-switcher

Le sélecteur de calques vous permet de choisir le calque à utiliser. Lorsqu’il est fermé, il indique le calque en cours d’utilisation.

Le sélecteur de calques se présente sous la forme d’un menu déroulant dans la barre d’outils (dans la partie supérieure de la fenêtre, à l’intérieur du cadre d’éditeur).

Barre d’outils des composants component-toolbar

Lorsque vous cliquez sur une instance d’un composant (simple clic ou double-clic lent), sa barre d’outils est affichée. La barre d’outils contient les actions spécifiques (par exemple, copier, coller, ouvrir l’éditeur) qui sont disponibles pour l’instance du composant sur la page.

En fonction de l’espace disponible, les barres d’outils de composant sont placées dans le coin supérieur, ou inférieur, droit du composant approprié.

Informations supplémentaires further-information

Pour plus d’informations techniques, consultez l’ensemble de documentation JS relative à l’éditeur de page.

Shell unifié unified-shell

Voir AEM as a Cloud Service on Unified Shell si vous utilisez le Shell unifié comme interface utilisateur AEM.

Si vous avez besoin d’effectuer, ou avez déjà fait, des personnalisations, l’option Unified Shall peut être désactivée :