Migration de linterface utilisateur classique vers tactile pour AEM: autres conseils de Expérience

(Liubou Masiuk) (17 octobre 2019)

Dans notre précédent (article sur la migration de Classic vers TouchUI), nous avons décrit notre approche globale en «mode hybride» pour migrer une bibliothèque de composants dinterface utilisateur entièrement classique vers Touch UI à laide de Mode de compatibilité dAEM. Dans le post, nous avons fait allusion à certaines «bizarreries» que nous avons rencontrées. Dans ce nouvel article, nous entrerons beaucoup plus en détail sur ces bizarreries et sur la façon de gérer certaines de ces bizarreries.

Bien que le mode hybride soit extrêmement utile, il présente certaines limitations qui peuvent empêcher léquipe de développement dadopter TouchUI sans effort supplémentaire sur les grands projets. Voici quelques-uns de ces problèmes que nous avons rencontrés et les solutions que notre équipe de développement a trouvées.

Lauteur ne peut pas faire glisser & déposer des images lors de lédition dun composant

La bibliothèque ClassicUI Widgets fournit un composant SmartImage pour télécharger et traiter des images. Les éléments dimage par défaut peuvent être téléchargés de deux manières différentes:

  • Depuis le système de fichiers
  • Depuis le DAM (Digital Asset Manager) en faisant glisser limage depuis loutil de recherche de contenu de page panneau sur le côté gauche
Panneau DAM Assets (interface TouchUI)
Panneau DAM Assets (Interface TouchUI)

Plongeons profondément dans les détails techniques de limplémentation de TouchUI. Le mode de compatibilité rend une boîte de dialogue ClassicUI dans une iframe. Pour une raison quelconque, le mode compatible ne dispose daucune logique pour le suivi des événements de glisser & hors de la boîte. Cela empêche les auteurs de faire glisser des images hors du panneau Actifs (car ils sont habitués à le faire dans lexpérience ClassicUI). Cela signifie quils nont pas de moyen de placer limage dans le composant. De plus, lorsquun champ image est requis, lauteur na pas la possibilité de terminer la configuration du composant à cause dun champ obligatoire vide.

Solution

Pour résoudre ce problème, nous avons décidé de étendez le composant SmartImage standard pour rendre un champ de chemin en plus des fonctionnalités existantes. En conséquence, lauteur a la possibilité de sélectionner une image à laide du champ path et limage apparaît dans la zone SmartImage pour prévisualiser et / ou modifier limage si nécessaire. Pour les chemins inexistants (ou les chemins non image), le champ est mis en surbrillance comme non valide.

Zone dimage obligatoire à lintérieur du composant
Zone dimage requise à lintérieur du composant
  1. Réenregistrez le xtype htmlsamartimage dorigine avec un type personnalisé inhérent qui étend loriginal Widget CQ HtmlSmartImage. Lors de linitialisation du nouveau widget, nous ajoutons un widget PathField supplémentaire aux conteneurs de composants. En outre, nous proposons de petites mises à jour de la disposition des widgets par défaut, qui est une mise à jour courante de linterface utilisateur pour les interfaces utilisateur basées sur ExtJS.
  2. Contrôles de liaison (PathFields) dans toutes les HTMLSmartImages. Tout dabord, nous préparons des helpers en créant des méthodes pour obtenir et définir des valeurs à partir de PathPicker et les mêmes méthodes pour le composant dorigine. La première paire est setValue et getValue du PathField, qui est la partie facile. La partie délicate concerne la valeur du composant dorigine. HTMLSmartImage ne stocke pas sa valeur dans un état accessible.

Pour obtenir le chemin actuel de limage, il est facile dutiliser la méthode this.fileReferenceField.getValue (). Mais pour définir la valeur du widget dorigine, nous devons émuler une baisse de ressource image sur le composant. Nous pouvons gérer cela de la manière suivante:

Maintenant, lorsque nous avons tous les accesseurs de valeur, nous devons savoir quand loriginal et quand la valeur Pathfield changent. Pour suivre les modifications de Pathfield, nous pouvons utiliser un événement «flou». Pour le widget dorigine, lévénement « imagestate » est le plus approprié. Nous devons suivre deux types de changements détat de limage: originalremoved et originalavailable, de sorte que lauditeur peut être le suivant:

Maintenant, il est prêt pour la liaison. Pour conserver le mécanisme de validation dans la nouvelle implémentation, nous remplaçons la logique de validation dorigine pour linstance de champ de chemin intégré.

Toutes les boîtes de dialogue des champs de génération de modèles sont désactivées

AEM Mode échafaudage permet à un auteur de créer facilement des pages basées sur une structure de formulaire déchafaudage spécifique. Les échafaudages sont extrêmement utiles pour créer un contenu structuré bien défini (par exemple, des articles, des articles de blog).

En mode hybride, tous les champs de formulaire déchafaudage sont désactivés, ce qui signifie quils ne peuvent pas être modifiés.

Exemple de formulaire déchafaudage
Exemple de formulaire déchafaudage

Solution

Linclusion de la bibliothèque cq.security dans le JSP de la page a résolu le problème et les formulaires déchafaudage ont commencé à fonctionner correctement.

La boîte de dialogue hybride se ferme sans enregistrer les données en cliquant sur en dehors de la zone de dialogue

Tous les composants sont modifiés dans la fenêtre de dialogue de configuration des composants, qui apparaît en mode édition.

Modification dun composant dans AEM (interface TouchUI)
Modification dun composant dans AEM (interface TouchUI)

Il y a une petite différence dans lexpérience utilisateur dans les boîtes de dialogue Hybrid et TouchUI:

  • Si un utilisateur clique loin de la boîte de dialogue TouchUI, rien ne se passe.
  • Si un utilisateur clique loin de lhybride dialogue, il se ferme sans enregistrer les données saisies.

