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:
Introdução ao AEM Sites - Tutorial do WKND
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
/appse 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.
- Consulte a documentação do componente no GitHub para obter mais informações.
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:
-
criar um componente proxy correspondente na pasta de componentes do site.
Exemplo
Em/apps/my-site/components, crie um nó de título do tipocq:Component -
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" -
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
-
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.
-
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.
- No Editor de modelo, selecione o Contêiner de layout e abra a política dele.
- 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.
- 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:
- Personalização dos Componentes principais para saber como estilizar e personalizar os componentes principais.
- Diretrizes de componentes para conhecer os padrões de implementação dos Componentes principais.