Noções básicas sobre componentes

Neste capítulo, exploraremos a tecnologia subjacente de um Componente de sites da Adobe Experience Manager (AEM) por meio de um HelloWorld exemplo. Pequenas modificações serão feitas em um componente existente, abrangendo tópicos de criação, HTL, Modelos do Sling, bibliotecas do lado do cliente.

Pré-requisitos

Revise as ferramentas necessárias e as instruções para configurar um ambiente de desenvolvimento local.

O IDE usado nos vídeos é Código do Visual Studio e Sincronização AEM VSCode plug-in.

Objetivo

  1. Saiba mais sobre a função dos modelos HTL e Modelos do 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. Saiba mais sobre as noções básicas das bibliotecas do lado do cliente para incluir CSS e JavaScript para suportar um componente.

O que você vai criar

Neste capítulo, você fará várias modificações em um HelloWorld componente. No processo de fazer atualizações na HelloWorld você aprenderá sobre as principais áreas de desenvolvimento de componentes AEM.

Projeto inicial do capítulo

Este capítulo baseia-se 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!

OBSERVAÇÃO

Se você concluiu o capítulo anterior com êxito, é 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 seguintes ações.

  1. Em um diretório vazio, clone o aem-guides-wknd repositório:

    $ git clone git@github.com:adobe/aem-guides-wknd.git --branch tutorial/component-basics-start --single-branch
    
    OBSERVAÇÃO

    Opcionalmente, você pode continuar usando o projeto gerado no capítulo anterior, Configuração do projeto.

  2. Navegue até o aem-guides-wknd pasta.

    $ cd aem-guides-wknd
    
  3. Crie e implante o projeto em uma instância local do AEM com o seguinte comando:

    $ mvn clean install -PautoInstallSinglePackage
    
    OBSERVAÇÃO

    Se estiver usando AEM 6.5 ou 6.4, anexe a classic para qualquer comando Maven.

    $ mvn clean install -PautoInstallSinglePackage -Pclassic
    
  4. Importe o projeto para o IDE preferido seguindo as instruções para configurar um ambiente de desenvolvimento local.

Criação de componentes

Os componentes podem ser considerados como pequenos blocos componentes modulares de uma página da Web. Para reutilizar componentes, eles devem ser configuráveis. Isso é feito por meio da caixa de diálogo do autor. Em seguida, criaremos um componente simples e verificaremos como os valores da caixa de diálogo são mantidos em AEM.

Abaixo estão as etapas de alto nível executadas no vídeo acima.

  1. Crie uma nova página com o nome Noções básicas sobre componentes debaixo Site WKND > US > en.
  2. Adicione o Componente 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 desenvolvedor e exiba o Caminho do conteúdo no CRXDE-Lite e inspecione as propriedades da instância do componente.
  5. Use o CRXDE-Lite para exibir o cq:dialog e helloworld.html script localizado em /apps/wknd/components/content/helloworld.

HTL (Linguagem de modelo de HTML) e caixas de diálogo

Idioma do modelo do HTML ou HTL é uma linguagem de modelo leve do lado do servidor usada por componentes AEM para renderizar o conteúdo.

Diálogos 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 adicional 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 no ui.apps módulo.

  2. Abra o helloworld.html e faça uma alteração no HTML Markup.

  3. Use as ferramentas do IDE como Sincronização AEM VSCode para sincronizar a alteração de arquivo com a instância de AEM local.

  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>/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 adicional chamado Título com um nome de ./title:

    <?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. Reabra o arquivo helloworld.html, que representa o script HTL principal responsável pela renderização do HelloWorld componente, localizado em:

        <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 da variável Saudação campo de texto como parte de um H1 tag:

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

Modelos sling

Os Modelos do Sling são objetos Java "POJO" (Plain Old Java Objects) orientados por anotações que facilitam o mapeamento de dados do JCR para variáveis Java e fornecem várias outras sutilezas ao serem desenvolvidas no contexto de AEM.

Em seguida, faremos algumas atualizações no relatório HelloWorldModel Modelo do Sling para aplicar alguma lógica de negócios aos valores armazenados no JCR antes de exibi-los na página.

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

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

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

    @Model(adaptables = Resource.class,
       defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
       public class HelloWorldModel {
       ...
    
  4. Adicione as seguintes linhas à HelloWorldModel classe para mapear os valores das propriedades do JCR do componente title e text para variáveis 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 HelloWorldModel classe , que retorna o valor da propriedade chamada title. Esse método adiciona a lógica adicional para retornar um valor de String de "Valor padrão aqui!" se a propriedade title é nulo ou em branco:

    /***
    *
    * @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 HelloWorldModel classe , que retorna o valor da propriedade chamada text. Esse método transforma a String em todos os caracteres em maiúsculas.

        /***
        *
        * @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 do core módulo:

    $ cd core
    $ mvn clean install -PautoInstallBundle
    
    OBSERVAÇÃO

    Se estiver a utilizar AEM 6.4/6.5 mvn clean install -PautoInstallBundle -Pclassic

  8. Atualizar o arquivo helloworld.html at 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:

    <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 class="cmp-helloworld__item"  data-sly-test="${model.message}">
            <p class="cmp-helloworld__item-label">Model message:</p>
            <pre class="cmp-helloworld__item-output"data-cmp-hook-helloworld="model">${model.message}</pre>
        </div>
    </div>
    
  9. Implante as alterações em uma instância local do AEM usando o plug-in do desenvolvedor do Eclipse ou usando suas habilidades Maven.

Bibliotecas do lado do cliente

Bibliotecas do lado do cliente, clientlibs, abreviando, fornecem um mecanismo para organizar e gerenciar arquivos CSS e JavaScript necessários para uma implementação do AEM Sites. As bibliotecas do lado do cliente são a maneira padrão de incluir CSS e JavaScript em uma página no AEM.

O ui.frontend é um módulo desacoplado webpack projeto integrado ao processo de criação. Isso permite o uso de bibliotecas front-end populares, como Sass, LESS e TypeScript. O ui.frontend será explorado com mais profundidade na Capítulo Bibliotecas do lado do cliente.

Em seguida, atualize os estilos de CSS para a 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é a ui.frontend diretório e

  2. No ui.frontend diretório execute o npm run watch comando:

    $ npm run watch
    
  3. Alterne para o IDE e abra o projeto no ui.frontend módulo.

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

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

    .cmp-helloworld {}
    .cmp-helloworld__title {
        color: red;
    }
    
  6. No terminal, você deve ver a atividade indicando que a variável ui.frontend está compilando e sincronizando as alterações com a instância local do AEM.

    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
    
  7. Retorne ao navegador e observe que a cor do título foi alterada.

    Atualização de Noções básicas sobre componentes

Parabéns!

Parabéns, você acabou de aprender as noções básicas do desenvolvimento de componentes no Adobe Experience Manager!

Próximas etapas

Familiarize-se com as páginas e modelos do Adobe Experience Manager no próximo capítulo Páginas e modelos. Entenda como os Componentes principais são transferidos por proxy para o projeto e aprenda 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 na ramificação Git tutorial/component-basics-solution.

Nesta página