Desenvolvimento dos Componentes principais

Quando usar os Componentes principais?

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 recomenda o seguinte:

  • 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 atender aos requisitos do projeto, crie um componente personalizado seguindo a arquitetura de componentes definida nos Componentes principais. Exceto quando não for possível, evite usar os componentes de base.
  • Projetos existentes
    Recomenda-se continuar usando os componentes de base, a menos que haja planos de reestruturação do site ou de componentes.
    Como são muito usados pela maioria dos projetos existentes, os componentes de base continuarão sendo compatíveis.
  • Novos componentes personalizados
    Avalie se um Componente principal existente pode ser personalizado.
    Caso contrário, a recomendação é criar um novo componente personalizado seguindo as Diretrizes de componentes.
  • Componentes personalizados existentes
    Se os componentes funcionarem conforme o esperado, mantenha-os como estão.

    Caso contrário, consulte "Novos componentes personalizados" acima.

Como obter resultados com os Componentes principais

Os Componentes principais são avançados, flexíveis e simples de usar e personalizar. Seguir algumas diretrizes principais garantirá que seu projeto com os Componentes principais seja bem-sucedido.

Migração para os Componentes principais

Recomenda-se que qualquer novo projeto seja implementado com os Componentes principais. No entanto, os projetos existentes normalmente terão implementações abrangentes dos Componentes de Base.

Migração de Componentes de base

Um esforço maior em um projeto existente (por exemplo, uma reformulação da marca ou reestruturação geral) geralmente oferece uma chance de migrar para os Componentes principais. Para facilitar essa migração, a Adobe disponibilizou uma série de ferramentas de migração para incentivar a adoção dos Componentes principais e a tecnologia mais recente do AEM.

As Ferramentas de modernização do AEM permitem a fácil conversão de:

  • Modelos estáticos em modelos editáveis
  • Configurações de design em políticas
  • Componentes de base para Componentes principais
  • IU Clássica em IU ativada por toque

Para mais informações sobre o uso dessas ferramentas, consulte a documentação.

OBSERVAÇÃO

As Ferramentas de modernização do AEM são um esforço da comunidade e não têm suporte nem garantia da Adobe.

Migração por meio da transição para o AEM as a Cloud Service

O AEM as a Cloud Service vem automaticamente com a versão mais recente dos Componentes principais. Por isso, ao mudar de uma instalação local do AEM, será necessário remover qualquer dependência dos Componentes principais no arquivo de projetos pom.xml.

Os componentes proxy ainda funcionarão como antes, uma vez que os proxies apontam para o supertipo necessário, e o caminho do supertipo tem a versão nele. Dessa forma, basta remover a dependência para que os Componentes principais funcionem no AEMaaCS, como funcionavam localmente.no local.

Assim como qualquer outro projeto do AEMaaCS, também será preciso adicionar uma dependência ao jar do SDK do AEM. Isso não é específico dos Componentes principais, mas é obrigatório.

<dependency>
   <groupId>com.adobe.aem</groupId>
   <artifactId>aem-sdk-api</artifactId>
</dependency>

Consulte o documento Estrutura de projeto AEM para mais informações sobre projetos AEMaaCS.

Suporte aos Componentes principais

Por serem uma parte integrante do AEM, os Componentes principais são suportados nos mesmos termos e condições, como se fossem fornecidos como parte do Início rápido.

Assim como outros recursos de produtos AEM, a regra geral é: primeiro, é anunciado que os Componentes se tornarão obsoletos, e os mais antigos são removidos da versão seguinte do AEM. Isso dá aos clientes pelo menos um ciclo de lançamento para migrar para a nova versão do componente, antes que ele não tenha mais 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 às personalizações de componentes, consulte a página Personalização de Componentes principais.

Recursos técnicos

A tabela a seguir fornece uma visão geral das diferenças entre os Componentes principais e os Componentes de base.

Para obter detalhes sobre recursos de criação dos Componentes principais e opções de pré-configuração, consulte a página de criação sobre esses componentes.

