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

  1. Saiba mais sobre a função de modelos HTL e Modelos Sling para renderizar dinamicamente o HTML.
  2. Entenda como as Caixas de diálogo são usadas para facilitar a criação de conteúdo.
  3. 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!

NOTE
Se você concluiu com êxito o capítulo anterior, é possível reutilizar o projeto e ignorar as etapas para verificar o projeto inicial.

Abra um novo terminal de linha de comando e execute as ações a seguir.

  1. 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.
  2. Navegue até o aem-guides-wknd pasta.

    code language-shell
    $ cd aem-guides-wknd
    
  3. 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
    
  4. 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.

  1. Crie uma página chamada Noções básicas sobre componentes debaixo Site da WKND > EUA > en.
  2. Adicione o Componente do Hello World para a página recém-criada.
  3. Abra a caixa de diálogo do componente e insira algum texto. Salve as alterações para ver a mensagem exibida na página.
  4. Alterne para o modo de desenvolvedor, visualize o Caminho de conteúdo no CRXDE-Lite e inspecione as propriedades da instância do componente.
  5. Use o CRXDE-Lite para exibir a cq:dialog e helloworld.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.

  1. Alterne para o IDE e abra o projeto para o ui.apps módulo.

  2. Abra o helloworld.html e atualize a Marcação HTML.

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

  4. Retorne ao navegador e observe que a renderização do componente foi alterada.

  5. Abra o .content.xml arquivo que define a caixa de diálogo do HelloWorld componente em:

    code language-plain
    <code>/aem-guides-wknd/ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/_cq_dialog/.content.xml
    
  6. 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>
    
  7. Reabrir o arquivo helloworld.html, que representa o script HTL principal responsável pela renderização do HelloWorld componente do caminho abaixo:

    code language-plain
        <code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html
    
  8. Atualizar helloworld.html para renderizar o valor de Saudação textfield como parte de um H1 tag:

    code language-html
    <div class="cmp-helloworld" data-cmp-is="helloworld">
        <h1 class="cmp-helloworld__title">${properties.title}</h1>
        ...
    </div>
    
  9. 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.

  1. Abra o arquivo HelloWorldModel.java, que é o Modelo do Sling usado com o HelloWorld componente.

    code language-plain
    <code>/aem-guides-wknd.core/src/main/java/com/adobe/aem/guides/wknd/core/models/HelloWorldModel.java
    
  2. Adicione as seguintes instruções de importação:

    code language-java
    import org.apache.commons.lang3.StringUtils;
    import org.apache.sling.models.annotations.DefaultInjectionStrategy;
    
  3. Atualize o @Model anotação para usar um DefaultInjectionStrategy:

    code language-java
    @Model(adaptables = Resource.class,
       defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
       public class HelloWorldModel {
       ...
    
  4. Adicione as seguintes linhas à HelloWorldModel classe para mapear os valores das propriedades JCR do componente title e text 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() {
            ...
    
  5. Adicione o seguinte método getTitle() para o HelloWorldModel classe, que retorna o valor da propriedade chamada title. Este método adiciona a lógica adicional para retornar um valor de string de "Valor padrão aqui!" se a propriedade title é 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!";
    }
    
  6. Adicione o seguinte método getText() para o HelloWorldModel classe, que retorna o valor da propriedade chamada text. 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;
    }
    
  7. 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
  8. Atualizar o arquivo helloworld.html em aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/content/helloworld/helloworld.html para usar os métodos recém-criados do HelloWorld 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ável model.

    A variável HelloWorld A instância do modelo agora está disponível no HTL por meio do model usando o HelloWord. 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>
    
  9. 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.

  1. Abra uma janela de terminal e navegue até o ui.frontend diretório

  2. Estar em ui.frontend diretório execute o npm 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.

  3. Em seguida, execute o npm run watch comando:

    code language-shell
    $ npm run watch
    
  4. Alterne para o IDE e abra o projeto para o ui.frontend módulo.

  5. Abra o arquivo ui.frontend/src/main/webpack/components/_helloworld.scss.

  6. Atualize o arquivo para exibir um título vermelho:

    code language-scss
    .cmp-helloworld {}
    .cmp-helloworld__title {
        color: red;
    }
    
  7. 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
    
  8. Retorne ao navegador e observe que a cor do título mudou.

    Atualização das noções básicas do componente

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.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9