Desenvolvimento de componentes do Adobe Experience Manager (AEM) (interface clássica) developing-aem-components-classic-ui

A interface clássica usa ExtJS para criar dispositivos que fornecem a aparência dos componentes. Devido à natureza desses widgets, há algumas diferenças entre como os componentes interagem com a interface clássica e o interface habilitada para toque.

NOTE
Vários aspectos do desenvolvimento de componentes são comuns à interface clássica e à interface habilitada para toque, portanto você deve ler Componentes do AEM - Noções básicas antes usando esta página, que lida com as especificidades da interface clássica.
NOTE
Embora a Linguagem de modelo de HTML (HTL) e o JSP possam ser usados para desenvolver componentes para a interface clássica, esta página ilustra o desenvolvimento com o JSP. Isso se deve exclusivamente ao histórico de uso do JSP na interface clássica.
HTL agora é a linguagem de script recomendada para AEM. Consulte HTL e Desenvolvimento de componentes do AEM para comparar métodos.

Estrutura structure

A estrutura básica de um componente é abordada na página Componentes do AEM - Noções básicas, que se aplica às interfaces do usuário sensíveis ao toque e às clássicas. Mesmo que você não precise usar as configurações para a interface habilitada para toque no novo componente, pode ajudar a estar ciente delas ao herdar de componentes existentes.

Scripts JSP jsp-scripts

Scripts JSP ou Servlets podem ser usados para renderizar componentes. De acordo com as regras de processamento de solicitações do Sling, o nome do script padrão é:

<*componentname*>.jsp

global.jsp global-jsp

O arquivo de script JSP global.jsp O é usado para fornecer acesso rápido a objetos específicos (ou seja, para acessar conteúdo) para qualquer arquivo de script JSP usado para renderizar um componente.

Portanto global.jsp deve ser incluído em cada script JSP de renderização de componente em que um ou mais objetos fornecidos em global.jsp são usados.

A localização do padrão global.jsp é:

/libs/foundation/global.jsp

NOTE
O caminho /libs/wcm/global.jsp, que foi usado pelas versões CQ 5.3 e anteriores, agora está obsoleto.

Função de global.jsp, APIs usadas e Taglibs function-of-global-jsp-used-apis-and-taglibs

A seguir estão os objetos mais importantes fornecidos por padrão global.jsp:

Resumo:

  • <cq:defineObjects />

    • slingRequest - O Objeto De Solicitação Encapsulado ( SlingHttpServletRequest).
    • slingResponse - O Objeto De Resposta Disposto ( SlingHttpServletResponse).
    • resource - O objeto de recurso Sling ( slingRequest.getResource();).
    • resourceResolver - O objeto Sling Resource Resolver ( slingRequest.getResoucreResolver();).
    • currentNode - O nó JCR resolvido para a solicitação.
    • log - O logger Padrão ().
    • sling - O auxiliar de script do Sling.
    • properties - As propriedades do recurso endereçado ( resource.adaptTo(ValueMap.class);).
    • pageProperties - As propriedades da página do recurso endereçado.
    • pageManager - O gerenciador de páginas para acessar páginas de conteúdo AEM ( resourceResolver.adaptTo(PageManager.class);).
    • component - O objeto do componente AEM atual.
    • designer - O objeto Designer para recuperar informações de design ( resourceResolver.adaptTo(Designer.class);).
    • currentDesign - O design do recurso endereçado.
    • currentStyle - O estilo do recurso endereçado.

Acesso ao conteúdo accessing-content

Há três métodos para acessar conteúdo no WCM do AEM:

  • Por meio do objeto de propriedades introduzido no global.jsp:

    O objeto de propriedades é uma instância de um ValueMap (consulte API Sling) e contém todas as propriedades do recurso atual.

    Exemplo: String pageTitle = properties.get("jcr:title", "no title"); usado no script de renderização de um componente página.

    Exemplo: String paragraphTitle = properties.get("jcr:title", "no title"); usado no script de renderização de um componente de parágrafo padrão.

  • Através do currentPage objeto introduzido no global.jsp:

    A variável currentPage é uma instância de uma página (consulte API AEM). A classe de página fornece alguns métodos para acessar conteúdo.

    Exemplo: String pageTitle = currentPage.getTitle();

  • Via currentNode objeto introduzido no global.jsp:

    A variável currentNode é uma instância de um nó (consulte API JCR). As propriedades de um nó podem ser acessadas pelo getProperty() método.

    Exemplo: String pageTitle = currentNode.getProperty("jcr:title");

Bibliotecas de tags JSP jsp-tag-libraries

As bibliotecas de tags CQ e Sling fornecem acesso a funções específicas para uso no script JSP de seus modelos e componentes.

Para obter mais informações, consulte o documento Bibliotecas de tags.

