Desenvolvimento Front-end em AEM - Parte I

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