Migration vers l’interface utilisateur tactile migration-to-the-touch-ui

À 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). Il est aligné sur Adobe Experience Cloud et sur les directives générales de l’interface utilisateur de l’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 avez utilisé AEM avec l’interface utilisateur 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 the-basics

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

Interface utilisateur classique
Interface 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 noeud 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 de listeners 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 surveille 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 de l’IU classique vers l’IU tactile signifie qu’une Widget ExtJS à 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 de base du développement de l’interface utilisateur tactile constituent une base solide :

Migration de la création de pages migrating-page-authoring

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

Migration des consoles migrating-consoles

Vous pouvez également personnaliser les consoles :

Considérations annexes related-considerations

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 further-resources

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

CAUTION
Les outils de modernisation AEM sont un effort communautaire et ne sont ni soutenus ni garantis par Adobe.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2