En mode publication, AEM est capable de générer tout code html souhaité. Mais pour le mode authoring, AEM est livré avec de nombreux éditeurs prêts à l'emploi. Et ils font des suppositions sur le code HTML. Alors soit suivez ces hypothèses, ou vous devez personnaliser ces éditeurs ou créer vos propres. La dernière cause beaucoup d'efforts, et les développeurs AEM moins expérimentés échoueront.
fait les AEM hypothèses suivantes sur les composants:
Première hypothèse est: « Les composants sont un <div> avec quelque chose à l'intérieur ». Cela implique que les composants sont des blocs rectangulaires.
A titre d'exemple une liste simple:
<ul>
<li>…
<li>…
<li>…
</ul>
Cela ne fonctionnera pas. Mais la solution est simple, car vous avez juste besoin d'envelopper avec un <div> en mode de création. Le légèrement/htl-markup est assez simple.
<div data-sly-unwrap=”${wcmmode='disabled'}>
<ul>
<li>…
<li>…
<li>…
</ul>
</div>
Un problème peut survenir si les styles CSS ne fonctionnent pas avec la div supplémentaire. Ensuite, les développeurs AEM doivent ajouter CSS spécifique à la création - ce qui est préférable d'éviter. Avec l'interface utilisateur classique, le problème était encore pire, car AEM/CQ a ajouté beaucoup de DIV à l'intérieur du fichier html (juste pour la création).
problème suivant est, si les éléments de la liste sont plus complexes - et sont des composants eux-mêmes. Ensuite, juste pour la création, il devrait être DIVs dans DIVs.
Texte enrichi: Un autre problème courant avec les concepteurs non-AEM est le texte formaté. AEM est livré avec un puissant éditeur de texte enrichi. Ici la solution est, que le concepteur jette un coup d'oeil dans l'éditeur de richesse de texte, ses dispositifs et le html créé. Normalement, le concepteur change simplement le html et le css pour s'entendre avec l'éditeur richtext tel qu'il est livré avec AEM.
Tables: Les différentes tables sont des tables. AEM est livré avec un puissant éditeur de table. Mais le code HTML n'est souvent pas suffisant. Souvent, l'éditeur de table est pris, mais pour rendre le html de l'éditeur de table est analysé (par exemple avec JSOUP), puis transformé pour répondre à vos besoins (à l'intérieur d'une classe Sling Model).
Disposition: Dans AEM, vous pouvez empiler des composants à l'intérieur de composants pour créer une disposition complexe. Le composant le plus externe est une page - qui est un rectangle par défaut.
composants à l'intérieur vous avez les options suivantes:
- Juste le contenu du composant
- Une mise en page fixe du contenu et des sous-composants. Un sous-composant est à nouveau rectangle. Et un sous-composant peut être juste un wrapper, où un utilisateur humain (auteur) peut abandonner n'importe quel autre composant arbitraire (n'importe quel moyen: son configurable lequel)
- Un parsys, qui est un composant prêt à l'emploi pour un système de paragraphe. C'est un flux descendant de composants de même largeur. Dans une certaine mesure, même avec des largeurs différentes. Ici aussi, l'auteur humain peut ajouter, enlever et ré-ordonner tous les composants qu'il/elle veut. (Et il peut être limité par la configuration)
- Certains colonne de soutien - mais souvent utilisé
- Tout ce que vous voulez - mais la fonctionnalité d'édition est alors pas out-of-the-box.
Parsys: Ce est un composant très puissant, et les développeurs ont tendance à prendre AEM pour tout. Donc Parsys devrait être votre meilleur ami. Par exemple, vous avez un composant carrousel. Les diapositives du carrousel sont elles-mêmes des composants. Ainsi, en mode authoring, le carrousel fonctionne tel quel - et dispose simplement d'un bouton «Commencer à éditer». Puis le carrousel se convertit en un parsys de diapositives carrousel. Dans les analyses, vous pouvez ajouter des diapositives, les modifier, les supprimer et les réorganiser. Enfin, l'utilisateur peut cliquer sur le bouton "terminer l'édition" - et le parsys convertit à nouveau un carrousel.
MAIS tout ce qui précède est assez courant. Dans chaque projet, il y a des composants qui ne s'adaptent pas facilement - et les développeurs d'AEM doivent trouver un moyen de créer.
En résumé pour un designer, ces règles se produisent:
- Publish mode -> Tout va
- Authoring mode -> Seuls les éléments de blocs rectangulaires
- PARSYS est votre meilleur ami. Utilisez-le, même s'il ne ressemble pas à un parsys à la première place.
Espérons que cela a aidé un peu. Peut-être que vos développeurs AEM sont simplement familiers avec le bootstrap et le préfèrent.
Veuillez partager le code que vous avez essayé et les problèmes que vous avez rencontrés. Théoriquement, votre choix de framework/style ne devrait pas avoir d'impact sur l'expérience de création. –
vous devriez leur demander ce qui crée exactement le problème. AEM ne met pas de telles restrictions. – awd