Uso de bibliotecas de HTML do lado do cliente using-client-side-html-libraries

Sites modernos dependem muito do processamento do lado do cliente orientado por códigos JavaScript e CSS complexos. Organizar e otimizar a veiculação desse código pode ser um problema complicado.

Para ajudar a lidar com esse problema, o AEM fornece Pastas de biblioteca do lado cliente, que permite armazenar o código do lado do cliente no repositório, organizá-lo em categorias e definir quando e como cada categoria de código deve ser entregue ao cliente. O sistema de biblioteca do lado do cliente cuida de produzir os links corretos na página final da Web para carregar o código correto.

Consulte o documento Uso de bibliotecas de HTML do lado do cliente para obter mais informações.

Caixa de diálogo dialog

Seu componente precisa de uma caixa de diálogo para que os autores adicionem e configurem o conteúdo.

Consulte Componentes do AEM - Noções básicas para obter mais detalhes.

Configuração do comportamento de edição configuring-the-edit-behavior

É possível configurar o comportamento de edição de um componente. Isso inclui atributos como ações disponíveis para o componente, características do editor de local e os ouvintes relacionados aos eventos no componente. A configuração é comum às interfaces habilitadas para toque e às clássicas, embora com determinadas diferenças específicas.

A variável editar comportamento de um componente está configurado adicionando um cq:editConfig nó do tipo cq:EditConfig abaixo do nó do componente (do tipo cq:Component) e adicionando propriedades específicas e nós filhos.

Uso e extensão de dispositivos ExtJS using-and-extending-extjs-widgets

Consulte Uso e extensão de dispositivos ExtJS para obter mais detalhes.

Utilização de xtypes para widgets ExtJS using-xtypes-for-extjs-widgets

Consulte Uso de xtypes para obter mais detalhes.

Desenvolvimento de novos componentes developing-new-components

Esta seção descreve como criar seus próprios componentes e adicioná-los ao sistema de parágrafos.

Uma maneira rápida de começar é copiar um componente existente e fazer as alterações desejadas.

Um exemplo de como desenvolver um componente é descrito detalhadamente em Extensão do componente de Texto e imagem - um exemplo.

Desenvolver um novo componente (Adaptar componente existente) develop-a-new-component-adapt-existing-component

Para desenvolver novos componentes para AEM com base em um componente existente, você pode copiar o componente, criar um arquivo JavaScript para o novo componente e armazená-lo em um local acessível ao AEM (consulte também Personalização de Componentes e Outros Elementos):

  1. Usando o CRXDE Lite, crie uma pasta de componente no:

    / apps/<myProject>/components/<myComponent>

    Recrie a estrutura do nó como em bibliotecas e copie a definição de um componente existente, como o componente de Texto. Por exemplo, para personalizar a cópia do componente de Texto:

    • de /libs/foundation/components/text
    • para /apps/myProject/components/text
  2. Modifique o jcr:title para refletir seu novo nome.

  3. Abra a pasta de novos componentes e faça as alterações necessárias. Além disso, exclua todas as informações irrelevantes na pasta.

    É possível fazer alterações como:

    • adição de um campo na caixa de diálogo

      • cq:dialog - caixa de diálogo para a interface habilitada para toque
      • dialog - caixa de diálogo para a interface clássica
    • substituindo o .jsp arquivo (nomeie-o com o nome do novo componente)

    • ou retrabalhando completamente o componente inteiro, se desejar

    Por exemplo, se você fizer uma cópia do componente Texto padrão, poderá adicionar um campo extra à caixa de diálogo e atualizar o .jsp para processar a entrada feita lá.

    note note
    NOTE
    Um componente para o:
    note note
    NOTE
    Uma caixa de diálogo definida para a interface clássica opera na interface habilitada para toque.
    Uma caixa de diálogo definida para a interface habilitada para toque não funcionará na interface clássica.
    Dependendo da instância e do ambiente de autor, talvez você queira definir ambos os tipos de caixa de diálogo para o componente.
  4. Um dos nós a seguir deve estar presente e inicializado corretamente para que o novo componente seja exibido:

    • cq:dialog - caixa de diálogo para a interface habilitada para toque
    • dialog - caixa de diálogo para a interface clássica
    • cq:editConfig - como os componentes se comportam no ambiente de edição (por exemplo, arrastar e soltar)
    • design_dialog - caixa de diálogo para o modo de design (somente interface clássica)
  5. Ative o novo componente no seu sistema de parágrafos:

    • utilização do CRXDE Lite para adicionar o valor <path-to-component> (por exemplo, /apps/geometrixx/components/myComponent) para os componentes de propriedade do nó /etc/designs/geometrixx/jcr:content/contentpage/par
    • seguindo as instruções em Adicionar novos componentes a sistemas de parágrafos
  6. No WCM do AEM, abra uma página no seu site e insira um parágrafo do tipo criado para verificar se o componente está funcionando corretamente.

