Migração para a interface de toque

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

Se você tem usado AEM com a interface clássica, será necessário tomar medidas para migrar sua instância. Esta página destina-se a atuar como um trampolim, fornecendo links para recursos individuais.

OBSERVAÇÃO

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

Noções básicas

Ao migrar, você deve estar ciente das seguintes (principais) diferenças entre a interface clássica e a interface de toque:

Interface do usuário clássica Interface do usuário habilitada para toque
É descrito no repositório JCR como uma estrutura de nós. Todos os nós que representam um elemento da interface do usuário são chamados de Widget ExtJS e renderizados 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), que é encarregado de sua 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:primaryType: cq:Dialog

Nós de diálogo:

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

Localização do JavaScript:

  • As partes imperativas são diretamente incorporadas usando ouvintes ou gerenciadas em clientlibs.

Localização do JavaScript:

  • As partes imperativas não podem ser incorporadas na definição da caixa de diálogo; separação de responsabilidades.

Tratamento de eventos:

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

Tratamento de eventos:

  • O Javascript observa eventos de diálogo.
Renderização feita pelo cliente:
  • O cliente cria dinamicamente os componentes da interface do usuário.
  • Definição de componente Solicitações de cliente (Pull) (como JSON) do servidor.
Renderização feita pelo servidor:
  • O cliente solicita páginas junto com a interface relacionada.
  • O servidor envia (envia) a interface do usuário como documentos HTML; usando componentes de Coral UI.

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

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

As noções básicas para desenvolver a interface do usuário de toque fornecerão uma base sólida:

Migração de criação de página

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

Migrando Consoles

Você também pode personalizar os consoles:

Embora não estejam diretamente relacionadas a uma migração para a interface de toque, há problemas relacionados que vale a pena considerar ao mesmo tempo, pois também são prática recomendada:

OBSERVAÇÃO

Recursos adicionais

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

CUIDADO

AEM As Ferramentas de Modernização são um esforço da comunidade e não são compatíveis ou garantidas pelo Adobe.

Nesta página

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now