Documentação AEM 6.4 Guia de desenvolvimento

Renderização do modelo adaptável

Última atualização: 4 de maio de 2023

Tópicos:
Desenvolvimento

Criado para:

Desenvolvedor

CAUTION

AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

A renderização do modelo adaptável fornece uma maneira de gerenciar uma página com variações. Originalmente útil para fornecer várias saídas de HTML para dispositivos móveis (por exemplo, telefone de recurso vs. smartphone), esse recurso é útil quando as experiências precisam ser entregues a vários dispositivos que precisam de diferentes saídas de marcação ou HTML.

Visão geral

Em geral, os modelos são criados em torno de uma grade responsiva e as páginas criadas com base nesses modelos são totalmente responsivas, ajustando-se automaticamente à janela de visualização do dispositivo cliente. Usando a barra de ferramentas Emulador no editor de páginas, os autores podem direcionar layouts para dispositivos específicos.

Também é possível configurar templates para suportar renderização adaptável. Quando os grupos de dispositivos são configurados corretamente, a página é renderizada com um seletor diferente no URL ao selecionar um dispositivo no modo emulador. Usando um seletor, uma renderização de página específica pode ser chamada diretamente pelo URL.

Lembre-se ao configurar os grupos de dispositivos:

Cada dispositivo deve estar em pelo menos um grupo de dispositivos.
Um dispositivo pode estar em vários grupos de dispositivos.
Como os dispositivos podem estar em vários grupos de dispositivos, os seletores podem ser combinados.
A combinação de seletores é avaliada de cima para baixo, pois são persistentes no repositório.

NOTE

O grupo de dispositivos Dispositivos responsivos O nunca terá um seletor porque se presume que os dispositivos reconhecidos como design responsivo de suporte não precisam de um layout adaptável

Configuração

Os seletores de renderização adaptáveis podem ser configurados para grupos de dispositivos existentes ou para grupos criados por você.

Neste exemplo, vamos configurar o grupo de dispositivos existente Telefones inteligentes para ter um seletor de renderização adaptável como parte do Página Experiência no We.Retail.

Edite o grupo de dispositivos que requer um seletor adaptável em http://localhost:4502/miscadmin#/etc/mobile/groups

Defina a opção Desativar Emulador e salve.
O seletor estará disponível para a variável BlackBerry e iPhone 4 fornecido pelo grupo de dispositivos Telefone inteligente é adicionado ao modelo e às estruturas de página nas etapas a seguir.
Usando o CRX DE Lite, permita que o grupo de dispositivos seja usado no modelo, adicionando-o à propriedade de sequência de caracteres de vários valores cq:deviceGroups na estrutura do modelo.

/conf/<your-site>/settings/wcm/templates/<your-template>/structure/jcr:content

Por exemplo, se desejarmos adicionar o grupo de dispositivos do Smart Phone:

/conf/we-retail/settings/wcm/templates/experience-page/structure/jcr:content
Usando o CRX DE Lite, permita que o grupo de dispositivos seja usado em seu site, adicionando-o à propriedade de sequência de caracteres de vários valores cq:deviceGroups na estrutura do site.

/content/<your-site>/jcr:content

Por exemplo, se queremos permitir a variável Telefone inteligente grupo de dispositivos:

/content/we-retail/jcr:content

Agora, ao usar o emulador no editor de páginas (como quando modificação do layout) e você escolher um dispositivo do grupo de dispositivos configurado, a página será renderizada com um seletor como parte do URL.

No nosso exemplo, ao editar uma página com base no Página Experiência e escolhendo iPhone 4 no emulador, a página é renderizada incluindo o seletor como arctic-surfing-in-lofoten.smart.html em vez de arctic-surfing-in-lofoten.html

A página também pode ser chamada diretamente usando esse seletor.

chlimage_1-161