DocumentaçãoAEMTutoriais do AEMTutorial do AEM Headless

Capítulo 2 - Utilização de modelos de fragmento de conteúdo

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Iniciante
  • Desenvolvedor

Os modelos de fragmento de conteúdo do AEM definem esquemas de conteúdo que podem ser usados para modelar a criação de conteúdo bruto por autores do AEM. Essa abordagem é semelhante à criação em andaime ou baseada em formulários. O conceito principal com Fragmentos de conteúdo é que o conteúdo criado é independente de apresentação, o que significa que ele é destinado ao uso de vários canais, em que o aplicativo de consumo, seja o AEM, um aplicativo de página única ou um aplicativo móvel, controla como o conteúdo é exibido ao usuário.

A principal preocupação do fragmento de conteúdo é garantir:

  1. O conteúdo correto é coletado do autor
  2. O conteúdo pode ser exposto em um formato estruturado e bem compreendido a aplicativos de consumo.

Este capítulo aborda a ativação e a definição dos modelos de fragmento de conteúdo usados para definir uma estrutura de dados normalizada e uma interface de criação para modelagem e criação de "Eventos".

Ativar modelos de fragmento de conteúdo

Os Modelos de Fragmento de Conteúdo devem ser habilitados por meio do Navegador de Configuração do AEM.

Se os Modelos de fragmento de conteúdo estiverem não habilitados para uma configuração, o botão Criar > Fragmento de conteúdo não aparecerá para a configuração relevante do AEM.

