Desenvolvimento Front-end em AEM - Parte I
Tags: aem, adobe, cms, frontend
Published: 2021-10-06 16:50:34

O nome original dessa aula é: [Front-end Development for Developer](https://solutionpartners.adobe.com/training/aem_training/aem_ondemand.html).

##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*

![url-protocol](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8yhgpp334qeoapuyzhp.jpg)

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áginas 

- Editá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 Java e Web Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8qvdvleqv33tuk6at5u.jpg)

HTL melhora a segurança dos sites 

Aqui a diferença entre o HTL ( em cima ) e o JSP (usado anteriormente, embaixo): 

![Diferença entre HTL e JSP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysnjlcidc9u0i0wsyfgs.jpg)

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

![Brackets HTL Exemplos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm2806qg7b7sae6dteq8.jpg)

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

![Block statements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pyy26z8ohhev95swzn7.jpg)

**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. 

![Local versus Bundle Java Class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9adl3rt31horbh7dn7g8.jpg)
![Prós e Contras](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhxihj23x5idf6pa22fr.jpg)

**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