NOTE
Para ver as estatísticas de tempo do carregamento de página, é possível usar Ctrl-Shift-U - com ?debugClientLibs=true definido no URL.

Adicionar um novo componente ao Sistema de parágrafos (Modo Design) adding-a-new-component-to-the-paragraph-system-design-mode

Depois que o componente tiver sido desenvolvido, você o adiciona ao sistema de parágrafo, o que permite aos autores selecionar e usar o componente ao editar uma página.

  1. Acesse uma página em seu ambiente de criação que use o sistema de parágrafos, por exemplo, <contentPath>/Test.html.

  2. Alterne para o modo Design por meio de:

    • adicionando ?wcmmode=design ao final do URL e acessando novamente, por exemplo:

      <contextPath>/ Test.html?wcmmode=design

    • clicar em Design no Sidekick

    Agora você está no modo de design e pode editar o sistema de parágrafos.

  3. Clique em Editar.

    Uma lista de componentes pertencentes ao sistema de parágrafos é mostrada. O novo componente também está listado.

    Os componentes podem ser ativados (ou desativados) para determinar quais são oferecidos ao autor ao editar uma página.

  4. Ative o componente e volte ao modo de edição normal para confirmar que ele está disponível para uso.

Extensão do componente de Texto e imagem - um exemplo extending-the-text-and-image-component-an-example

Esta seção fornece um exemplo de como estender o componente padrão de texto e imagem amplamente usado com um recurso de posicionamento de imagem configurável.

A extensão para o componente de texto e imagem permite que os editores usem toda a funcionalidade existente do componente, além de ter uma opção extra para especificar a disposição da imagem:

  • No lado esquerdo do texto (comportamento atual e o novo padrão)
  • E no lado direito

Depois de estender esse componente, você pode configurar a disposição da imagem por meio da caixa de diálogo do componente.

As seguintes técnicas estão descritas neste exercício:

  • Copiar o nó do componente existente e modificar seus metadados
  • Modificar a caixa de diálogo do componente, incluindo a herança de widgets das caixas de diálogo principais
  • Modificação do script do componente para implementar a nova funcionalidade
NOTE
Este exemplo é direcionado para a interface clássica.
NOTE
Este exemplo é baseado no conteúdo de amostra do Geometrixx, que não é mais enviado com AEM, tendo sido substituído por We.Retail. Consulte o documento Implementação de referência do We.Retail para saber como baixar e instalar o Geometrixx.

Extensão do componente textimage existente extending-the-existing-textimage-component

