Différencier entre la boîte de dialogue et la boîte de dialogue de conception dans AEM / Blogs / Perficient

La boîte de dialogue des composants AEM est la partie la plus importante d’AEM. Nous ne pouvons pas réutiliser les composants sans la boîte de dialogue des composants AEM.

Qu’est-ce qu’une boîte de dialogue de conception ?

Une boîte de dialogue de conception est un type spécial de boîte de dialogue disponible uniquement en mode conception de page dans AEM. Il permet aux auteurs de personnaliser la conception d’un composant en ajustant les propriétés (ex. couleur, images et mise en page).

Il s’agit d’une boîte de dialogue qui peut stocker du contenu et une configuration pouvant être utilisés sur différentes pages. Ceci est utilisé lorsque nous exigeons que le composant et la configuration soient les mêmes dans toute l’application et qu’ils soient créés dans le même modèle.

Ex. Nous pouvons créer un logo et utiliser la boîte de dialogue de conception pour le composant logo car le logo sera le même dans tout le composant.

À quoi ressemble la boîte de dialogue de conception ?

1. Ouvrez la page de l’auteur et changez le mode d’édition en mode Conception.
   

   Figure : Page d’auteur

2. Vous trouverez ci-dessous les modes de conception du composant image.
   

   Fig : Boîte de dialogue de conception et boîte de dialogue normale

Différences entre la boîte de dialogue et la boîte de dialogue de conception

Fig : Différence entre la boîte de dialogue et la boîte de dialogue de conception

Comment créer une boîte de dialogue de conception

Onglet le composant avant de créer la boîte de dialogue de conception.

Fig : Composant Onglets avant la boîte de dialogue de conception

Étape 1 : Connectez-vous avec crxde lite (http://localhost:4502/crx/de/index.jsp#/apps).

Étape 2 : Accédez à la structure des dossiers (/weretail/components/content/tabs).

Étape 3 : Sélectionnez le composant et créez un nœud appelé cq:design_dialog.

Fig : Créer un nœud

Étape 4 : Créez différents nœuds avec des noms de composants, ajoutez des attributs et enregistrez.

Étape 5 : ouvrez l’URL de l’auteur, parcourez le modèle de page de contenu et vérifiez le composant de l’onglet.

Fig : Composant onglet après la boîte de dialogue Conception

Ex. Boîte de dialogue de conception du composant texte

Fig : Boîte de dialogue de conception du composant Texte

La boîte de dialogue de conception isole les problèmes. Il est utilisé pour modifier sa disposition, sa conception et son style. Les composants sont plus faciles à maintenir et à mettre à jour au fil du temps.