NOTE
As configurações de AEM representam um conjunto de configurações de locatário com reconhecimento de contexto armazenadas em /conf. Normalmente, as configurações do AEM estão correlacionadas a um site específico gerenciado no AEM Sites ou a uma unidade de negócios responsável por um subconjunto de conteúdo (ativos, páginas etc.) no AEM.
Para que uma configuração afete uma hierarquia de conteúdo, a configuração deve ser referenciada por meio da propriedade cq:conf nessa hierarquia de conteúdo. (Isso é obtido para a configuração WKND Mobile na Etapa 5 abaixo).
Quando a configuração global é usada, ela se aplica a todo o conteúdo e cq:conf não precisa ser definida.
Consulte a documentação do Navegador de Configuração para obter mais informações.

  1. Faça logon no AEM Author como um usuário com as permissões apropriadas para modificar a configuração relevante.

    • Para este tutorial, o usuário admin pode ser usado.

  2. Navegue até Ferramenta > Geral > Navegador de Configuração

  3. Toque no ícone de pasta ao lado de WKND Mobile para selecionar e toque no botão Editar no canto superior esquerdo.

  4. Selecione Modelos de fragmentos do conteúdo e toque em Salvar e fechar no canto superior direito.

    Isso habilita a criação de modelos de fragmento de conteúdo em árvores de conteúdo da pasta de ativos que têm a configuração WKND Mobile aplicada.

    note note
    NOTE
    Esta alteração de configuração não é reversível da interface da Web da Configuração de AEM. Para desfazer essa configuração:
    code language-none 
    1. Abrir [CRXDE Lite](http://localhost:4502/crx/de)
1. Navegue até `/conf/wknd-mobile/settings/dam/cfm`
1. Excluir o nó `models`
    Qualquer modelo de fragmento de conteúdo existente criado nessa configuração é excluído, bem como suas definições são armazenadas em /conf/wknd-mobile/settings/dam/cfm/models.

  5. Aplique a configuração WKND Mobile à WKND MobilePasta do Assets para permitir que os Fragmentos de conteúdo dos Modelos de fragmento de conteúdo sejam criados nessa hierarquia de pastas do Assets:

    1. Navegue até AEM > Assets > Arquivos
    2. Selecione a pasta WKND Mobile
    3. Toque no botão Propriedades na barra de ações superior para abrir Propriedades da Pasta
    4. Em Propriedades da Pasta, toque na guia Cloud Service
    5. Verifique se o campo Configuração da nuvem está definido como /conf/wknd-mobile
    6. Toque em Salvar e fechar no canto superior direito para manter as alterações

https://video.tv.adobe.com/v/28336?quality=12&learn=on

WARNING
Os modelos de fragmento de conteúdo foram movidos de Ferramentas > Assets para Ferramentas > Geral.

Noções básicas sobre o modelo de fragmento de conteúdo para criação

Antes de definir nosso modelo de Fragmento de conteúdo, vamos analisar a experiência que conduziremos para garantir que capturemos todos os pontos de dados necessários. Para isso, analisaremos o design de aplicativos móveis e mapearemos os elementos de design para o conteúdo a ser coletado.

Podemos dividir os pontos de dados que definem um Evento da seguinte maneira:

Criando o modelo de fragmento de conteúdo

De posse do mapeamento, podemos definir os Fragmentos de conteúdo usados para coletar e, por fim, expor os dados do evento.

Criação do modelo de fragmento de conteúdo

  1. Navegue até Ferramentas > Geral > Modelos de fragmentos de conteúdo.
  2. Toque na pasta WKND Mobile para abrir.
  3. Toque em Criar para abrir o assistente de criação do modelo de fragmento de conteúdo.
  4. Insira Event como o Título do modelo (a descrição é opcional) e toque em Criar para salvar.

https://video.tv.adobe.com/v/28337?quality=12&learn=on

Definição da estrutura do modelo de fragmento de conteúdo

  1. Navegue até Ferramentas > Geral > Modelos de fragmentos de conteúdo >WKND.

  2. Selecione o Modelo de fragmento de conteúdo Event e toque em Editar na barra de ação superior.

  3. Na guia Tipos de Dados à direita, arraste a Entrada de texto de linha única para a área à esquerda para definir o campo Question.

  4. Verifique se a nova Entrada de texto de linha única está selecionada à esquerda e se a guia Propriedades está selecionada à direita. Preencha os campos Propriedades da seguinte maneira:

    • Renderizar como : textfield
    • Rótulo do Campo : Event Title
    • Nome da Propriedade : eventTitle
    • Comprimento Máximo : 25
    • Obrigatório : Yes

Repita essas etapas usando as definições de entrada definidas abaixo para criar o restante do modelo de fragmento de conteúdo do evento.

NOTE
Os campos Nome da Propriedade DEVEM coincidir exatamente, pois o aplicativo Android está programado para apagar esses nomes.

Descrição de evento

  • Tipo de Dados : Multi-line text
  • Rótulo do Campo : Event Description
  • Nome da Propriedade : eventDescription
  • Tipo Padrão : Rich text

Data e hora do evento

  • Tipo de Dados : Date and time
  • Rótulo do Campo : Event Date and Time
  • Nome da Propriedade : eventDateAndTime
  • Obrigatório : Yes

Tipo de evento

  • Tipo de Dados : Enumeration
  • Rótulo do Campo : Event Type
  • Nome da Propriedade : eventType
  • Opções : Art,Music,Performance,Photography

Preço do tíquete

  • Tipo de Dados : Number
  • Renderizar como : numberfield
  • Rótulo do Campo : Ticket Price
  • Nome da Propriedade : eventPrice
  • Tipo : Integer
  • Obrigatório : Yes

Imagem do evento

  • Tipo de Dados : Content Reference
  • Renderizar como : contentreference
  • Rótulo do Campo : Event Image
  • Nome da Propriedade : eventImage
  • Caminho raiz : /content/dam/wknd-mobile/images
  • Obrigatório : Yes

Nome do local

  • Tipo de Dados : Single-line text
  • Renderizar como : textfield
  • Rótulo do Campo : Venue Name
  • Nome da Propriedade : venueName
  • Comprimento Máximo : 20
  • Obrigatório : Yes

Cidade do local

  • Tipo de Dados : Enumeration
  • Rótulo do Campo : Venue City
  • Nome da Propriedade : venueCity
  • Opções : Basel,London,Los Angeles,Paris,New York,Tokyo

https://video.tv.adobe.com/v/28335?quality=12&learn=on

NOTE
O Nome da Propriedade denota ambos o nome da propriedade JCR onde esse valor está armazenado, bem como a chave no arquivo JSON. Esse deve ser um nome semântico que não será alterado durante a vida útil do modelo de fragmento de conteúdo.

Depois de concluir a criação do modelo de fragmento de conteúdo, você deve obter uma definição que se parece com:

Modelo de fragmento de conteúdo do evento

Próxima etapa

Opcionalmente, instale o pacote de conteúdo do com.adobe.aem.guides.wknd-mobile.content.chapter-2.zip no AEM Author via Gerenciador de Pacotes do AEM. Este pacote contém as configurações e o conteúdo descritos nesta parte do tutorial.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4