Cela signifie que toutes les données non enregistrées sont g à perdre en cas de clic accidentel à lextérieur du composant! Inutile de dire que cest assez ennuyeux pour les auteurs.

Solution

Heureusement, la solution est assez simple. Initialement, le fond de dialogue est en mode «modal». Pour changer le mode darrière-plan de la boîte de dialogue, le fichier JSP de la boîte de dialogue doit être superposé et le mode darrière-plan de la boîte de dialogue défini sur la valeur «statique».

Certains champs de la boîte de dialogue ne correspondent pas à la zone de la fenêtre de la boîte de dialogue

Comme nous lavons déjà décrit précédemment, les boîtes de dialogue de linterface utilisateur saffichent dans une iframe à lintérieur de la fenêtre de dialogue TouchUI. Cette boîte de dialogue ne sadapte parfois pas à tout le contenu dynamique, provoquant parfois une disposition étrange où des barres de défilement supplémentaires apparaissent à lintérieur de la boîte de dialogue.

Défilement supplémentaire élément pour le composant en mode hybride
Élément de défilement supplémentaire pour le composant en mode hybride

Solution

Pour surmonter cet inconvénient, nous superposons le fichier JSP qui contient tous les paramètres de configuration pour un rendu correct des boîtes de dialogue en mode de compatibilité. Ce fichier JSP est placé dans ce qui suit sous le chemin suivant:

apps/cq/gui/components/authoring/compat/components/dialog/dialog.jsp

Nous changeons la largeur et la hauteur de la fenêtre pour tenir compte de loriginal les dimensions de la boîte de dialogue, ainsi que la taille de la fenêtre du navigateur.

Nous gérons cette situation via un script qui fournit en fait une liaison entre le wrapper Touch UI (Coral) et la boîte de dialogue Classic intégrée dans liframe. Lévénement «dialogwrapper-ready» + ns est nécessaire pour cela avec une largeur et une hauteur pré-calculées comme paramètres de fonction de gestionnaire. Il est également possible de faire votre propre recalcul, puis de définir la largeur et la hauteur du contenu de la boîte de dialogue Coral:

Certains composants ne peuvent pas être modifiés dans TouchUI (facilement)

Lexpérience de création est lun des points les plus importants à prendre en compte lors de limplémentation de composants dans AEM. Imaginez un composant de carrousel contenant plusieurs diapositives. En mode Édition, il est préférable de rendre toutes les diapositives du carrousel sous forme de colonne afin que lauteur puisse facilement réorganiser lordre des diapositives et y accéder simultanément sans passer dune diapositive à une autre. Il y a une différence importante entre ClassicUI et TouchUI:

  • Dans ClassicUI, les éléments de création (par exemple, les barres dédition) font partie du balisage qui est rendu avec le composant en mode dédition.
  • Dans TouchUI, les éléments de création sont rendus dans une superposition. Le balisage final du composant est rendu dans une iframe. La combinaison de ces conditions conduit un auteur à la situation où il nest pas du tout possible dinteragir avec le composant en mode Édition (par exemple, cliquer sur les boutons, parcourir les diapositives dun carrousel).

Nous sommes donc confrontés à des cas où quelques composants de notre bibliothèque nécessitent une certaine interaction avant que lutilisateur puisse démarrer le processus dédition, mais cela ne peut pas être facilement réalisé dans TouchUI.

Solutions

Cependant, il existe quelques correctifs qui pourraient être considérés comme des solutions possibles:

  1. Il existe une solution de contournement rapide et simple qui ne nécessite aucun effort de développement: tous les composants modifiables se trouvent dans larborescence du contenu et il y a une icône de clé à côté de chacun deux qui ouvre la boîte de dialogue dédition.
Arborescence du contenu de la page dans TouchUI interface
Arborescence du contenu de la page dans linterface TouchUI

2. Pour les composants complexes avec de nombreux sous-composants, le balisage du composant en mode Edition peut être modifié pour rendre toutes les zones de composant «masquées» ouvertes aux «yeux» de lauteur. Cela signifierait que tout est visible et accessible via le mode Édition.

3. En tant que meilleure pratique, Adobe fournit une solution pour prendre en charge un tel cas dexpérience de création dans les AEM Core Components . Composant de carrousel et Composant donglets utilisent loption Sélectionner le panneau dans la barre doutils du composant pour réorganiser les diapositives et affiche et modifie lélément actuellement prévisualisé.

Solution prête à lemploi pour atteindre le contenu masqué à la création
Solution prête à lemploi pour accéder au contenu masqué à la création

Le bouton « déverrouiller la page » ne fonctionne pas

Il existe une option AEM standard pour verrouiller et déverrouiller la page pour les modifications. Lors de la validation de lapproche de migration TouchUI, nous avons trouvé une situation dans laquelle lauteur ne pouvait pas ramener une page « verrouillée » à son état initial. Heureusement, cette fonctionnalité fonctionne correctement via la console de site AEM.

Option
Option Lock dans linterface TouchUI

Un problème similaire est décrit ici et ici .

Solution

Le message derreur dans la console du navigateur indique quil « Impossible de lire la propriété shared dundefined ». La cause principale réside dans une bibliothèque cliente manquante cq.shared.

Message derreur lors du traitement de la fonctionnalité
Message derreur lors du traitement de la fonctionnalité Verrouillage / Déverrouillage

Linclusion de la bibliothèque cq.shared dans le JSP de la page résout le problème et le bouton « Déverrouiller la page » commence à fonctionner comme prévu.

Auteurs: Volha Lunkova , Liubou Masiuk, Aliaksei Stsefanovich

Publié à lorigine à https://exadel.com le 17 octobre 2019.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *