O nome original dessa aula é: Front-end Development for Developer.
Desconstruir o Design Criativo
Content Rendering
O (Apache) Sling é centrado no conteúdo, ou seja, o processo é focado no conteúdo. Cada requisição HTTP é mapeada pelo conteúdo e pela forma dos recursos JCR. O primeiro alvo é o recurso – que é um nodo JCR - e o segundo alvo é a representação de um script, que está localizado nas propriedades do recurso em combinação com certas partes da requisição como seletores e extensões. Os processos de renderização de conteúdo podem ser divididos em quatro etapas importantes:
- Decomposição da URL
- Mapeamento de Requerimentos de Recursos
- Resolução de Scripts
- Invocação de Corrente de Renderização
Decomposição da URL
Host : nome do site ou do domínio
Content Path : JCR path
Selector : métodos alternativos de renderização do conteúdo
Extension : especifica a forma do conteúdo
Suffix : especifica informação adicional
Parameters : requeridos para cópias dinâmicas
Introduction to CRXDE Lite
- O CRXDE Lite é um ambiente de desenvolvimento para projetos AEM
- Está integrado ao AEM e te permite expressar tarefas de desenvolvimento padrão no browser
- Recomendações: -- Use AEM Developer Tools quando você estiver trabalhando com plugins do Eclipse -- Use AEM HTL Brackets Extension durante um desenvolvimento de um projeto
Dentro do CRXDE há
Apps : guarda componentes, script, definições de templates
Conf: configu, templates editáveis e políticas
Content : conteúdo de autores e editores
Etc : recursos relacionados a ferramentas, … e designs de páginas
Home : informações sobre usuários e grupos
Libs: bibliotecas
Var : arquivos que mudam e são atualizados pelo sistema
Crie e Use Templates para Criar uma Página
Introdução aos Templates
- Templates definem a estrutura básica de página e especificam quais componentes podem ser usados no escopo selecionado
- A lista de templates disponíveis depende da localidade de cada nova página e as restrições são especificadas em cada template
- A disponibilidade de templates pode ser controlada usando propriedades como o allowedPath, allowedParents, allowedChildren ou allowedTemplates
Existem dois tipos de templates: estáticos e editáveis.
Estáticos: são definidos e configurados pelos desenvolvedores
-- Estão localizados em /apps
-- Usam o Design Mode para delimitar as propriedades do design
-- Alterações na estrutura do template não vão se refletir nas páginasEditáveis: São criados e editados pelos autores
-- Estão localizados em /conf
-- Usam políticas de conteúdo para delimitar as propriedades do design
-- Mudanças na estrutura do template irão refletir nas páginas
Ferramentos para Desenvolvedores
Brackets IDE
Benefícios:
- Sincronização automatizada de arquivos modificados para a instância de desenvolvimento AEM
- Sincronização direcional manual de arquivos e pastas
- Sincronização total de pacote de conteúdo do projeto
- Auto complete HTL para expressões e blocos data-sly-*
Introdução à Linguagem HTML de Template
Introdução ao HTL
O HTL refere-se ao HTML Template language
- A Adobe introduziu o HTL no AEM 6.0 como a linguagem principal para fazer templates no AEM
- Permite que desenvolvedores HTML participem de projetos AEM mesmo não tendo conhecimento em Java
A Adobe recomenda HTL para novos projetos AEM e seus componentes por causa de seus múltiplos benefícios acerca do JSP, tais como: desenvolvimento simplificado, melhora na segurança e redução dos custos de projeto.
HTL melhora a segurança dos sites
Aqui a diferença entre o HTL ( em cima ) e o JSP (usado anteriormente, embaixo):
HTL Syntax and Expressions
Expressões da linguagem
- O HTL usa uma linguagem de expressão para acessar as estruturas de dados que disponibilizam o output HTML
- As expressões são delimitadas pelo character ${ e }
- Expressões são usadas apenas para atribuir valores, conteúdo de elementos ou comentários
- Propriedades são acessíveis com notação de ponto ou de colchetes
Block statements (declarações em blocos)
- As declarações em blocos HTL são atributos de dados personalizados adicionados diretamente a um HTML existente
- Declarações em blocos te permitem converter o código do HTML estático em um template dinâmico e funcional sem quebrar a validade do código HTML
HTL Use-API with Java
- A API de uso HTL Java permite que um arquivo HTL acesse metodos em uma classe Java customizada
- Isso permite que todas as complexas lógicas de trabalho sejam encapsuladas pelo código Java, enquanto que o código HTL lida somente com a produção direta de markup.
- Uma "use-class" só deve ser utilizada quando alguma coisa não pode ser feita somente com o HTL.
HTL Template and Call
- O conteúdo do template substitui o conteúdo do elemento original (host element) da chamada.
========
Questões finais:
Desconstruir o Design Criativo
Qual é a sequência correta para acessar o CRXDE Lite usando o AEM?
Tools > General > Select CRXDE Lite
Qual pasta é mais apropriada para criar novos projetos no CRXDE lite?
Apps
Qual é o seletor correto da seguinte URL: http://localhost:4502/content/en/training.device.large.html ?
device.large
Você pode usar CRXDE lite para criar diferentes tipos de nodo JCR e adicionar ou editar suas propriedades?
Verdadeiro
Qual é a primeira pasta que o AEM procura os scripts?
/apps
Create and Use Templates to Build a Page
Complete a frase a seguir:
Templates definem a estrutura básica de uma página.
Em qual diretório são criados templates editáveis?
/conf
Qual dos templates abaixo devem ser definidos e configurados pelos desenvolvedores?
Templates estáticos
Quais das propriedades abaixo controlam a disponibilidade dos templates?
allowedParents e allowedPath
Qual é o primeiro tipo de nodo para templates?
cq: Template
Developer Tools
Com o plugin AEM Brackets você pode exportar conteúdo dos brackets para o AEM, mas não do AEM para o Brackets.
Falso
A criação de um novo nodo é feito através do UI wizard.
Verdadeiro
A IDE Brackets permite sincronização automática das mudanças no arquivo de sistema para o servidor.
Verdadeiro.
A extensão AEM Brackets automatiza a sincronização de arquivos modificados para o AEM
Verdadeiro
Qual desses são contidos na pasta META-INF?
O pacote de informação de filtro
Introdução ao HTML Template Language
Valores multiplos podem ser passados do código HTL para a classe Java usando Use-API. Verdadeiro ou falso?
Verdadeiro
Use-API Java HTL permite que um arquivo HTL acesse métodos de auxílio em uma classe java customizada. Verdadeiro ou falso?
Verdadeiro
Afirmações em bloco HTL são atributos customizados de dados adicionados diretamente a um HTML existente. Verdadeiro ou falso?
Verdadeiro
Quais caracteres delimitam uma expressão?
$ { e }
Os data-sly-templates podem incluir lógica usada no JavaScript. Verdadeiro ou falso?
Falso
Qual é o "produto" da afirmação a seguir?
Nome do template HTL
O que está incorreto no fragmento de código a seguir?
@ não é necessário para todos os argumentos
Para o seu nome projeto AEM te pedem para que siga as melhores práticas para melhorar seu componente customizado. Qual linguagem de template você usará?
HTL
Top comments (0)