Show Menu
TOPICS×

Desenvolvimento dos componentes principais

Visão geral

Os componentes principais fornecem componentes básicos robustos e extensíveis, e seus destaques são:
  • Recursos ricos em recursos
    • Opções de configuração flexíveis para acomodar muitos casos de uso
    • Recursos pré-configuráveis para definir quais recursos estão disponíveis para autores de páginas
  • Entrega contínua
    • Melhorias frequentes na funcionalidade incremental
    • Disponibilidade do código fonte no GitHub para permitir que a comunidade de desenvolvedores forneça feedback e contribua
    • Instalação por meio de um pacote de conteúdo lançado separadamente para que as atualizações de componentes sejam feitas independentemente das atualizações do AEM
  • Implementação moderna
    • Marcação definida na Linguagem de Modelo HTML (HTL)
    • Lógica do modelo de conteúdo implementada com Modelos Sling
  • Marcação principal
  • Capacidade de serializar como JSON o modelo de conteúdo para casos de uso de CMS sem cabeçalho
  • Acessíveis
Os componentes principais exigem o AEM 6.3 ou posterior e o Java 8 e exigem o uso de modelos editáveis
Os Componentes principais não funcionam com a interface clássica nem com modelos estáticos.

Visão geral da sessão Gems

Para obter uma introdução aos Componentes principais, os recursos que eles oferecem e como eles são aproveitados no AEM, verifique os Componentes principais do AEM da sessão do AEM Gems.
O Gems no Adobe Experience Manager é uma série de soluções técnicas oferecidas por especialistas da Adobe. Esta série complementa a documentação do produto e de todos os outros canais técnicos, permitindo que os desenvolvedores entrem em contato e aprofundem o assunto.

Tutorial do WKND Developer

Get started developing AEM Sites with Core Components by following this step-by-step tutorial.

Arquivo de projeto do AEM

O AEM Project Archetype cria um projeto mínimo do Adobe Experience Manager como ponto de partida para seus próprios projetos, incluindo um exemplo de helloworld do componente HTL personalizado com SlingModels para a lógica e implementação adequada dos Componentes Principais com o padrão de proxy recomendado.

Entregue pelo GitHub

Os Componentes principais são desenvolvidos e disponibilizados pelo GitHub.
CÓDIGO NO GITHUB
Você pode encontrar o código desta página no GitHub
Consulte a página de documentação Uso dos componentes principais para saber como começar a usá-los no seu projeto.
Ter os componentes principais no GitHub permitirá fazer atualizações frequentes e ouvir os comentários da comunidade de desenvolvedores do AEM. Além disso, isso deve ajudar os clientes e parceiros a seguir padrões semelhantes ao criar componentes personalizados.
Para manter-se atualizado sobre as últimas alterações nos componentes principais, você pode observar o repositório dos Componentes principais no GitHub.

Biblioteca de componentes

Consulte a Biblioteca de componentes, que mostra a versão atual dos Componentes principais e fornece exemplos de seu uso.

Modo de execução do conteúdo de amostra

Os Componentes principais ficam visíveis no Início rápido quando o conteúdo de amostra está presente, pois o site de referência We.Retail os utiliza. No entanto, ao executar na produção (no
nosamplecontent
modo de execução, sem conteúdo de amostra ativado), os componentes principais não estarão mais presentes e devem ser instalados nas instâncias do AEM pela equipe de desenvolvimento e/ou operações.
Em ambientes de produção, sempre execute o Quickstart no
nosamplecontent
modo de execução. Para usar os Componentes principais no
nosamplecontent
modo de execução, siga as instruções da página de documentação Uso dos componentes principais.

Recursos técnicos

