Uso de Fragmentos de experiência

Esta página aborda os seguintes tópicos:

• Visão geral
• Usando Fragmentos de experiência no AEM Screens
• Propagando alterações na página

Visão geral

Um Fragmento de experiência é um grupo de um ou mais componentes, incluindo o conteúdo e o layout que podem ser referenciados nas páginas. Fragmentos de experiência podem conter qualquer componente, como um ou vários componentes que podem conter qualquer elemento dentro de um sistema de parágrafos, que será referenciado na experiência completa ou solicitado por um terceiro terminal.

Usando Fragmentos de experiência no AEM Screens

Como exemplo, o fluxo de trabalho a seguir demonstra o uso de fragmentos de experiência de We.Retail em Sites. Você pode escolher uma página da Web e aproveitar esse conteúdo em seu canal AEM Screens em um de seus projetos.

Pré-requisitos

Criação de um projeto de demonstração com um Canal

Criação de um projeto

1. Clique em Criar projeto do Screens para criar um novo projeto.
2. Insira o Título como DemoProject.
3. Clique em Salvar.

Um DemoProject será adicionado ao seu AEM Screens.

Criação de um canal

1. Navegue até a pasta DemoProject que você criou e selecione a pasta Canais.

2. Clique em Criar na barra de ações para abrir o assistente.

3. Escolha o modelo Canal de sequência do assistente e clique em Próximo.

4. Digite Title como TestChannel e clique em Criar.

Um TestChannel será adicionado ao DemoProject.

Criação de um fragmento de experiência

Siga as etapas abaixo para aproveitar o conteúdo de We.Retail para seu TestChannel em DemoProject.

1. Navegue até a página Sites em We.Retail

   1. Navegue até Sites e selecione We.Retail In-Store -> Canais ->Canal Inativo - Night e selecione esta página para usá-la como um fragmento de experiência para o canal do Screens.

   2. Clique em Editar na barra de ações para abrir a página que deseja usar como um fragmento de experiência para o seu canal do Screens.

2. Reutilizar o conteúdo

   1. Selecione o fragmento que deseja incluir no seu canal.
   2. Clique no último ícone à direita para abrir a caixa de diálogo Converter em fragmento de experiência.

   

3. Criar fragmento de experiência

   1. Escolha Action como Criar um novo fragmento de experiência.

   2. Selecione Caminho principal.

   3. Selecione Modelo. Escolha o modelo Fragmento de experiência - Variação de telas aqui.

   4. Insira Título do fragmento como ScreensFragment.

   5. Clique na marca de seleção para concluir a criação de um novo fragmento de experiência.

   

4. Criar Live Copy do fragmento de experiência

   1. Navegue até o home page AEM.
   2. Selecione Fragmentos de experiência e realce ScreensFragment e clique em Variação como live-copy, conforme mostrado na figura abaixo:

   

   c. Selecione ScreensFragment do assistente Criar Live Copy e clique em Próximo.

   d. Digite Title e Name como Screens.

   e. Clique em Criar para criar a Live Copy.

   f. Clique em Concluído para voltar à página ScreensFragment.

   

   OBSERVAÇÃO

   Depois de criar o fragmento Screens, você pode editar as propriedades do fragmento. Selecione o fragmento e clique em Propriedades na barra de ações.

   Editar propriedades de um fragmento de tela

   1. Navegue até ScreensFragment (você criou nas etapas anteriores) e clique em Propriedades na barra de ações.

   2. Selecione a guia Config offline, conforme mostrado na figura abaixo.

   Você pode adicionar as Bibliotecas do lado do cliente (java e css) e Arquivos estáticos ao fragmento da experiência.

   O exemplo a seguir mostra a adição de bibliotecas do lado do cliente e de fontes como parte de arquivos estáticos ao fragmento da experiência.

5. Uso do fragmento de experiência como componente no Canal do Screens

   1. Navegue até o canal Screens onde deseja usar o fragmento Screens.

   2. Selecione TestChannel e clique em Editar na barra de ações.

   3. Clique no ícone de componentes na guia lateral.

   4. Arraste e solte o Fragmento de experiência no seu canal.

   

   e. Selecione o componente Fragmento de experiência e selecione o ícone superior esquerdo (chave) para abrir a caixa de diálogo Fragmento de experiência.

   f. Selecione a Screens cópia ativa do fragmento criado em Etapa 3 em Caminho.

   

   f. Selecione a Screens cópia ativa do fragmento criado em Etapa 3 no Fragmento de experiência.

   

   h. Digite os milissegundos em Duration.

   i. Selecione Configuração offline na caixa de diálogo Fragmentos de experiência para definir as bibliotecas do lado do cliente e os arquivos estáticos.

   OBSERVAÇÃO

   Se quiser adicionar bibliotecas do lado do cliente ou arquivos estáticos além do que você configurou na etapa 4, adicione a partir da guia Configuração offline na caixa de diálogo Fragmento de experiência.

   

   j. Clique na marca de seleção para concluir o processo.

Validando o resultado

Após concluir as etapas anteriores, você pode validar seu fragmento de experiência em ChannelOne ao:

1. Navegando até TestChannel.
2. Selecionando Pré-visualização na barra de ações.

Você vai visualização o conteúdo da página Sites (live-copy do fragmento de experiência) no seu canal, como mostrado na figura abaixo:

Propagando Alterações na Página

A Live Copy se refere à cópia (da origem), mantida pelas ações de sincronização, conforme definido pelas configurações de implantação.

Desde o Fragmento de experiência, criamos uma cópia ao vivo das páginas Sites, portanto, se você fizer alterações nesse fragmento específico a partir da página principal, você visualização as alterações no canal ou no destino em que usou o Fragmento de experiência.

Siga as etapas abaixo para propagar as alterações do canal principal para o canal de destino:

1. Selecione o Fragmento de experiência na página Sites (principal) e clique no ícone de lápis para editar os itens no Fragmento de experiência.

   

2. Selecione o Fragmento de experiência e clique no ícone de chave para abrir a caixa de diálogo para editar as imagens.

   

3. A caixa de diálogo Grade do Produto é aberta.

   

4. É possível editar qualquer uma das imagens. Por exemplo, aqui a primeira imagem é substituída nesse fragmento.

   

5. Selecione o Fragmento de experiência e clique no ícone de Rollout para propagar as alterações no fragmento usado no seu canal.

   

6. Clique em Rollout para confirmar as alterações.

   Você verá que as alterações foram distribuídas.

   

Validando as Alterações

Siga as etapas abaixo para confirmar as alterações em seu canal:

1. Navegue até Screens -> Canais -> TestChannel.

2. Clique em Pré-visualização na barra de ações para confirmar as alterações.

A imagem a seguir ilustra as alterações em seu TestChannel: