Layout de várias zonas

A página a seguir descreve o uso do layout de várias zonas e aborda os seguintes tópicos:

• Visão geral
• Criação de layout multizona
• Pré-requisitos
• Uso de ativos únicos em uma ou mais zonas
• Uso de conteúdo sequenciado em uma ou mais zonas

Visão geral

O recurso Layout de várias zonas permite criar vários conteúdos de zonas e usar diversos ativos, como vídeos, imagens e texto, que podem ser combinados em uma única tela. Você pode inserir imagens, vídeos e texto, permitindo que tudo se misture e crie uma experiência digital intuitiva.

De acordo com os requisitos do projeto, às vezes você precisa usar várias zonas em um canal e editá-las como uma unidade abrangente. Por exemplo, uma sequência de produtos com um feed de redes sociais relacionado executado em três zonas separadas em um único canal.

Pré-requisitos

Antes de implementar esta funcionalidade, certifique-se de ter conhecimento conceitual sobre:

• Criação de um projeto AEM Screens
• Criação de uma exibição
• Atribuindo um Canal a uma tela

Criação de layout multizona

Ao criar um canal, você pode usar modelos diferentes para criar zonas em seu canal. Você pode adicionar uma única imagem, vídeo ou um canal incorporado que permite que vários ativos sejam exibidos em uma sequência.

Criação de um canal

1. Selecione o link do Adobe Experience Manager (parte superior esquerda) e o Screens. Em alternativa, pode aceder diretamente a: http://localhost:4502/screens.html/content/screens.

2. Navegue até a pasta Canais e clique em Criar na barra de ações.

3. Selecione 1x2 Canal de tela dividida no assistente Criar.

4. Clique em Próximo e digite título como MultiZone.

5. Clique em Criar para concluir a criação do canal.

Uso de ativos únicos em uma ou mais zonas

Você pode usar ativos únicos, como uma imagem ou um vídeo, em todas as zonas individuais. Siga as etapas abaixo para a implementação:

1. Adicionar conteúdo ao Canal

   1. Navegue até Zonas —> Canais—> MultiZone.
   2. Selecione o canal MultiZone e clique em Editar na barra de ações para abrir o editor.

2. Adicionar imagens ao Canal

   Para reproduzir uma única imagem ou um vídeo em duas zonas, basta arrastar e soltar uma imagem em cada zona no editor de canais, como mostra a figura abaixo:

   

Usando conteúdo sequenciado em uma ou mais zonas

Se desejar que as zonas exibam uma sequência de imagens e um vídeo nas diferentes zonas, siga as etapas abaixo para obter detalhes.

1. Criação de uma pasta de Canais

   1. Navegue até Zonas —> MultiZone —> Canais e clique em Criar na barra de ações.
   2. Selecione Pasta de Canais no assistente Criar e clique em Próximo.
   3. Insira o título como EmbeddedChannels e clique em Criar.

   

2. Adicionando mais dois canais à pasta Canal

   1. Navegue até Zonas —> Canais —> EmbeddedChannels e clique em Criar na barra de ações.
   2. Selecione Canal de sequência no assistente Create para criar um canal chamado Zone1.
   3. Selecione Zona1 e clique em Editar na barra de ações para abrir o editor.
   4. Arraste e solte algumas imagens neste canal.
   5. Da mesma forma, crie outro canal de sequência chamado Zone2 na pasta EmbeddedChannels.
   6. Arraste e solte um vídeo neste canal.

   A figura a seguir mostra os canais Zone1 e Zone2:

   

   As imagens adicionadas ao editor do canal de sequência Zone1 são mostradas abaixo:

   

   O vídeo adicionado ao editor do canal de sequência Zone2 é mostrado abaixo:

   