A tabela a seguir apresenta uma visão geral das diferenças entre os componentes principais e os componentes básicos.
Para obter detalhes sobre os recursos de criação e as opções para pré-configurá-los, consulte a página de criação sobre eles .
Recurso
Componente principal
Componente básico
Implementação lógica
Java POJOs com anotações de modelos models.html Sling
Código JSP
Definição de marcação
Código JSP
Sanitização XSS
Automatizado por HTL
Principalmente manual
Nomeação de classes CSS
Convenção de nomenclatura padronizada baseada na notação BEM ( Block Element Modifier ) (a partir da versão 2.0.0)
Esquemas personalizados
Definição de diálogo
Coral 2 + Interface clássica
Saída JSON
Servlet Sling padrão
Versões
Nenhum
Testes
Testes de unidade + Testes de integração
Testes de integração
Entrega
Via Início Rápido
Licença
Proprietário da Adobe
Contribuição
Solicitação por solicitação
Não é possível
Acessibilidade
Totalmente compatível com o padrão AA WCAG 2.0
Compatível apenas parcialmente com o padrão AA WCAG 2.0

Lista de componentes

A tabela a seguir lista os Componentes principais disponíveis, vinculando à API deles, e indica quais componentes básicos eles substituem.
Componente principal
Descrição
Componente(s) básico(s) substituído(s)
Página responsiva trabalhando com editor de modelo
/libs/foundation/components/page /libs/wcm/foundation/components/page
Navegação na hierarquia da página
/libs/foundation/components/breadcrumb
Título H1-H6
/libs/foundation/components/title /libs/wcm/foundation/components/title
Texto formatado
/libs/foundation/components/text /libs/foundation/components/table /libs/wcm/foundation/components/text
Carregamento inteligente e lento do tamanho de representação ideal
/libs/foundation/components/image /libs/foundation/components/adaptiveimage /libs/foundation/components/logo /libs/foundation/components/mobileimage /libs/foundation/components/mobilelogo /libs/wcm/foundation/components/image
Lista de páginas
/libs/foundation/components/list /libs/foundation/components/mobilelist /libs/wcm/foundation/components/list
Widget de compartilhamento do Facebook e Pinterest
-
Sistema de parágrafo de formulário responsivo
/libs/foundation/components/form/start /libs/foundation/components/form/end
Campo de entrada de texto
/libs/foundation/components/form/text /libs/foundation/components/form/password
Campo de entrada de várias opções
/libs/foundation/components/form/checkbox /libs/foundation/components/form/radio /libs/foundation/components/form/dropdown
Campo de entrada oculto
/libs/foundation/components/form/hidden
Botão Enviar ou personalizar
/libs/foundation/components/form/submit
Um componente de navegação do site que lista a hierarquia de páginas aninhadas
/libs/foundation/components/topnav /libs/foundation/components/mobiletopnav
Um alternador de idiomas e países que lista a estrutura de idiomas global
-
Um componente de pesquisa que exibe os resultados como sugestões no local em um menu suspenso
/libs/foundation/components/search
Permite que o autor do conteúdo crie com facilidade um teaser para continuar o conteúdo usando uma imagem, um título ou texto formatado e vinculando-o a outro conteúdo ou outras ações
-
Permite que o autor do conteúdo organize o conteúdo da página em várias guias
-
Permite que o autor do conteúdo organize o conteúdo em um carrossel giratório de slides
/libs/foundation/components/carousel
Permite a exibição de um fragmento de conteúdo
-
Permite exibir uma lista de fragmentos de conteúdo
-
Separa o conteúdo em uma página
-
Organizar painéis de conteúdo de uma forma flexível
-
Organizar componentes em um contêiner
-
Criar um botão em uma página
-
Adicionar um ativo baixável a uma página
-
Adicionar um fragmento de experiência a uma página
/libs/cq/experience-fragments/editor/components/experiencefragment
Incorporar um recurso externo em uma página
-

Componentes futuros

Para obter uma visão geral do roteiro futuro dos Componentes principais, consulte o wiki do projeto no GitHub .

Atualização dos componentes principais

Um benefício dos componentes com versão é que eles permitem separar a migração para uma nova versão do AEM da migração para novas versões de componentes. Além disso, se novas versões de componentes estiverem disponíveis, isso permitirá a migração individual de cada componente para a nova versão.
As migrações para uma nova versão do AEM não afetarão o funcionamento dos Componentes principais, desde que suas versões também suportem a nova versão do AEM para a qual estão sendo migradas. As personalizações feitas nos Componentes principais também não devem ser afetadas, contanto que elas não usem APIs que foram desaprovadas ou removidas .
As migrações para novas versões dos Componentes principais também não afetarão o modo de funcionamento do componente, mas os novos recursos poderão ser apresentados aos autores das páginas, o que pode exigir alguma configuração por um editor de modelo, caso o comportamento padrão não seja desejado. No entanto, as personalizações podem precisar ser adaptadas; para obter mais detalhes, consulte a página Personalizando componentes principais.

