Migration vers l’interface utilisateur tactile

Dernière mise à jour : 30 avril 2024

Créé pour :

  • Développeur

À compter de la version 6.0, Adobe Experience Manager (AEM) a introduit une nouvelle interface utilisateur appelée IU optimisée pour les écrans tactiles (également appelée simplement IU tactile). Elle respecte les directives concernant l’interface utilisateur d’Adobe Experience Cloud et plus généralement d’Adobe. Il s’agit dorénavant de l’interface utilisateur standard d’AEM, l’ancienne interface orientée bureau désormais appelée IU classique.

Si vous utilisiez AEM avec l’IU classique, prenez des mesures pour migrer votre instance. Cette page vous accompagnera à cet effet en vous fournissant des liens vers plusieurs ressources individuelles.

NOTE
Un tel projet de migration peut avoir un impact important sur votre instance. Consultez la section Gestion des projets - Bonnes pratiques pour obtenir des instructions recommandées.

Principes élémentaires

Lors de la migration, tenez compte des différences majeures suivantes entre l’IU classique et l’IU tactile :

Interface utilisateur classiqueInterface utilisateur optimisée pour les écrans tactiles
Décrite dans le référentiel JCR comme une structure de nœuds. Chaque nœud qui représente un élément de l’interface utilisateur est appelé une Widget ExtJS et rendu côté client par ExtJS.Également décrite dans le référentiel JCR comme une structure de nœuds. Cependant, dans ce cas, chaque nœud fait référence à un type de ressource Sling (composant Sling), responsable de son rendu. L’interface utilisateur est (en fait) rendue côté serveur.

sling:resourceType

  • non utilisé

sling:resourceType

  • utilisé
  • par exemple
    cq/gui/components/authoring/dialog

Nœuds de boîte de dialogue :

  • Nom : dialog
  • jcr:primaryType: cq:Dialog

Nœuds de boîte de dialogue :

  • Nom : cq:dialog
  • jcr:primaryType: nt:unstructured

Emplacement JavaScript :

  • Les parties nécessaires sont directement incorporées à l’aide d’écouteurs ou gérées dans des bibliothèques clientes.

Emplacement JavaScript :

  • Les parties nécessaires ne peuvent pas être incorporées dans la définition de boîte de dialogue, du fait de la séparation des responsabilités.

Gestion des événements :

  • Les widgets de boîte de dialogue font directement référence au code JavaScript.

Gestion des événements :

  • Javascript observe les événements de boîte de dialogue.

Rendu effectué par le client :

  • Le client crée dynamiquement les composants de l’interface utilisateur.
  • Le client demande la définition du composant (extraction) (au format JSON) au serveur.

Rendu effectué par le serveur :

  • Le client demande des pages avec l’interface utilisateur associée.
  • Le serveur envoie (pousse) l’interface utilisateur sous la forme de documents HTML, à l’aide des composants de l’IU Coral.

En d’autres termes, la migration d’une section de votre interface utilisateur, à partir de l’interface utilisateur classique vers l’interface utilisateur tactile, correspond au portage d’un Widget ExtJS vers un Composant Sling. Pour plus de facilité, l’interface utilisateur tactile est basée sur le framework de l’interface utilisateur Granite, qui fournit déjà certains composants Sling pour l’interface utilisateur (appelés composants de l’interface utilisateur Granite).

Avant de commencer, vérifiez le statut et les recommandations associées :

Les principes fondamentaux du développement de l’IU tactile fournissent une base solide :

Migration de la création de pages

Les boîtes de dialogue constituent un élément majeur de la migration de vos composants :

Migration des consoles

Vous pouvez également personnaliser les consoles :

Bien que cela ne soit pas directement lié à une migration vers l’interface utilisateur tactile, il existe des problèmes connexes qui méritent d’être pris en compte en même temps, car ils font également partie des bonnes pratiques recommandées :

NOTE
Consultez également la section Développement - Bonnes pratiques.

Autres ressources

Pour plus d’informations sur le développement d’AEM, consultez la collection de ressources sous :

CAUTION
Les outils de modernisation d’AEM ont été créés par la communauté et ne sont ni pris en charge ni garantis par Adobe.