Noções básicas sobre componentes component-basics
Neste capítulo, vamos explorar a tecnologia subjacente de um componente do Sites do Adobe Experience Manager (AEM) por meio de um HelloWorld
exemplo. Pequenas modificações são feitas em um componente existente, que abrange tópicos de criação, HTL, Modelos Sling e bibliotecas do lado do cliente.
Pré-requisitos prerequisites
Analisar as ferramentas e instruções necessárias para a configuração de um ambiente de desenvolvimento local.
O IDE usado nos vídeos é Código do Visual Studio e a variável Sincronização VSCode com AEM plug-in.
Objetivo objective
- Saiba mais sobre a função de modelos HTL e Modelos Sling para renderizar dinamicamente o HTML.
- Entenda como as Caixas de diálogo são usadas para facilitar a criação de conteúdo.
- Aprenda os conceitos básicos das bibliotecas do lado do cliente para incluir CSS e JavaScript para suportar um componente.
O que você vai criar what-build
Neste capítulo, você executa várias modificações em um HelloWorld
componente. Ao fazer atualizações no HelloWorld
componente, você aprenderá sobre as principais áreas do desenvolvimento de componentes do AEM.
Projeto de início de capítulo starter-project
Este capítulo se baseia em um projeto genérico gerado pelo Arquétipo de projeto AEM. Assista ao vídeo abaixo e revise o pré-requisitos para começar!
Abra um novo terminal de linha de comando e execute as ações a seguir.
-
Em um diretório vazio, clone o aem-guides-wknd repositório:
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd.git --branch tutorial/component-basics-start --single-branch
note note NOTE Como opção, você pode continuar usando o projeto gerado no capítulo anterior, Configuração do projeto. -
Navegue até o
aem-guides-wknd
pasta.code language-shell $ cd aem-guides-wknd
-
Crie e implante o projeto em uma instância local do AEM com o seguinte comando:
code language-shell $ mvn clean install -PautoInstallSinglePackage
note note NOTE Se estiver usando o AEM 6.5 ou 6.4, anexe o classic
para qualquer comando Maven.code language-shell $ mvn clean install -PautoInstallSinglePackage -Pclassic
-
Importe o projeto para o IDE de sua preferência seguindo as instruções para configurar um ambiente de desenvolvimento local.
Criação de componentes component-authoring
Os componentes podem ser considerados pequenos blocos de construção modulares de uma página da Web. Para reutilizar componentes, eles devem ser configuráveis. Isso é realizado por meio da caixa de diálogo do autor. Em seguida, vamos criar um componente simples e inspecionar como os valores da caixa de diálogo são mantidos no AEM.
Abaixo estão as etapas de alto nível executadas no vídeo acima.
- Crie uma página chamada Noções básicas sobre componentes debaixo Site da WKND
>
EUA>
en. - Adicione o Componente do Hello World para a página recém-criada.
- Abra a caixa de diálogo do componente e insira algum texto. Salve as alterações para ver a mensagem exibida na página.
- Alterne para o modo de desenvolvedor, visualize o Caminho de conteúdo no CRXDE-Lite e inspecione as propriedades da instância do componente.
- Use o CRXDE-Lite para exibir a
cq:dialog
ehelloworld.html
script de/apps/wknd/components/content/helloworld
.
HTL (Linguagem de modelo HTML) e caixas de diálogo htl-dialogs
Idioma do modelo do HTML ou HTL é uma linguagem de modelo leve do lado do servidor usada por componentes do AEM para renderizar conteúdo.
Caixas de diálogo defina as configurações disponíveis que podem ser feitas para um componente.
Em seguida, atualizaremos o HelloWorld
Script HTL para exibir uma saudação extra antes da mensagem de texto.
Abaixo estão as etapas de alto nível executadas no vídeo acima.
-
Alterne para o IDE e abra o projeto para o
ui.apps
módulo. -
Abra o
helloworld.html
e atualize a Marcação HTML. -
Use as ferramentas do IDE como Sincronização VSCode com AEM para sincronizar a alteração de arquivo com a instância local do AEM.
-
Retorne ao navegador e observe que a renderização do componente foi alterada.
-
Abra o
.content.xml
arquivo que define a caixa de diálogo doHelloWorld
componente em:code language-plain <code>/aem-guides-wknd/ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/_cq_dialog/.content.xml
-
Atualize a caixa de diálogo para adicionar um campo de texto extra chamado Título com o nome de
./title
:code language-xml <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="nt:unstructured" jcr:title="Properties" sling:resourceType="cq/gui/components/authoring/dialog"> <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <title jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Title" name="./title"/> <text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Text" name="./text"/> </items> </column> </items> </content> </jcr:root>
-
Reabrir o arquivo
helloworld.html
, que representa o script HTL principal responsável pela renderização doHelloWorld
componente do caminho abaixo:code language-plain <code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html
-
Atualizar
helloworld.html
para renderizar o valor de Saudação textfield como parte de umH1
tag:code language-html <div class="cmp-helloworld" data-cmp-is="helloworld"> <h1 class="cmp-helloworld__title">${properties.title}</h1> ... </div>
-
Implante as alterações em uma instância local do AEM usando o plug-in do desenvolvedor ou usando suas habilidades do Maven.
Modelos sling sling-models
Os Modelos do Sling são objetos POJO (Plain Old Java™ Objects) do Java™ orientados por anotações que facilitam o mapeamento de dados do JCR para as variáveis do Java™. Eles também fornecem várias outras sutilezas ao se desenvolver no contexto do AEM.
Em seguida, vamos fazer algumas atualizações no HelloWorldModel
Sling Model para aplicar alguma lógica de negócios aos valores armazenados no JCR antes de enviá-los para a página.
-
Abra o arquivo
HelloWorldModel.java
, que é o Modelo do Sling usado com oHelloWorld
componente.code language-plain <code>/aem-guides-wknd.core/src/main/java/com/adobe/aem/guides/wknd/core/models/HelloWorldModel.java
-
Adicione as seguintes instruções de importação:
code language-java import org.apache.commons.lang3.StringUtils; import org.apache.sling.models.annotations.DefaultInjectionStrategy;
-
Atualize o
@Model
anotação para usar umDefaultInjectionStrategy
:code language-java @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL) public class HelloWorldModel { ...
-
Adicione as seguintes linhas à
HelloWorldModel
classe para mapear os valores das propriedades JCR do componentetitle
etext
para variáveis Java™:code language-java ... @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL) public class HelloWorldModel { ... @ValueMapValue private String title; @ValueMapValue private String text; @PostConstruct protected void init() { ...
-
Adicione o seguinte método
getTitle()
para oHelloWorldModel
classe, que retorna o valor da propriedade chamadatitle
. Este método adiciona a lógica adicional para retornar um valor de string de "Valor padrão aqui!" se a propriedadetitle
é nulo ou está em branco:code language-java /*** * * @return the value of title, if null or blank returns "Default Value here!" */ public String getTitle() { return StringUtils.isNotBlank(title) ? title : "Default Value here!"; }
-
Adicione o seguinte método
getText()
para oHelloWorldModel
classe, que retorna o valor da propriedade chamadatext
. Esse método transforma a string em todos os caracteres em maiúsculas.code language-java /*** * * @return All caps variation of the text value */ public String getText() { return StringUtils.isNotBlank(this.text) ? this.text.toUpperCase() : null; }
-
Crie e implante o pacote a partir do
core
módulo:code language-shell $ cd core $ mvn clean install -PautoInstallBundle
note note NOTE Para uso do AEM 6.4/6.5 mvn clean install -PautoInstallBundle -Pclassic
-
Atualizar o arquivo
helloworld.html
emaem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/content/helloworld/helloworld.html
para usar os métodos recém-criados doHelloWorld
modelo.A variável
HelloWorld
O modelo é instanciado para esta instância do componente por meio da diretiva HTL:data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel"
, salvando a instância na variávelmodel
.A variável
HelloWorld
A instância do modelo agora está disponível no HTL por meio domodel
usando oHelloWord
. Essas invocações de métodos podem usar a sintaxe de método encurtada, por exemplo:${model.getTitle()}
pode ser reduzida para${model.title}
.Da mesma forma, todos os scripts HTL são inseridos com objetos globais que podem ser acessadas usando a mesma sintaxe dos objetos Modelo do Sling.
code language-html <div class="cmp-helloworld" data-cmp-is="helloworld" data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel"> <h1 class="cmp-helloworld__title">${model.title}</h1> <div class="cmp-helloworld__item" data-sly-test="${properties.text}"> <p class="cmp-helloworld__item-label">Text property:</p> <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${properties.text}</pre> </div> <div class="cmp-helloworld__item" data-sly-test="${model.text}"> <p class="cmp-helloworld__item-label">Sling Model getText() property:</p> <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${model.text}</pre> </div> </div>
-
Implante as alterações em uma instância local do AEM usando o plug-in Desenvolvedor do Eclipse ou usando suas habilidades do Maven.
Bibliotecas do lado do cliente client-side-libraries
Bibliotecas do lado do cliente, clientlibs
em resumo, o fornece um mecanismo para organizar e gerenciar arquivos CSS e JavaScript necessários para uma implementação do AEM Sites. Bibliotecas do lado do cliente são a maneira padrão de incluir CSS e JavaScript em uma página no AEM.
A variável ui.frontend O módulo é um dispositivo dissociado webpack que está integrado ao processo de criação. Isso permite o uso de bibliotecas front-end populares como Sass, LESS e TypeScript. A variável ui.frontend
O módulo é explorado com mais profundidade na Capítulo Bibliotecas do lado do cliente.
Em seguida, atualize os estilos CSS para o HelloWorld
componente.
Abaixo estão as etapas de alto nível executadas no vídeo acima.
-
Abra uma janela de terminal e navegue até o
ui.frontend
diretório -
Estar em
ui.frontend
diretório execute onpm install npm-run-all --save-dev
comando para instalar o npm-run-all módulo do nó. Esta etapa é necessário no projeto AEM gerado pelo Arquétipo 39, na próxima versão do Arquétipo, isso não é necessário. -
Em seguida, execute o
npm run watch
comando:code language-shell $ npm run watch
-
Alterne para o IDE e abra o projeto para o
ui.frontend
módulo. -
Abra o arquivo
ui.frontend/src/main/webpack/components/_helloworld.scss
. -
Atualize o arquivo para exibir um título vermelho:
code language-scss .cmp-helloworld {} .cmp-helloworld__title { color: red; }
-
No terminal, você deve ver a atividade indicando que a variável
ui.frontend
O módulo está compilando e sincronizando as alterações com a instância local do AEM.code language-shell Entrypoint site 214 KiB = clientlib-site/site.css 8.45 KiB clientlib-site/site.js 206 KiB 2022-02-22 17:28:51: webpack 5.69.1 compiled successfully in 119 ms change:dist/index.html + jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css + jcr_root/apps/wknd/clientlibs/clientlib-site/css + jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js + jcr_root/apps/wknd/clientlibs/clientlib-site/js + jcr_root/apps/wknd/clientlibs/clientlib-site + jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt + jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt + jcr_root/apps/wknd/clientlibs/clientlib-dependencies
-
Retorne ao navegador e observe que a cor do título mudou.
Parabéns. congratulations
Parabéns, você aprendeu as noções básicas de desenvolvimento de componentes no Adobe Experience Manager!
Próximas etapas next-steps
Conheça as páginas e os modelos do Adobe Experience Manager no próximo capítulo Páginas e modelos. Entenda como os Componentes principais são enviados por proxy para o projeto e saiba mais sobre as configurações de política avançadas dos modelos editáveis para criar um modelo de Página de artigo bem estruturado.
Exibir o código concluído em GitHub ou revise e implante o código localmente em na ramificação Git tutorial/component-basics-solution
.