Migration vers l’interface utilisateur tactile

À 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 est alignée sur les directives générales concernant l’interface utilisateur d’Adobe Marketing Cloud et plus généralement 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’interface utilisateur classique, vous devez prendre des mesures pour migrer votre instance. Cette page vous accompagnera à cet effet en vous fournissant des liens vers plusieurs ressources individuelles.

REMARQUE

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, vous devez tenir compte des différences (majeures) 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 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 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 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 de l’IU classique vers l’IU tactile correspond au portage d’un Widget ExtJS en 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 fourniront 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 :

REMARQUE

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 :

ATTENTION

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

Sur cette page