Para criar o componente, use o componente textimage padrão como uma base e modifique-o. Você armazena o novo componente no aplicativo de exemplo WCM do Geometrixx AEM.

  1. Copie o componente de imagem de texto padrão de /libs/foundation/components/textimage na pasta do componente Geometrixx, /apps/geometrixx/components, utilizando teximage como o nome do nó de destino. (Copie o componente navegando até o componente, clicando com o botão direito do mouse e selecionando Copiar e navegando até o diretório de destino.)

    chlimage_1-59

  2. Para manter esse exemplo simples, navegue até o componente copiado e exclua todos os subnós do novo nó de imagem de texto, exceto os seguintes:

    • definição de diálogo: textimage/dialog
    • script do componente: textimage/textimage.jsp
    • editar nó de configuração (permitindo arrastar e soltar ativos): textimage/cq:editConfig
    note note
    NOTE
    A definição da caixa de diálogo depende da interface do usuário:
    • Interface habilitada para toque: textimage/cq:dialog
    • IU Clássica: textimage/dialog
  3. Edite os metadados do componente:

    • Nome do componente

      • Definir jcr:description para Text Image Component (Extended)
      • Definir jcr:title para Text Image (Extended)
    • Grupo, onde o componente está listado no sidekick (deixe como está)

      • Sair componentGroup definir como General
    • O componente principal do novo componente (o componente textimage padrão)

      • Definir sling:resourceSuperType para foundation/components/textimage

    Após esta etapa, o nó do componente terá esta aparência:

    chlimage_1-60

  4. Altere o sling:resourceType propriedade do nó de configuração de edição da imagem (propriedade: textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType) para geometrixx/components/textimage.

    Dessa forma, quando uma imagem é solta no componente na página, a variável sling:resourceType a propriedade do componente textimage estendido está definida como: geometrixx/components/textimage.

  5. Modifique a caixa de diálogo do componente para incluir a nova opção. O novo componente herda as partes da caixa de diálogo que são as mesmas da original. A única adição feita é estender a variável Avançado , adicionando um Posição da imagem lista suspensa, com opções Esquerda e Direita:

    • Deixe a textimage/dialogpropriedades inalteradas.

    Observe como textimage/dialog/items O tem quatro subnós, tab1 a tab4, que representam as quatro guias da caixa de diálogo textimage.

    • Para as duas primeiras guias (tab1 e tab2):

      • Altere xtype para cqinclude (para herdar do componente padrão).
      • Adicionar uma propriedade de caminho com valores /libs/foundation/components/textimage/dialog/items/tab1.infinity.jsone /libs/foundation/components/textimage/dialog/items/tab2.infinity.json, respectivamente.
      • Remova todas as outras propriedades ou nós secundários.
    • Para tab3:

      • Deixar as propriedades e os subnós sem alterações

      • Adicionar uma definição de campo a tab3/items, posição do nó do tipo cq:Widget

      • Defina as seguintes propriedades (do tipo String) para o novo tab3/items/positionnó:

        • name: ./imagePosition
        • xtype: selection
        • fieldLabel: Image Position
        • type: select
      • Adicionar subnó position/options do tipo cq:WidgetCollection para representar as duas opções de posicionamento de imagem e, abaixo dela, criar dois nós, o1 e o2 do tipo nt:unstructured.

      • Para o nó position/options/o1 defina as propriedades: text para Left e value para left.

      • Para o nó position/options/o2 defina as propriedades: text para Right e value para right.

    • Excluir guia 4.

    A posição da imagem é mantida no conteúdo como a imagePositionpropriedade do nó que representa textimage parágrafo. Após essas etapas, a caixa de diálogo do componente fica assim:

    chlimage_1-61

  6. Estender o script do componente, textimage.jsp, com manipulação extra do novo parâmetro:

    code language-xml
    Image image = new Image(resource, "image");
    
    if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
         image.loadStyleData(currentStyle);
    

    Você substituirá o fragmento de código enfatizado %><div class="image"><% com o novo código gerando um estilo personalizado para essa tag.

    code language-xml
    // todo: add new CSS class for the 'right image' instead of using
    // the style attribute
    String style="";
         if (properties.get("imagePosition", "left").equals("right")) {
              style = "style=\"float:right\"";
         }
         %><div <%= style %> class="image"><%
    
  7. Salve o componente no repositório. O componente está pronto para teste.

Verificação do novo componente checking-the-new-component

Depois que o componente tiver sido desenvolvido, é possível adicioná-lo ao sistema de parágrafo, o que permite aos autores selecionar e usar o componente ao editar uma página. Essas etapas permitem testar o componente.

  1. Abra uma página no Geometrixx, como Inglês/Empresa.
  2. Alterne para o modo de design clicando em Design no Sidekick.
  3. Edite o design do sistema de parágrafo clicando em Editar no sistema de parágrafo no meio da página. Uma lista de componentes, que podem ser colocados no sistema de parágrafo, é mostrada e deve incluir seu componente recém-desenvolvido, Imagem de texto (estendida) . Ative-o para o sistema de parágrafo selecionando-o e clicando em OK.
  4. Volte para o modo de edição.
  5. Adicione o parágrafo Imagem de texto (Estendido) ao sistema de parágrafo, inicialize o texto e a imagem com conteúdo de amostra. Salve as alterações.
  6. Abra a caixa de diálogo do texto e do parágrafo de imagem, altere a Posição da imagem na guia Avançado para Direita e clique em OK para salvar as alterações.
  7. O parágrafo é renderizado com a imagem à direita.
  8. O componente está pronto para uso.

O componente armazena seu conteúdo em um parágrafo na página Empresa.

Desativar a capacidade de carregamento do componente de Imagem disable-upload-capability-of-the-image-component

Para desativar esse recurso, use o componente de imagem padrão como uma base e modifique-o. Você armazena o novo componente no aplicativo Geometrixx example.

  1. Copie o componente de imagem padrão de /libs/foundation/components/image na pasta do componente Geometrixx, /apps/geometrixx/components, usando imagem como o nome do nó de destino.

    chlimage_1-62

  2. Edite os metadados do componente:

    • Definir jcr:title para Image (Extended)
  3. Vá até /apps/geometrixx/components/image/dialog/items/image.

  4. Adicionar uma propriedade:

    • Nome: allowUpload
    • Tipo: String
    • Valor: false

    chlimage_1-63

  5. Clique em Salvar tudo. O componente está pronto para teste.

  6. Abra uma página no Geometrixx, como Inglês/Empresa.

  7. Alterne para o modo de design e ative a Imagem (Estendida).

  8. Volte para o modo de edição e adicione-o ao sistema de parágrafos. Nas próximas imagens, é possível ver as diferenças entre o componente de imagem original e aquele que você criou.

    Componente da imagem original:

    chlimage_1-64

    Seu novo componente de imagem:

    chlimage_1-65

  9. O componente está pronto para uso.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2