Migração para a interface de toque migration-to-the-touch-ui

A partir da versão 6.0, o Adobe Experience Manager (AEM) apresentou uma nova interface de usuário chamada de interface habilitada para toque (também conhecido simplesmente como interface de toque). Ele está alinhado à Adobe Experience Cloud e às diretrizes gerais da interface do usuário do Adobe. Essa se tornou a interface padrão no AEM, com a interface herdada, orientada para desktop, chamada de IU clássica.

Se você tem usado o AEM com a interface clássica, execute uma ação para migrar sua instância. Esta página serve como um trampolim, fornecendo links para recursos individuais.

NOTE
Esse projeto de migração pode ter impacto significativo na sua instância. Consulte Gerenciamento de projetos - Práticas recomendadas para obter as diretrizes recomendadas.

Noções básicas the-basics

Ao migrar, esteja ciente das principais diferenças a seguir entre a interface clássica e a interface para toque:

IU Clássica
Interface de usuário habilitada para toque
É descrito no repositório JCR como uma estrutura de nós. Cada nó que representa um elemento da interface do usuário é chamado de um Widget ExtJS e renderizado no lado do cliente por ExtJS.
Também descrito no repositório JCR como uma estrutura de nós. No entanto, nesse caso, cada nó se refere a um tipo de recurso Sling (componente Sling), responsável pela renderização. Portanto, a interface do usuário é (basicamente) renderizada no lado do servidor.

sling:resourceType

  • não usado

sling:resourceType

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

Nós de diálogo:

  • Nome: dialog
  • jcr cq:Dialog

Nós de diálogo:

  • Nome: cq:dialog
  • jcr nt:unstructured

Localização do JavaScript:

  • As peças imperativas são incorporadas diretamente usando ouvintes ou gerenciadas em clientlibs.

Localização do JavaScript:

  • Partes imperativas não podem ser incorporadas na definição do diálogo; separação de responsabilidades.

Manipulação de eventos:

  • Os widgets de diálogo fazem referência direta ao código JavaScript.

Manipulação de eventos:

  • O JavaScript observa eventos de diálogo.

Renderização feita pelo cliente:

  • O cliente cria dinamicamente os componentes da interface.
  • Definição de componente (Pull) de solicitações do cliente (como JSON) do servidor.

Renderização feita pelo servidor:

  • O cliente solicita páginas junto com a interface relacionada.
  • O servidor envia (push) a interface do usuário como documentos de HTML; usando componentes de Coral.

Em outras palavras, migrar uma seção da interface do usuário da interface clássica para a interface do usuário de toque significa portar um Widget ExtJS para um Componente do Sling. Para facilitar isso, a interface de toque é baseada na estrutura da interface de usuário do Granite, que já fornece alguns componentes do Sling para a interface de usuário (conhecidos como componentes da interface de usuário do Granite).

Antes de começar, verifique o status e as recomendações relacionadas:

As noções básicas para o desenvolvimento da interface para toque fornecem uma base sólida:

Migração da criação de página migrating-page-authoring

As caixas de diálogo são um fator importante ao migrar seus componentes:

Migração de Consoles migrating-consoles

Você também pode personalizar os consoles:

Considerações relacionadas related-considerations

Embora não esteja diretamente relacionado a uma migração para a interface de toque, há problemas relacionados que merecem ser considerados ao mesmo tempo, pois também são uma prática recomendada:

Recursos adicionais further-resources

Para obter informações completas sobre o desenvolvimento do AEM, consulte a coleta de recursos em:

CAUTION
As Ferramentas de Modernização do AEM são um esforço da comunidade e não são suportadas ou garantidas pelo Adobe.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2