Vous consultez actuellement l'aide de la version:

Le système de style permet à un auteur de modèles de définir des classes de style dans la stratégie de composants, de façon à pouvoir sélectionner ces classes lors de l’édition du composant sur une page. Ces styles peuvent être des variations visuelles du composant, pour lui apporter de la flexibilité.

Grâce à cela, il n’est plus nécessaire de développer un composant personnalisé pour chaque style ni de personnaliser la boîte de dialogue du composant pour permettre une telle fonctionnalité de style. Par ailleurs, les composants réutilisables, plus nombreux, peuvent être facilement et rapidement adaptés aux besoins des créateurs de contenu sans nécessiter de développement AEM en arrière-plan.

Exemple d’utilisation

Les auteurs de modèles doivent pouvoir configurer non seulement la manière dont les composants fonctionnent pour les auteurs de contenu, mais ils doivent aussi pouvoir configurer les variations visuelles possibles des composants.

De même, les auteurs de contenu doivent pouvoir structurer et organiser leur contenu, mais aussi choisir leur présentation visuelle.

Le système de style constitue une solution unifiée pour répondre aux exigences des auteurs de contenu comme de modèles :

  • Les auteurs de modèles peuvent définir des classes de style dans la stratégie des composants.
  • Les auteurs de contenu peuvent sélectionner ces classes dans un menu déroulant lorsqu’ils éditent le composant sur une page pour appliquer les styles correspondants.

La classe de style est ensuite insérée sur l’élément wrapper du composant, de façon à ce que le développeur de composants n’ait pas besoin de gérer les styles (en plus de fournir les CSS des différents styles).

Aperçu

L’utilisation du système de style se passe généralement comme suit.

  1. Le concepteur web crée différentes variations visuelles pour un composant.

  2. Le développeur HTML dispose de la sortie HTML des composants et des variations visuelles à mettre en œuvre.

  3. Le développeur HTML définit les classes CSS qui correspondent à la variation visuelle, à insérer sur l’élément qui enveloppe les composants.

  4. Le développeur HTML met en œuvre le code CSS correspondant (et, en option, le code JS) pour que chaque variation de visualisation ait l’apparence définie.

  5. Le développeur AEM place le code CSS (et en option, JS) fourni dans une bibliothèque cliente et le déploie.

  6. Le développeur AEM ou l’auteur de modèles configure les modèles de page et modifie la stratégie de chaque composant stylisé avec les classes CSS définies, en définissant des noms conviviaux pour chaque style et en déterminant quels styles peuvent être combinés.

  7. L’auteur des pages AEM peut alors choisir les styles conçus dans l’éditeur de pages via le menu de style de la barre d’outils du composant.

Notez que seules les trois dernières étapes sont réalisées dans AEM. Cela signifie que l’ensemble du développement des codes CSS et Javascript peut être réalisé sans AEM.

La mise en œuvre des styles nécessite uniquement le déploiement dans AEM et la sélection des modèles souhaités parmi les composants.

Le diagramme suivant illustre l’architecture du système de style.

aem-style-system

Utilisation

Le Feature Pack 18678 pour AEM 6.3, téléchargeable depuis le partage de modules, est nécessaire pour activer le système de style.

Pour découvrir la fonctionnalité, il faut d’abord créer des styles pour un composant. En vous basant sur la mise en œuvre de la liste de gestion du composant principal de We.Retail, vous pouvez installer le module joint contenant des styles afin de découvrir la fonctionnalité.

Telechargement

Remarque :

Le module de démonstration est conçu pour montrer comment les auteurs peuvent utiliser le système de style plutôt que pour montrer la meilleure manière de le mettre en œuvre.

Ce module ne sera plus nécessaire lorsque We.Retail aura fourni un exemple intégré et indiqué les meilleures pratiques de mise en œuvre.

Les sections suivantes, En tant qu’auteur de contenu et En tant qu’auteur de modèles, décrivent comment tester le système de style à l’aide du module de démonstration et de We.Retail.

Si vous souhaitez utiliser le système de style pour vos propres composants, procédez comme suit :

  1. Installez les CSS en tant que bibliothèques clientes, comme évoqué dans la section Aperçu.
  2. Configurez les classes CSS que vous souhaitez rendre disponibles à vos auteurs de contenu, comme décrit dans la section En tant qu’auteur de modèles.
  3. Les auteurs de contenu peuvent alors utiliser les styles, comme décrit dans la section En tant qu’auteur de contenu.

