Migración a la IU táctil migration-to-the-touch-ui

A partir de la versión 6.0, Adobe Experience Manager AEM () introdujo una nueva interfaz de usuario denominada IU táctil (también conocido simplemente como IU táctil). Se alinea con Adobe Experience Cloud y con las directrices generales de la interfaz de usuario de Adobe. AEM Esta se ha convertido en la interfaz de usuario estándar en la interfaz heredada y orientada al escritorio, a la que se hace referencia como la interfaz de usuario de, IU clásica.

AEM Si ha estado utilizando la interfaz de usuario clásica de, tome medidas para migrar la instancia. Esta página está diseñada para actuar como un trampolín al proporcionar vínculos a recursos individuales.

NOTE
Este proyecto de migración puede tener un impacto significativo en su instancia. Consulte Administración de proyectos: prácticas recomendadas para obtener instrucciones recomendadas.

Conceptos básicos the-basics

Al migrar, tenga en cuenta las siguientes diferencias principales entre la IU clásica y la táctil:

IU clásica
IU táctil.
Se describe en el repositorio JCR como una estructura de nodos. Cada nodo que representa un elemento de la interfaz de usuario se denomina Widget de ExtJS y representado en el lado del cliente por ExtJS.
También se describe en el repositorio JCR como una estructura de nodos. Sin embargo, en este caso, cada nodo hace referencia a un tipo de recurso de Sling (componente de Sling), que se encarga de su procesamiento. Por lo tanto, la interfaz de usuario se procesa (básicamente) en el lado del servidor.

sling:resourceType

  • no se usa

sling:resourceType

  • usado
  • por ejemplo
    cq/gui/components/authoring/dialog

Nodos de diálogo:

  • Nombre: dialog
  • jcr:primaryType: cq:Dialog

Nodos de diálogo:

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

Ubicación de JavaScript:

  • Las partes imperativas se incrustan directamente mediante oyentes o se administran en clientlibs.

Ubicación de JavaScript:

  • Las partes imperativas no pueden incorporarse en la definición del diálogo; separación de responsabilidades.

Gestión de eventos:

  • Los widgets de diálogo hacen referencia directamente al código JavaScript.

Gestión de eventos:

  • JavaScript observa eventos de diálogo.

Representación realizada por el cliente:

  • El cliente crea dinámicamente los componentes de la IU.
  • El cliente solicita la definición del componente (como JSON) desde el servidor.

Representación realizada por el servidor:

  • El cliente solicita páginas junto con la interfaz de usuario relacionada.
  • El servidor envía (push) la interfaz de usuario como documentos del HTML; mediante los componentes de la interfaz de usuario de Coral.

En otras palabras, migrar una sección de la interfaz de usuario de la IU clásica a la IU táctil significa trasladar un Widget de ExtJS a un Componente Sling. Para facilitar esto, la interfaz de usuario táctil se basa en el marco de trabajo de la interfaz de usuario de Granite, que ya proporciona algunos componentes de Sling para la interfaz de usuario (denominados componentes de la interfaz de usuario de Granite).

Antes de empezar, compruebe el estado y las recomendaciones relacionadas:

Los conceptos básicos del desarrollo de la IU táctil proporcionan una base sólida:

Migración de creación de páginas migrating-page-authoring

Los cuadros de diálogo son un factor importante a la hora de migrar los componentes:

Migración de consolas migrating-consoles

También puede personalizar las consolas:

Consideraciones relacionadas related-considerations

Aunque no están directamente relacionados con una migración a la interfaz de usuario táctil, hay problemas relacionados que vale la pena considerar al mismo tiempo, ya que también son una práctica recomendada:

NOTE
Consulte también Desarrollo: prácticas recomendadas.

Otros recursos further-resources

AEM Para obtener información completa sobre el desarrollo de los recursos, consulte la recopilación de recursos en:

CAUTION
AEM Las herramientas de modernización son un esfuerzo de la comunidad y no son compatibles ni están garantizadas por el Adobe.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2