Recurso Componente principal Componente de base
Implementação lógica POJOs Java com anotações de Modelos Sling Código JSP
Definição de marcação Sintaxe de Linguagem de modelo HTML (HTL) Código JSP
Sanitização XSS Automatizado por HTL Principalmente manual
Nomenclatura de classes CSS Convenção de nomenclatura padronizada baseada na notação Bloco, Elemento, Modificador (BEM) (a partir da versão 2.0.0) Esquemas personalizados
Definição de caixa de diálogo Coral 3 Coral 2 + IU Clássica
Saída JSON Exportador de Modelos Sling com serialização Jackson Servlet Sling padrão
Versões Para o modelo e o HTL Nenhum
Testes Testes de unidade + Testes de integração Testes de integração
Entrega Pelo GitHub público Pelo Início rápido
Licença Licença do Apache Proprietária da Adobe
Contribuição Por solicitação de envio Não é possível
Acessibilidade Totalmente compatível com o padrão WCAG 2.0 AA Apenas parcialmente compatível com o padrão WCAG 2.0 AA

Lista de componentes

A tabela a seguir lista os Componentes principais disponíveis, vinculando à API desses componentes, e indica quais componentes de base eles substituem.

Componente principal Descrição Componente(s) de base(s) substituído(s)
Página Página responsiva trabalhando com o editor de modelo /libs/foundation/components/page /libs/wcm/foundation/components/page
Navegação estrutural Navegação por hierarquia de página /libs/foundation/components/breadcrumb
Título Título H1-H6 /libs/foundation/components/title /libs/wcm/foundation/components/title
Texto Rich text /libs/foundation/components/text /libs/foundation/components/table /libs/wcm/foundation/components/text
Imagem Carregamento lento e inteligente 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 Lista de páginas /libs/foundation/components/list /libs/foundation/components/mobilelist /libs/wcm/foundation/components/list
Compartilhamento em redes sociais Widget de compartilhamento do Facebook e Pinterest -
Contêineres de formulário Sistema de parágrafos de formulário responsivo /libs/foundation/components/form/start /libs/foundation/components/form/end
Texto do formulário Campo de entrada de texto /libs/foundation/components/form/text /libs/foundation/components/form/password
Opções de formulário Campo de entrada de várias opções /libs/foundation/components/form/checkbox /libs/foundation/components/form/radio /libs/foundation/components/form/dropdown
Formulário oculto Campo de entrada oculto /libs/foundation/components/form/hidden
Botão de formulário Botão Enviar ou personalizar /libs/foundation/components/form/submit
Navegação Um componente de navegação do site que lista a hierarquia de página aninhada /libs/foundation/components/topnav /libs/foundation/components/mobiletopnav
Navegação por idiomas Um alternador de idioma e país que lista a estrutura de idioma global -
Busca rápida Um componente de pesquisa que exibe os resultados como sugestões no local em um menu suspenso /libs/foundation/components/search
Teaser Permite que o autor de conteúdo crie facilmente um teaser para conteúdo adicional usando uma imagem, título ou rich text e vinculando a conteúdo adicional ou outras ações -
Guias Permite que o autor de conteúdo organize o conteúdo da página em várias guias -
Carrossel Permite que o autor de conteúdo organize o conteúdo em um carrossel giratório de slides /libs/foundation/components/carousel
Fragmento de conteúdo Permite a exibição de um fragmento de conteúdo -
Lista de fragmentos do conteúdo Permite exibir uma lista de fragmentos de conteúdo -
Separador Separa o conteúdo em uma página -
Acordeão Organiza painéis de conteúdo em um acordeão recolhível -
Contêiner Organiza componentes dentro de um contêiner -
Botão Cria um botão em uma página -
Download Adiciona um ativo baixável a uma página -
Fragmento de experiência Adiciona um fragmento de experiência a uma página /libs/cq/experience-fragments/editor/components/experiencefragment
Incorporação Incorpora um recurso externo em uma página -
Barra de progresso Fornece uma representação visual do progresso em direção a uma meta -
Visualizador de PDF Apresenta um documento PDF em uma página -

Componentes vindouros

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

Atualização dos Componentes principais

Um benefício dos componentes com versão é permitir separar a migração para uma nova versão do AEM, da migração para novas versões de componentes. Além disso, se as novas versões de componentes estiverem disponíveis, é possível fazer 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 sejam compatíveis com a nova versão do AEM para a qual está sendo migrada. As personalizações feitas nos Componentes principais também não devem ser afetadas, desde que elas não usem APIs que tenham se tornado obsoletas ou sido removidas.

As migrações para novas versões dos Componentes principais também não afetam o funcionamento do componente. Porém, novos recursos podem ser introduzidos aos autores da página, o que pode exigir alguma configuração por um editor de modelo, caso o comportamento padrão não seja o desejado. As personalizações, no entanto, podem precisar de adaptação. Para mais detalhes, consulte a página Personalização dos Componentes principais.

Nesta página