En tant qu’auteur de contenu

  1. Après avoir installé le module de démonstration du système de style, accédez à la page d’accueil de We.Retail (http://localhost:4502/sites.html/content/we-retail/language-masters/en) (en anglais) et modifiez la page.

  2. Sélectionnez le composant Liste en bas ou en haut du parsys. Ne le confondez pas avec le composant Liste d’articles.

    screen_shot_2017-11-15at162032
  3. Appuyez ou cliquez sur le bouton Styles dans la barre d’outils du composant Liste pour ouvrir le menu des styles et changer l’apparence du composant.

    screen_shot_2017-11-15at162358

    Remarque :

    Dans cet exemple, les styles de disposition (Bloc et Grille) sont mutuellement exclusifs, tandis que les options d’affichage ( Image ou Date) peuvent être combinées. Cela peut être configuré dans le modèle par l’auteur de modèles.

En tant qu’auteur de modèles

  1. Alors que vous modifiez la page d’accueil anglais de We.Retail (http://localhost:4502/sites.html/content/we-retail/language-masters/en) (en anglais), modifiez le modèle de la page via Informations sur la page -> Éditer le modèle.

    screen_shot_2017-11-15at162922
  2. Modifiez la police du composant Liste en appuyant ou cliquant sur le bouton Stratégie du composant. Ne le confondez pas avec le composant Liste d’articles.

    screen_shot_2017-11-15at163133
  3. Dans l’onglet Styles des propriétés, vous pouvez voir comment les styles ont été configurés.

    screen_shot_2017-11-15at163546
    • Nom de groupe : les styles peuvent être regroupés dans le menu des styles que l’auteur du contenu voit pendant la configuration du style du composant.
    • Multiple : permet de sélectionner simultanément plusieurs styles au sein de ce groupe.
    • Nom du style : la description du style que l’auteur de contenu verra pendant la configuration du style du composant.
    • Classes CSS : le nom de la classe CSS associée au style.

    Utilisez les poignées pour définir l’ordre des groupes et des styles au sein des groupes. Utilisez les icônes d’ajout ou de suppression pour ajouter ou supprimer des groupes ou des styles dans les groupes.

Attention :

Pour pouvoir fonctionner, les classes CSS (ainsi que le Javascript nécessaire) configurées en tant que propriétés de style d’une stratégie de composants doivent être déployées en tant que bibliothèques clientes.

Configuration

Remarque :

La version 2 des composants principaux est entièrement équipée pour tirer parti du système de style. Elle ne nécessite aucune configuration supplémentaire.

Procédez comme suit pour activer le système de style pour vos propres composants personnalisés.

Pour qu’un composant fonctionne avec le système de style d’AEM et affiche l’onglet Style dans sa boîte de dialogue de conception, le développeur de composants doit inclure cet onglet à partir du produit, avec les paramètres suivants sur le composant :

  • chemin d’accès = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"

Une fois le composant configuré, les styles définis par les auteurs de pages seront automatiquement insérés par AEM sur l’élément de décoration qu’AEM ajoute automatiquement autour de chaque composant modifiable. Le composant lui-même n’a besoin d’effectuer aucune autre action pour que cela se produise.

Styles avec noms d’éléments

Les développeurs peuvent aussi configurer une liste de noms d’éléments autorisés pour les styles du composant avec la propriété de table de chaînes cq:styleElements. Ensuite, dans l’onglet Styles de la stratégie, dans la boîte de dialogue de conception, l’auteur de modèles peut aussi choisir un nom d’élément pour chaque style. Cela permet de définir le nom de l’élément wrapper.

Cette propriété se définit sur le nœud cq:Component. Par exemple :

  • /apps/weretail/components/content/list@cq:styleElements=[div,section,span]

Attention :

Évitez de définir des noms d’éléments pour les styles pouvant être combinés. Lorsque plusieurs noms d’éléments sont définis, l’ordre de priorité est le suivant :

  1. HTL est prioritaire sur le reste : data-sly-resource="${’path/to/resource’ @ decorationTagName=’span’}
  2. Ensuite, au sein de plusieurs styles actifs, le premier style de la liste des styles configurés dans la stratégie du composant est sélectionné.
  3. Enfin, le nom cq:htmlTag / cq:tagName du composant est considéré comme une valeur de repli.

Cette capacité à définir des noms de styles est utile pour les composants génériques, tels que le conteneur de mise en page ou le composant Fragment de contenu. Cela permet de leur donner davantage de sens.

Cela permet par exemple d’attribuer au conteneur de mise en page des balises comme <main>, <aside>, <nav>, etc.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne