Du statique au dynamique : l’évolution de la gestion des modèles
Vous souvenez-vous de l’époque des modèles statiques ? Nous avions une multitude de modèles, chacun avec ses propres composants de page et boîtes de dialogue CQ. C’était un cauchemar de maintenance !
Mais ensuite sont arrivés les modèles modifiables, et tout a changé. Avec cette nouvelle approche, nous pouvons définir un composant d’une seule page et créer plusieurs modèles à partir de celui-ci. Cela ressemble à un rêve devenu réalité, non ?
Mais il y a un piège. Et si nous avons besoin de différentes boîtes de dialogue pour différents modèles ? Avons-nous vraiment besoin de créer des types de modèles distincts pour chacun ? Cela signifierait conserver plusieurs types de modèles et essayer de savoir quel modèle utilise quel type. Ce n’est pas exactement l’utilisation la plus efficace de notre temps.
Gestion des propriétés de page dans AEM
Dans cet article, nous explorerons les défis de la gestion des modèles et comment nous pouvons les surmonter à l’aide des conditions de rendu Granite et des configurations contextuelles.
Lors de la gestion des propriétés d’une page, nous sommes souvent confrontés à un dilemme. Bien que les configurations contextuelles soient idéales pour configurer des configurations au niveau du domaine ou de la langue, elles ne suffisent pas lorsqu’il s’agit de gérer des pages individuelles.
La solution habituelle consiste à mettre à jour la boîte de dialogue Propriétés de la page, mais cette approche présente ses propres limites. Alors, que doit faire un développeur ?
Heureusement, il existe une solution qui combine la puissance des conditions de rendu Granite avec la flexibilité des configurations contextuelles.
Quelle est l’état du rendu du granit ?
La condition de rendu est simplement une logique conditionnelle pour restituer une section spécifique de l’interface utilisateur du composant. Si vous souhaitez une description plus détaillée, vous pouvez lire Documentation officielle d’Adobe.
Un cas d’utilisation réel utilisant à la fois la condition de rendu Granite et la configuration contextuelle
Supposons que nous souhaitions afficher et masquer l’onglet des propriétés de la page en fonction du nom du modèle, qui peut être configuré à l’aide d’une configuration contextuelle sans aucun code codé en dur.
Tout d’abord, nous devrons créer le CAC qui contiendra des champs pour ajouter les noms de modèles et le chemin des onglets à afficher.
Nous allons créer un service de configuration contextuelle qui lira la configuration et fournira le mappage.
public interface PageTabsMappingService {
List<PageTabsMappingConfig> getPageTabsMappingConfigList();
}
Ici PageTabsMappingConfig est juste un POJO classe de haricots qui consiste de une feuille chemin de l’onglet et chemin du modèle.
@Data
public class PageTabsMappingConfig {
private String templatePath;
private String tabPath;
}
Créons maintenant une classe d’implémentation de configuration contextuelle, qui comprendra une capacité de configuration du chemin du modèle et du chemin des onglets.
Nous voulons que cela soit plus convivial pour les auteurs, nous utiliserons donc une source de données personnalisée. Cette source de données se trouve dans ce billet de blog.
Pour cet exemple, nous avons besoin de deux sources de données, une pour le chemin du modèle et une pour les chemins des onglets.
Donc finalement, notre configuration ressemblera à ceci :
@Configuration(label = "Page Tabs Mapping Configuration", description = "Page Tabs Mapping Config", property =
{EditorProperties.PROPERTY_CATEGORY + "=TemplateAndTabs"}, collection = true)
public @interface PageTabsMappingConfiguration {
@Property(label = "Select Template To Be Mapped", description = "Select Template Name To Be Mapped", property = {
"widgetType=dropdown",
"dropdownOptionsProvider=templateDataSource"
},order = 1)
String getTemplatePath();
@Property(label = "Select Tab to be mapped", description = "Select Tab to be mapped", property = {
"widgetType=dropdown",
"dropdownOptionsProvider=tabDataSource"
},order = 2)
String getTabPath();
}
Maintenant allons implémentez le service pour lire cette configuration.
public interface PageTabsMappingService {
List<PageTabsMappingConfig> getPageTabsMappingConfigList(Resource resource);
}
@Component(service = PageTabsMappingService.class,
immediate = true)
@ServiceDescription("Implementation For PageTabsMappingService ")
@Slf4j
public class PageTabsMappingServiceImpl implements PageTabsMappingService {
@Override
public List<PageTabsMappingConfig> getPageTabsMappingConfigList(final Resource resource) {
final ConfigurationBuilder configurationBuilder = Optional.ofNullable(resource)
.map(resource1 -> resource1.adaptTo(ConfigurationBuilder.class))
.orElse(null);
return new ArrayList<>(Optional
.ofNullable(configurationBuilder)
.map(builder -> builder
.name(PageTabsMappingConfiguration.class.getName())
.asCollection(PageTabsMappingConfiguration.class))
.orElse(new ArrayList<>()))
.stream().map(pageTabsMappingConfiguration ->new PageTabsMappingConfig(pageTabsMappingConfiguration.getTabPath(),pageTabsMappingConfiguration.getTemplatePath()))
.collect(Collectors.toList());
}
}
Dans le code ci-dessus, nous lisons la configuration contextuelle et fournissons la liste pour une utilisation ultérieure.
Créons maintenant une condition de rendu pour afficher et masquer les onglets dans les propriétés de la page qui utiliseront la configuration de mappage CAC.
Nous utiliserons le modèle Sling pour la même chose. Ceci sera invoqué chaque fois que les onglets Propriétés de la page sont ouverts, en mode éditeur de page, assistant de création ou assistant sur les sites.
@Model(adaptables = SlingHttpServletRequest.class)
public class TabsRenderConditionModel {
@Self
private SlingHttpServletRequest request;
@OSGiService
private PageTabsMappingService pageTabsMappingService;
/**
* This is to set render condition for tabs.
*/
@PostConstruct
public void init() {
final var resource = request.getResource()
.getResourceResolver().getResource("/content");
//We are considering root level site config since this will be global.
//For multitenant environment you can add additional OSGI Config and use the path accordingly
final List<PageTabsMappingConfig> tabRenderConfig =
pageTabsMappingService.getPageTabsMappingConfigList(resource);
final var name = Optional.ofNullable(request.getResource().getParent())
.map(Resource::getName).orElse(StringUtils.EMPTY);
final var props = (ValueMap) request.getAttribute("granite.ui.form.values");
final var template = Optional.ofNullable(props)
.map(props1 -> props1.get("cq:template", String.class))
.orElse(StringUtils.EMPTY);
final var renderFlag = tabRenderConfig.stream()
.anyMatch(tabConfig ->
BooleanUtils.and(new Boolean[]{StringUtils.equals(name, tabConfig.getTabName()),
StringUtils.equals(template, tabConfig.getTemplatePath())}));
request.setAttribute(RenderCondition.class.getName(),
new SimpleRenderCondition(renderFlag));
}
}
Après avoir lu le modèle, nous vérifions simplement si ce mappage de nom d’onglet donné existe ou non. Sur cette base, en utilisant la simple condition de rendu, nous définissons un indicateur pour afficher et masquer l’onglet.
Il est maintenant temps d’utiliser ce modèle Sling dans le fichier de script de condition de rendu réel. Dans notre répertoire de projet, supposons /apps/my-project/render-conditions/tabs-renderconditions
Créer des onglets-renderconditions.html
Et ajoutez du contenu comme :
<sly data-sly-use.tab="com.mybrand.demo.models.TabsRenderConditionModel" />
Construire un onglets douaniers sous le dossier du modèle de page de base comme suit:
/apps/my-project/components/structure/page/base-page/tabs -landing-page-tab -home-page-tab -country-page-tab -state-page-tab -hero-page-tab
Et notre cq:boîte de dialogue fera référence à la même chose que ce:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured">
<content jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<tabs jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<additionalHeroPage
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/include"
path="/mnt/override/apps/my-project/components/structure/page/tabs/additional-hero-page"/>
<additionalStatePage
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/include"
path="/mnt/override/apps/my-project/components/structure/page/tabs/additionalstatepage"/>
</items>
</tabs>
</items>
</content>
</jcr:root>
Et notre sample onglet avec rendre la configuration des conditions ressemblera à ce:
<additionalHeroPage
cq:showOnCreate="{Boolean}true"
jcr:primaryType="nt:unstructured"
jcr:title="Additional Hero Page Setting"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<section1
jcr:primaryType="nt:unstructured"
jcr:title="Settings"
sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
<items jcr:primaryType="nt:unstructured">
<testProperty
cq:showOnCreate="{Boolean}true"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Test Property"
fieldLabel="Test Property"
name="./testProp"
required="{Boolean}true">
<granite:data
jcr:primaryType="nt:unstructured"
cq-msm-lockable="./testProp"/>
</testProperty>
</items>
</section1>
</items>
</column>
</items>
<granite:rendercondition
jcr:primaryType="nt:unstructured"
sling:resourceType="my-project/render-conditions/tabs-renderconditions"/>
</additionalHomePage>
Dans la configuration CAC du modèle et des onglets ci-dessous, l’onglet « Paramètres supplémentaires de la page d’accueil » sera affiché dans les propriétés de la page lorsque un l’auteur est ouvrir une page créée à l’aide du modèle de page de héros.
Ffinalement, lorsque vous ouvrez une page créée avec camodèle configuré, comme le Page des héros dans l’image ci-dessousvous pouvez voir les onglets configurés pour cela.
Trucs et astuces AEM plus utiles
J’espère que vous comprenez mieux comment surmonter certains des défis liés à la gestion des modèles dans AEM.
Pour plus de trucs et astuces AEM, suivez-nous sur notre Blog Adobe !
Source link