Show Menu
TOPICS×

Uso de componentes principais

Para começar a usar os Componentes Desenvolvimento dos componentes principais principais em seu próprio projeto, há quatro etapas, que são detalhadas individualmente nas seções abaixo:
Como alternativa, para obter instruções mais amplas sobre como começar do zero com a configuração do projeto, os Componentes principais, Modelos editáveis, Bibliotecas do cliente e desenvolvimento de componentes, o seguinte tutorial de várias partes pode ser de interesse: Introdução ao AEM Sites - Tutorial de WKND

Baixar e instalar

Uma das ideias fundamentais por trás dos componentes principais é a flexibilidade. Lançamento de novas versões dos Componentes principais com mais frequência permite que a Adobe seja mais flexível no fornecimento de novos recursos. Por sua vez, os desenvolvedores podem ser flexíveis em quais componentes eles escolhem integrar em seus projetos e com que frequência desejam atualizá-los.
Por esse motivo, 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, sua primeira etapa é baixar o pacote de conteúdo mais recente do GitHub e instalá-lo em seus ambientes AEM.
Existem 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 esteja em execução, será necessário replicar esse pacote para o editor; consulte Replicação de pacotes .

Criar componentes proxy

Por motivos explicados na seção Padrão do 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 eles apareçam 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 cada um dos componentes principais 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 Personalização dos componentes principais principais, esses componentes proxy desempenham um papel essencial para a marcação e a personalização lógica.
Assim, para cada Componente principal que for desejado para ser usado em um site, você deve:
  1. Crie um componente proxy correspondente na pasta de componentes do site.
    Exemplo
    Em
    /apps/my-site/components
    criar um nó de título do tipo
    cq:Component
  2. Aponte 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. Defina o grupo, o título e a descrição opcionalmente do componente. Esses valores são específicos do projeto e ditam como o componente é exposto aos autores.
    Exemplo
    Adicione as seguintes propriedades:
    componentGroup="My Site" jcr:title="Title" jcr:description="Section Heading"
Por exemplo, observe o componente de título do site de referência We.Retail, que é um bom exemplo de um componente proxy criado dessa forma.

Carregue os estilos principais

  1. Se ainda não tiver sido feito, crie uma Biblioteca de clientes que contenha todos os arquivos CSS e JS necessários para o seu site.
  2. Na Biblioteca de clientes do site, adicione as dependências aos Componentes principais que podem ser necessárias. Isso é feito adicionando uma
    embed
    propriedade.
    Por exemplo, para incluir as Bibliotecas de clientes de todos os componentes principais v1, a propriedade a ser adicionada seria:
    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 seus componentes proxy e bibliotecas de clientes foram implantados no ambiente do AEM antes de passar para a próxima seção.

Permitir os componentes

As etapas a seguir são executadas no Editor templates.html de modelos.
  1. No Editor de modelos, selecione o Contêiner de layout e abra sua política.
  2. Na lista de Componentes permitidos, selecione os componentes proxy criados anteriormente, que devem aparecer abaixo do grupo de componentes atribuído a eles. Depois de concluído, aplique as alterações.
  3. Como opção, para os componentes que têm uma caixa de diálogo de design, eles podem ser pré-configurados.
É isso! Nas páginas criadas a partir do modelo editado, agora é possível usar os componentes recém-criados.
Leia a seguir: