Visão geral dos componentes components-overview

Esta página fornece uma visão geral dos componentes do Adobe Experience Manager (AEM), como os usados para criação de página.

O que são componentes? what-exactly-is-a-component

  • Unidades modulares que realizam funcionalidades específicas para apresentar conteúdo em seu site.
  • Reutilizáveis.
  • Desenvolvidos como unidades independentes em uma pasta do repositório.
  • Não contêm arquivos de configuração ocultos.
  • Podem conter outros componentes.
  • Pode ser executado em qualquer lugar dentro de qualquer sistema AEM. Eles também podem ser limitados para execução em componentes específicos.
  • Têm uma interface de usuário padronizada.
  • Têm um comportamento de edição que pode ser configurado.
  • Use caixas de diálogo que são criadas usando subelementos com base nos componentes da interface do Granite
  • São desenvolvidos usando HTL (recomendado) ou JSP.
  • Podem ser desenvolvidos para criar componentes personalizados que estendem a funcionalidade padrão.

Como os componentes são modulares, você pode:

  • Desenvolver um novo componente na instância local.
  • Implantá-los no ambiente de teste.
  • Implantá-los no ambiente de criação ativo, onde eles permitem que autores e/ou administradores adicionem e configurem conteúdo.
  • Implante-o em seu(s) ambiente(s) de publicação ativo(s), onde eles são usados para renderizar conteúdo para os visitantes do seu site. Determinados componentes, por exemplo, para Comunidades, também aceitam a entrada dos usuários.

Cada componente do AEM:

  • É um tipo de recurso.
  • É uma coleção de scripts que executa completamente uma função específica.
  • Pode funcionar em isolamento, significando em AEM ou em um portal.

Componentes prontos para uso dentro do AEM out-of-the-box-components-within-aem

O AEM vem com uma variedade de componentes prontos para uso que fornecem funcionalidade abrangente, incluindo:

  • Sistema de parágrafos ( parsys)
  • Página ( responsivegrid - somente interface habilitada para toque)
  • Texto
  • Imagem, com texto de acompanhamento
  • Barra de ferramentas

Os componentes fornecidos e seu uso nos sites de amostra do We.Retail fornecidos ilustram como implementar e usar componentes. Os componentes são fornecidos com todos os códigos-fonte e podem ser usados como estão ou como pontos de partida para componentes modificados ou estendidos.

Componentes principais e Componentes de base core-components-and-foundation-components

Há dois conjuntos de componentes AEM fornecidos pelo Adobe disponíveis:

Os Componentes principais foram introduzidos com o AEM 6.3 e oferecem funcionalidade de criação flexível e repleta de recursos. O site de referência We.Retail ilustra como os componentes principais podem ser usados e representa as práticas recomendadas atuais de desenvolvimento de componentes.

Os Componentes de base estão disponíveis com AEM para muitas versões e estão prontos para uso em uma instalação padrão do AEM. Embora ainda seja compatível, a maioria foi descontinuada, não está mais aprimorada e é baseada em tecnologias herdadas.

NOTE
Os Componentes principais representam as práticas recomendadas atuais para design e desenvolvimento de componentes e servem como implementações de referência.
As Ferramentas de modernização do AEM podem ajudar na migração para os Componentes principais.

Visualização de componentes disponíveis viewing-available-components

Para obter uma visão geral de todos os componentes disponíveis na instância do AEM, use o Console de Componentes.

Como alternativa, você também pode usar o CRXDE Lite para obter uma lista de todos os componentes disponíveis no repositório.

  1. No CRXDE Lite, clique em Ferramentas na barra de ferramentas e, em seguida, em Consulta para abrir a guia Consulta.

  2. Na guia Consulta, selecione XPath como Tipo.

  3. No campo de entrada Consulta, digite a seguinte string:

    //element(*, cq:Component)

  4. Clique em Executar e os componentes serão listados.

Recursos adicionais further-reading

As páginas a seguir fornecem informações mais detalhadas sobre o desenvolvimento desses e de outros componentes:

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