Utilização dos Componentes principais using-core-components

Para começar a usar os Componentes principais no seu próprio projeto, há quatro etapas, que são detalhadas individualmente nas seções abaixo:

TIP
Para instruções mais detalhadas sobre como começar do zero com a configuração do projeto, os Componentes principais, Modelos editáveis, Bibliotecas de clientes e desenvolvimento de componentes, o tutorial abaixo, dividido em várias partes, pode ser de interesse:
Introdução ao AEM Sites - Tutorial do WKND
TIP
Se você usa o Arquétipo de projeto do AEM, os Componentes principais serão incluídos automaticamente em seu projeto com base nas práticas recomendadas da Adobe.

Download e instalação download-and-install

Uma das ideias por trás dos componentes principais é a flexibilidade. O lançamento mais frequente de novas versões dos Componentes principais permite que a Adobe seja mais flexível em fornecer novos recursos. Os desenvolvedores, por sua vez, podem ser flexíveis em quais componentes escolher para integrar em seus projetos e com que frequência desejam atualizá-los. Isso resulta em um processo de versão separado para o AEM e os Componentes principais.

Portanto, se você estiver executando o AEM as a Cloud Service ou um serviço no local, as etapas de instalação serão determinadas.

AEM as a Cloud Service aemaacs

Não há etapa um. O AEM as a Cloud Service vem automaticamente com a versão mais recente dos Componentes principais. Assim como o AEMaaCS oferece os recursos mais recentes do AEM, o AEMaaCS automaticamente mantém você atualizado com a versão mais recente dos Componentes principais.

Deve-se lembrar de alguns pontos ao usar os Componentes principais no AEMaaCS:

  • Os Componentes principais estão incluídos em /libs.
  • O pipeline de build de projeto gerará avisos no log se incluir os Componentes principais novamente como parte de /apps e ignorará a versão incorporada como parte do projeto.
    • Em uma próxima versão, incluir os Componentes principais novamente causará falha no build do pipeline.
  • Se o projeto incluiu os Componentes principais em /apps, talvez seja necessário ajustar o projeto.
  • Mesmo que os Componentes principais agora estejam em /libs, não é recomendável criar qualquer sobreposição do mesmo caminho em /apps. O padrão do componente proxy deve ser usado se qualquer aspecto dos componentes precisar ser personalizado.
  • Para que o Componente Tabela de conteúdos renderize seu conteúdo, um filtro precisa ser configurado no OSGi.

AEM 6.5 e anteriores aem-65

Os Componentes principais não fazem parte do início rápido ao iniciar no modo de produção (sem conteúdo de amostra). Portanto, seu primeiro passo é baixar o pacote de conteúdo mais recente lançado do GitHub e instalá-lo em seus ambientes do AEM.

Há várias maneiras de automatizar isso, mas a maneira mais simples de instalar rapidamente um pacote de conteúdo em uma instância é usando o Gerenciador de Pacotes. Consulte Instalar pacotes. Além disso, uma vez que uma instância de publicação também estiver em execução, será necessário replicar esse pacote para o editor. Consulte Replicação de pacotes.

Criação de componentes proxy create-proxy-components

Por motivos explicados na seção Padrão de componente proxy, os Componentes principais não devem ser referenciados diretamente do conteúdo. Para evitar isso, todos pertencem a um grupo de componentes ocultos (.core-wcm ou .core-wcm-form), o que impedirá que sejam exibidos diretamente no editor.

Em vez disso, os componentes específicos do site devem ser criados, que definem o nome do componente e o grupo desejados para exibição aos autores da página e fazem referência a um Componente principal como seu supertipo. Esses componentes específicos do site às vezes são chamados de "componentes proxy", pois não precisam conter nada e servem principalmente para definir a versão de um componente a ser usada para o site. No entanto, ao personalizar os Componentes principais, esses componentes proxy desempenham uma função essencial para a personalização de marcação e lógica.

Assim, para cada Componente principal que quiser usar em um site, você deve:

  1. criar um componente proxy correspondente na pasta de componentes do site.

    Exemplo
    Em /apps/my-site/components, crie um nó de título do tipo cq:Component

  2. apontar para a versão correspondente do Componente principal com o supertipo.

    Exemplo
    Adicione a seguinte propriedade:
    sling:resourceSuperType="core/wcm/components/title/v1/title"

  3. definir o grupo do componente, o título e, opcionalmente, a descrição. Esses valores são específicos do projeto e determinam como o componente é exposto aos autores.

    Exemplo
    Adicione as seguintes propriedades:

    code language-shell
    componentGroup="My Site"
    jcr:title="Title"
    jcr:description="Section Heading"
    

Por exemplo, o componente de Título do site da WKND ilustra bem um componente proxy criado desse modo.

Carregamento dos Estilos principais load-the-core-styles

  1. Se ainda não tiver sido feito, crie uma Biblioteca do cliente que contenha todos os arquivos CSS e JS necessários para o seu site.

  2. Na Biblioteca do cliente do site, adicione as dependências aos Componentes principais que podem ser necessárias. Isso é feito adicionando uma propriedade embed.

    Por exemplo, para incluir as Bibliotecas de clientes de todos os Componentes principais v1, a propriedade a ser adicionada seria:

    code language-shell
    embed="[
    core.wcm.components.image.v1,
    core.wcm.components.list.v1,
    core.wcm.components.breadcrumb.v1,
    core.wcm.components.form.container.v1,
    core.wcm.components.form.text.v1
    ]"
    

Certifique-se de que os componentes proxy e as bibliotecas de clientes tenham sido implantados no ambiente do AEM antes de passar para a próxima seção.

Permitir os Componentes allow-the-components

As etapas a seguir são executadas no Editor de modelo.

  1. No Editor de modelo, selecione o Contêiner de layout e abra a política dele.
  2. Na lista de Componentes permitidos, selecione os componentes proxy criados anteriormente, que devem ser exibidos no grupo de componentes atribuídos a eles. Depois de concluído, aplique as alterações.
  3. Como opção, para os componentes que tenham uma caixa de diálogo de design, eles podem ser pré-configurados.

Pronto! Nas páginas criadas a partir do modelo editado, agora é possível usar os componentes recém-criados.

Leia a seguir:

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c