When to Use the Core Components?

Como os Componentes principais são totalmente novos e oferecem vários benefícios, é recomendável que os novos projetos AEM os usem. No caso dos projetos existentes, a migração deve fazer parte de um maior esforço de projeto, por exemplo, uma reformulação da marca ou uma reformulação global.
Portanto, a Adobe fornece as seguintes recomendações:
  • Novos projetos
    Os novos projetos devem sempre tentar usar os Componentes principais. Se os Componentes principais não puderem ser usados diretamente ou estendidos para satisfazer os requisitos do projeto, crie um componente personalizado seguindo a arquitetura do componente estabelecida nos componentes principais. Exceto quando não for possível, evite usar os componentes da fundação.
  • A
    Recomendação de projetos existentes continua usando os componentes debase, a menos que seja planejada uma refatoração de site ou componente. Dado que são amplamente utilizadas pela maioria dos projetos existentes, os componentes da fundação continuarão a ser apoiados.
  • Os novos componentes
    personalizados avaliam se um componente principal existente pode ser personalizado . Caso contrário, a recomendação é criar um novo componente personalizado seguindo as Diretrizes do componente.
  • Componentes
    personalizados existentes Se seus componentes funcionarem como esperado, mantenha-os como estão. Caso contrário, consulte "Novos componentes personalizados" acima.

Migração para os componentes principais

Qualquer novo projeto deve ser implementado com os Componentes principais. No entanto, os projetos existentes terão normalmente implementações extensivas dos Componentes da Fundação.
Um esforço maior em um projeto existente (por exemplo, uma reformulação de marca ou refatoração geral) geralmente oferece uma chance de migrar para os Componentes principais. Para facilitar essa migração, a Adobe disponibilizou várias ferramentas de migração para incentivar a adoção dos componentes principais e da mais recente tecnologia AEM.
As Ferramentas de modernização do AEM permitem a fácil conversão de:
  • Modelos estáticos para modelos editáveis
  • Desenvolver configurações para políticas
  • Componentes básicos para os componentes principais
  • Interface clássica para a interface habilitada para toque
Para obter mais informações sobre o uso dessas ferramentas, consulte a documentação .
As Ferramentas de modernização do AEM são um esforço da comunidade e não são suportadas nem garantidas pela Adobe.

Suporte a componentes principais

Os componentes principais são parte integrante do AEM e são suportados como estão, nos mesmos termos e condições como se fossem fornecidos como parte do Início rápido.
Como outros recursos do produto AEM, a regra geral é: Os componentes são anunciados pela primeira vez como obsoletos e os mais antigos foram removidos para a seguinte versão do AEM. Isso dá aos clientes pelo menos um ciclo de lançamento para migrar para a nova versão do componente, antes de descartar seu suporte.
A versão de cada componente indica claramente as versões do AEM suportadas. Quando o suporte para uma versão do AEM é interrompido, o mesmo acontece com o suporte dos Componentes principais para essa versão do AEM.
Para obter detalhes sobre o suporte à personalização de componentes, consulte a página Personalizando componentes principais.

Suporte aos componentes da fundação

Como os componentes de base serviram de base para tantos projetos de desenvolvimento em muitas versões do AEM, eles continuarão sendo suportados no futuro próximo.
Entretanto, a ênfase de desenvolvimento da Adobe foi transferida para os Componentes principais e novos recursos serão adicionados a eles, enquanto quase todos os Componentes básicos foram descontinuados com o AEM 6.5 e somente correções de erros serão feitas nos Componentes de fundação a partir de agora.
Leia a seguir:
  • Uso dos componentes principais - comece a usar os componentes principais em seu próprio projeto.
  • Diretrizes de componentes - para conhecer os padrões de implementação dos Componentes principais.