Criação de modelos personalizados para layouts de várias zonas

Esta página mostra como você pode criar um modelo personalizado para um layout multizona.

Considerações importantes

Há duas considerações importantes que você deve estar ciente antes de criar um modelo personalizado no layout de várias zonas:

1. Tamanho ou porcentagens de pixels fixos:

   Você deve decidir se deseja usar o tamanho de pixel fixo para diferentes zonas para seu layout personalizado ou se deseja criar um layout personalizado usando porcentagens.

   Observação

   A vantagem de usar a porcentagem para definir zonas para seu layout personalizado permite reutilizar o modelo em uma variedade de tamanhos de tela.

2. Convenção de nomenclatura:

   Antes de entender como criar modelos personalizados de várias zonas para usar em um projeto da AEM Screens, é recomendável entender a versão dos modelos que você deseja criar.

   Nome do layout	Descrição
   Left20-LandscapeHD3Zone	Refere-se a um layout paisagem de 3 zonas que permite criar 3 zonas com zona 1 como 20% do ecrã horizontal e vertical a partir da esquerda, zona 2 como 80 % do ecrã horizontal e 20 % do ecrã vertical justificado à direita, zona 3 como 100 % da horizontal e 80 % do ecrã vertical com relação de aspecto de 16:9
   Upper20-PortraitHD2Zone	Refere-se a um modelo de retrato de 2 zonas que cobre 20% da tela do topo, com proporção de 16:9
   Right20-LandscapeSD3Zone	Refere-se a um modelo de 3 zonas que cobre 20% da tela da direita, com relação de aspecto de 4:3

   IMPORTANTE

   As zonas definidas no layout personalizado podem não corresponder à proporção geral do layout inteiro. A convenção de nomenclatura seguida neste documento especifica a proporção do layout personalizado como um todo.

Exemplo de uso de caso Left20-LandscapeHD3Zone Layout

Siga a seção abaixo para criar um modelo personalizado Left20-LandscapeHD3Zone com a seguinte configuração:

• Left20 refere-se à zona superior à esquerda, que cobre 20% do tamanho da tela horizontal e vertical.
• Paisagem refere-se à orientação do ecrã
• HD refere-se à relação de aspecto como 16:9
• 3A zona se refere a três zonas do monitor

Representação visual do layout de várias zonas

O layout Left20-LandscapeHD3Zone permite criar o seguinte layout de várias zonas no seu projeto:

Criação de um layout Left20-LandscapeHD3Zone

Siga as etapas abaixo para criar um layout Left20-LandscapeHD3Zone para um projeto do AEM Screens:

1. Crie um projeto da AEM Screens chamado de modelo personalizado.

   

2. Navegue até CRXDE Lite da sua instância AEM —> Ferramentas —> CRXDE Lite.

3. Crie uma pasta em aplicativos intitulados como modelo personalizado. Da mesma forma, crie outra pasta chamada template em customtemplate, conforme mostrado na figura abaixo.

   

   Observação

   É recomendável clicar em Salvar tudo na barra de ações no CRXDE Lite sempre que criar, editar ou copiar conteúdo para qualquer um dos nós, caso contrário, você não poderá confirmar as atualizações.

4. Copie o modelo da barra esquerda de /libs/screens/core/templates/splitscreenchannel/lbar-left para /apps/customtemplate/template.

5. Renomeie a barra esquerda copiada (/apps/customtemplate/template) para o meu layout​personalizado.
   

6. Navegue até /apps/customtemplate/template/my-custom-layout e atualize as propriedades jcr:description para Template para Left20-LandscapeHD3Zone e jcr:title para Left20-LandscapeHD3Zone.

   

7. Navegue até o nó offline-config de /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config e atualize o jcr:title para Left20-LandscapeHD3Zone.

   

8. Navegue até a propriedade jcr:content do my-custom-template de /apps/customtemplate/template/my-custom-layout/jcr:content e atualize a propriedade cq:cssClass para aem-Layout my-custom-layout.

   

9. Referindo-se à etapa (4), na qual, você copiou o modelo à esquerda da barra, visualização 3 grades responsivas em my-custom-layout/jcr:content. Adicione a classe css personalizada a cada grade responsiva na propriedade cq:cssClass , por exemplo, my-custom-layout — top-left para o nó r1c1 .

   

   Da mesma forma, adicione my-custom-layout—top-right para r1c2 e, my-custom-layout—bottom para nó r2c1 .

   Observação

   Essas classes personalizadas serão usadas no css para definir a largura/altura dessas grades responsivas.

   Observação

   Você pode adicionar ou remover as grades responsivas com base no número total de grades que deseja. Neste exemplo, mostramos 2 grades na primeira linha e 1 grade na segunda linha, de modo que há um total de 3 grades responsivas (r1c1, r1c2, r2c1).

10. Copie /libs/settings/wcm/designs/screens para /apps/settings/wcm/designs/ e renomeie o design copiado como modelos-designs ​​personalizados.

11. Navegue até /apps/settings/wcm/designs/custom-template-designs e atualize a propriedade jcr:title de custom-template-designs para customtemplate-design.

12. Navegue até /apps/settings/wcm/designs/custom-template-designs e crie um arquivo static.css.

13. Copie o conteúdo para o static.css arquivo:

        /*my-custom-layout styles*/
       .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-left {
        width:20%;
        height: 36%;
       float: left !important;
       }
      .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-right {
       width:80%;
       height: 36%;
      float: left !important;
      }
      .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--bottom {
      width:100%;
      height: 64%;
      }
    

    Observação

    É possível atualizar as porcentagens para corresponder aos requisitos do modelo personalizado.

14. Navegue até /apps/<project>/templates/my-custom-layout/jcr:content a propriedade cq:designPath e atualize-a para /apps/settings/wcm/designs/customtemplate-designs carregar os estilos configurados em static.css

    Observação

    É recomendável digitar todos os estilos em vez de copiar ou colar, o que pode causar espaços em branco, resultando em problemas de estilização em css.

Como visualizar o resultado

Siga as etapas abaixo para usar o modelo personalizado acima em seu projeto AEM Screens:

1. Navegue até o projeto do Screens que você criou na etapa 1 e selecione a pasta Canais .

   

2. Clique em Criar na barra de ação e selecione o modelo Left20-LandscapeHD3Zone no assistente de Criação .

   

3. Depois de criar um canal com o modelo personalizado, você pode adicionar ativos ao seu canal a partir do editor. A pré-visualização a seguir mostra as imagens em um modelo personalizado.

   

Inserir uma imagem como a camada de plano de fundo

É possível inserir uma imagem como uma camada de plano de fundo no layout:

Você pode ajustar a regra CSS para usar o que é chamado de "data-uri" e inserir diretamente a imagem (codificada em Base64) no arquivo CSS, criado em (etapa 13), static.css.

Isso é feito da seguinte forma:
.cq-Screens-channel--multizone.my-CustomLayout { background: url('data:image/…;base64,…') no-repeat center center; }

Ou você pode seguir as etapas abaixo:

1. Verifique se a imagem está incluída na configuração offline do canal
2. Use um link direto para a imagem no CSS acima, em vez da variante "data-uri"

Atualização da cor do plano de fundo

Para alterar a cor do plano de fundo, adicione o seguinte código ao arquivo xml (etapa 13), static.css.

.cq-Screens-channel--multizone.my-CustomLayout { background-color: …; }