3. Adicionar sequências incorporadas (componente) ao canal principal (MultiZone)

   1. Navegue até Zonas —> Canais —> MultiZone.

   2. Clique em Editar na barra de ações para abrir o editor.

   3. Arraste e solte o componente Sequência incorporada em ambas as zonas.

   4. Selecione a sequência incorporada em uma das zonas.

   5. Clique no ícone Configurar (chave) para uma das sequências incorporadas no editor.

   6. Selecione o caminho do canal como Zones —> Canais —> EmbeddedChannels —> Zone1, conforme mostrado na figura abaixo.

   7. Da mesma forma, adicione Zone2 a outro componente de sequência incorporado no editor.

      

Criação de um local e uma exibição

Você deve criar um local e uma exibição para visualização do conteúdo no player do Screens. Siga as etapas abaixo para criar um local e uma tela.

1. Criação de uma localização

   1. Navegue até a pasta Zonas —> Locais.
   2. Selecione a pasta Locais e clique em Criar na barra de ações.
   3. Selecione Location no assistente Create e clique em Next.
   4. Digite Title como SanJose e clique em Criar.

2. Criação de uma exibição

   1. Navegue até a pasta Zonas —> Locais.
   2. Selecione o local SanJose e clique em Criar na barra de ações.
   3. Selecione Display no assistente Create e clique em Next.
   4. Digite Title como Sala de espera e clique em Criar.

Atribuindo Canais à tela

É necessário atribuir os canais à exibição para visualização do conteúdo. Siga as etapas abaixo para atribuir o canal à tela.

1. Atribuindo Canal à tela

   1. Navegue até Zonas —> Locais —> SanJose—> Sala de espera.

   2. Selecione a exibição Sala de espera e clique em Atribuir Canal na barra de ações.

   3. Digite o caminho para o canal MultiZone em Caminho do Canal.

   4. Defina Eventos suportados como Carregamento inicial, Ecrã inativo e Temporizador.

   5. Clique em Salvar.

      

   6. Da mesma forma, você deve atribuir os outros dois canais incorporados (Zone1 e Zone2) a essa exibição.

   7. Depois de atribuir os três canais à tela Sala de espera, você deve ser capaz de visualização dos canais atribuídos do painel de exibição.

      

      IMPORTANTE

      Depois de atribuir o canal principal (neste caso, MultiZone) à tela, é obrigatório atribuir os outros dois canais incorporados Zone1 e Zone2 também à mesma tela.

Registrando o dispositivo

Depois de configurar um local e uma tela, siga as etapas abaixo para registrar o dispositivo e atribuir a exibição ao dispositivo.

1. Registrando o dispositivo

   1. Navegue até a pasta Zonas —> Dispositivos.

   2. Selecione a pasta Dispositivos e clique em Gerenciador de dispositivos na barra de ações.

   3. Clique em Device Registration e selecione o dispositivo pendente na lista.

      OBSERVAÇÃO

      O título do dispositivo deve corresponder ao token do dispositivo (campo Token) exibido na guia Device Registration.

   4. Se o título corresponder ao token do dispositivo, selecione o dispositivo e clique em Registrar dispositivo na barra de ação.

   5. Se o código de registro corresponder ao código no player do Screens Registro do dispositivo, clique em Validar na barra de ação.

      

   6. Digite Title como Chrome-Device1 e clique em Register.

   7. Selecione Atribuir vídeo e selecione o caminho para a configuração do dispositivo.

   OBSERVAÇÃO

   Se você estiver tentando visualização do conteúdo no player do Screens, certifique-se de clicar em Atualizar conteúdo offline no painel do canal para cada um dos canais atribuídos à exibição.

Visualizando o resultado

Depois de implementar layouts de várias zonas usando as etapas anteriores, a saída a seguir é exibida.

Verifique o player do Screens para visualização na saída que exibe o conteúdo em duas zonas diferentes. As zonas esquerda e direita (ambas usam a sequência incorporada como um componente).

A zona esquerda é um canal de sequência e a zona direita inclui um vídeo.