Use Core Components e Style System
Introdução aos Core Components
- Os core components oferecem componentes básicos robustos e extensos
- Os core components tem sido construídos usando tecnologia de ponta e boas práticas, além de aderirem à paramêtros de acessibilidade.
- Os core components fazem as páginas autorais mais flexíveis e customizáveis
- Para desenvolvedores, é fácil extender os core components para oferecer uma funcionalidade customizada.
Introdução ao Style System
O Style System te permite criar variações visuais de componentes sem nenhum desenvolvimento back-end. Isso permite a melhor reutilização de componentes AEM.
- Style system permite que o autor selecione essas variações quando faz a edição de um componente em uma página.
- Os template authors podem definir classes de estilo no conteúdo de políticas de um componentes – as opções de estilo serão disponibilizadas para autores baseadas na classes de estilo definidas
Arquitetura dos Style Systems
Criando Components
Dialogs
- São interfaces gráficas que disponibilizam input para os componentes
- Os autores usam caixas de diálogo para customizar o conteúdo ou comportamento de um componente.
- Existem dois tipos: Touch UI Dialogs e Classic UI Dialog
Design Dialogs
- Disponibilizam configurações de design em um componente
- Acessível somente no modo design
- Não está disponível para páginas criadas usando templates editáveis
Overlays
- Te permitem extender e customizar componentes e consoles existentes
- O AEM é configurado para procurar no /apps primeiro e depois no /libs para encontrar um recurso
- O Sling Resource Merger disponibiliza serviços para acessar e juntas recursos.
- O Sling Resource Merger e o métodos relacionados só podem ser usados com Granite
O resource merger disponibiliza as propriedades a seguir:
- sling:hideProperties
- sling: hideResource
- sling:hideChildren
- sling:orderBefore
Introdução às Clients Libraries
Client Libraries Overview
- Uma client lib é um set organizado de arquivos javascript e css
- Te permite guardar o código do lado do cliente no repositório, organizar em categorias e definar quando e como cada categoria de código deve ser servida ao cliente
- A biblioteca do lado do cliente se ocupa de produzir os links corretamente na sua webpage final e carregar o código correto.
Propriedades das Client Libraries
Crie Content Fragments
Introdução aos Content Fragments
- Você pode criar e administrar Content Fragments como assets de página independentes
- Content Fragments te permitem criar um conteúdo de "canal-neutro" junto com (possivelmente "canal-específico") variações
- Você pode usar Content Fragments e suas variações quando autora conteúdo de páginas
- O componente de Content Fragment dispõe de conteúdo do Content Fragment
Benefícios
- Revisar o conteúto pela administração central dos Content Fragments
- Mapear assets criativos através de coleções associadas com Content Fragments
- Escrever e administrar conteúdo através do editor de Content Fragments
- Atualizar o conteúdo de múltiplas páginas a partir de uma localização simples
Crie Content Fragments Models
Crie Experiências Fluídas usando AEM
Introdução ao Headless CMS
Cenários
- Entregam conteúdo puro em aplicativos nativos de celulares
- Entregam conteúdo puro para websites que utilizam o framework SPA (Single Page App)
- Entregam conteúdo puro para aplicações terceiras (web, desktop, mobile)
- Conteúdo entregue para o Ponto de Venda de outras store experiences
- Conteúdo entregue para o offsite de experiências digitais
- Carros conectados
- Content fragments tagueados entregues ao IoT
Use Princípios Headless com React
Debugging e Teste
Developer Mode
Benefícios de usar o Developer Mode
- Descobrir do que as páginas são compostas
- Debugar aplicações
- Testar aplicações para verificar se elas funcionam de acordo com o comportamento esperado
Framework Hobbes para testes
O Hobbes testing framework é baseado na linguagem JavaScript com User Interface (UI) para os produtos AEM
- Automatiza a exceção de testes UI em browsers e disponibiliza um resultado de teste
- Usa Hobbes.js, uma biblioteca de teste escrita em JavaScript
- O framework permite que:
- A API JavaSript para criar testes
- Um painel UI para rodar os testes
Desenvolva o front-end no AEM usando aemfed
========
Questões finais:
Use Core Components & Style System
Em qual dos componentes abaixo o Style System é habilitado for a da caixa?
Core Components version 2 or later
Qual desses é uma fonte de core components?
Github
Onde estão alocados or core components no AEM?
Apps
Quais propriedades são obrigatórias para consigurar a aba Style no dialog Design?
Path
Sling:resourceType
Em qual cenário os Styles podem ser combinados?
Quando Styles estão presentes em dois grupos diferentes de Styler permitidos em um template
Quando a opção "Styles can be combined" está marcada no checkbox
Creating Components
Qual é o tipo do nodo de um componente AEM?
cq:component
Qual desses é categorizado como cq:WidgetCollection?
Items
Qual dessas features te ajuda a extender e customizar consoles já existentes em uma interface?
Overlays
Onde estão os valores disponíveis para um design dialog?
Conf folder
Os autores do seu time estão trabalhando em fazer uma nova interface de design. Você quer que eles customizem o comportamento do componente através de um input nele. Qual feature do AEM vai ajudar para fazer isso?
Dialog boxes
Como autor, o que você precisa fazer com um componente para deixá-lo editável?
Destrancá-lo
Introduction to Client Libraries
Qual das seguintes são propriedades da Client Library?
Dependecies e Categories.
Qual das seguintes você pode usar para aplicar Page Designs?
Page component e Template.
Onde o Page Design aplicado em um Template refletirá como estilos ou design?
Nos templates que o Page Design for aplicado e nas paginas criadas apartir de templates que tenham sido aplicado o Page Design.
Como o AEM evita a criação de várias cópias da biblioteca JS na saída final e permite a organização lógica do client-side library?
Usando pastas na client-side libraty.
Onde você cria uma Page Design?
Client Library in/apps/project
Introduction to Client Libraries
Qual das propriedades de um client clibrary atua como identificador?
Categories
Quais desses podem ser usados para adicionar ao Page Designs?
Page component e Template
O que um arquivo js.txt define?
A pasta base e a lista de arquivos JavaScript usado pela biblioteca do cliente
Quais dessas afirmações sobre client libraries são verdadeiras?
Elas estão organizadas em sets de arquivos JavaScript e CSS
Definem quando e como cada categoria do código é servida ao clinete
Permitem que você guarde o código do lado do cliente em um repositório, organizado em categorias.
Create Content Fragments and Content Fragments Models
Qual dessas é uma etapa obrigatória para permitir a sumarização dos Content Fragments?
Adicionar o Content Fragment no nodo de línguas
Como nós podemos exportar o Content Fragment no formato JSON?
Nós podemos criar um Content Fragment e aproveitar o Asset HTTP API para exportar o Content Fragment no formato JSON
Onde os Content Fragments ficam guardados no JCR?
/content/dam/
Qual feature um autor DAM usa para compartilhar o feedback com um copywriter?
Annotate
Quais são as vantagens de usar os Content Fragments?
Eles te permitem atualizar o conteúdo em múltiplas páginas a partir de uma só
Eles permitem que o autor reveja o conteúdo
Quais dessas features são sustentadas pelos Content Fragments?
Summarization
Associated Asset Collection
Rich Text
Create Fluid Experiences using AEM
Quais são as três formas de implementar uma entrega de conteúdo headless?
Usar um CMS híbrido
Usar ferramentas customizadas para apresentar dados do legacy CMS
Autorizar uma única solução headless
O que ajuda o AEM a facilitar a entrega de conteúdo headless?
Content fragment models
Qual desses está incluido no Content Fragment Model?
Content Schema and Data Types
Como podemos disponibilizar uma feature de texto e de sumário em um campo de multi-texto definido por um Content Fragment Model?
Criando um content fragment na linguagem root
Complete:
Para exporter um conteúdo de página nof formato JSON o Sling Model Exporter Framework autoriza o Jackson Exporter
Create and Export Experience Fragments
Se um autor quer deletar um Experience Fragment do Adobe Target, qual dessas opções ele deve usar?
Deletar do Adobe Target
Qual dessas afirmações sobre experience fragments está correta?
Um experience fragment é um grupo de um ou mais componentes que incluem layout e conteúdo
No out-of-the-box AEM 6.5, para qual dos seguintes sites você pode criar variações usando experience fragments dos seus produtos?
Facebook e Pinterest
Qual opção um autor deve selecionar para autorizar o Adobe Target personalizar SPA e aplicativos mobile?
O JSON exportado do experience fragment do Adobe Target
Perform Debugging & Testing
Você pode usar http://localhost:4502/libs/cq/ui/content/dumblibs.html para procurar uma client library por sua categoria. Verdadeira ou Falso?
True
O que você pode usar no /libs/cq/ui/content/dumblibs.html?
Reconstruir cliente libraries
Qual valor você colocaria para a propriedade dependency de uma client library que guarda casos de teste?
Granite.testing.hobbes.testrunner
Qual configuração OSGi configura a compressão usando Gzip para uma client library?
Adobe Granite HTML Library Manager
- O que você pode fazer para remover os espaços em branco e novas linhas de uma client library sem mudar sua funcionalidade?* Checar minify no Adobe Granite HTML Library Manager
Complete:
Vários scripts Java em uma client library são compilados e gerados na pasta /var
Develop the AEM Front-end using aemfed
What is the purpose of –e in the aemfed command?
To provide regex to exclude the files from deployment
What is the purpose of –t in the aemfed command?
To provide the AEM server URL
Which of the following statements is true about aemfed?
It is a npm module
What is the purpose of –w
To provide the path of jcr_root node
Top comments (0)