Como experimentar os Componentes principais no We.Retail trying-out-core-components-in-we-retail

CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

Os componentes principais são componentes modernos e flexíveis, com fácil extensibilidade e permitindo uma integração simples em seus projetos. Os componentes principais foram criados em torno de vários princípios importantes de design, como HTL, usabilidade pronta para uso, configurabilidade, controle de versão e extensibilidade. O We.Retail foi criado em componentes principais.

Tentando trying-it-out

  1. Inicie o AEM com o conteúdo de amostra We.Retail e abra o Console de componentes.

    Navegação global -> Ferramentas -> Componentes

  2. Ao abrir o painel no console Componentes, é possível filtrar por um grupo de componentes específico. Os componentes principais podem ser encontrados em

    • .core-wcm: Os componentes principais padrão
    • .core-wcm-form: Os componentes principais de envio do formulário

    Choose .core-wcm.

    chlimage_1-162

  3. Observe que todos os componentes principais são nomeados v1, refletindo que esta é a primeira versão desse componente principal. As versões regulares serão lançadas a partir de agora, o que será compatível com a versão do AEM e permitirá uma atualização fácil para que você possa aproveitar os recursos mais recentes.

  4. Clique em Texto (v1).

    Veja que a variável Tipo de recurso do componente é /apps/core/wcm/components/text/v1/text. Os componentes principais são encontrados em /apps/core/wcm/components e são controle de versão por componente.

    chlimage_1-163

  5. Clique no botão Documentação para ver a documentação do desenvolvedor do componente.

    chlimage_1-164

  6. Retorne ao Console de componentes. Filtro para o grupo We.Retail e selecione o Texto componente.

  7. Veja que a variável Tipo de recurso aponta para um componente conforme esperado em /apps/weretail mas o Supertipo de Recurso aponta para o componente principal /apps/core/wcm/components/text/v1/text.

    chlimage_1-165

  8. Clique no botão Uso em tempo real para ver em quais páginas esse componente está sendo usado no momento. Clique no primeiro Obrigado para editar a página.

    chlimage_1-166

  9. Na página Obrigado, selecione o componente de texto e, no menu de edição do componente, clique no ícone Cancelar herança .

    We.Retail tem uma estrutura de site globalizada onde o conteúdo é enviado dos mestres de linguagem para live copies por meio de um mecanismo chamado herança. Por esse motivo, a herança deve ser cancelada para permitir que um usuário edite texto manualmente.

    chlimage_1-167

  10. Confirme o cancelamento clicando em Sim.

    chlimage_1-168

  11. Depois que a herança é cancelada e você seleciona os componentes de texto, muitas outras opções estão disponíveis. Clique em ​ Editar.

    chlimage_1-169

  12. Agora é possível ver quais opções de edição estão disponíveis para o componente de texto.

    chlimage_1-170

  13. No Informações da página selecionar menu Editar modelo.

  14. No Editor de modelo da página, clique no Política ícone do componente de Texto na Contêiner de layout da página.

    chlimage_1-171

  15. Os componentes principais permitem que um autor de modelo configure quais propriedades estão disponíveis para os autores da página. Isso inclui recursos como fontes de colagem permitidas, opções de formatação, estilos de parágrafo disponíveis, etc.

    Essas caixas de diálogo de design estão disponíveis para muitos componentes principais e funcionam lado a lado com o editor de modelo. Uma vez ativadas, elas ficam disponíveis para o autor por meio dos editores de componente.

    chlimage_1-172

Informações adicionais further-information

Para obter mais informações sobre os componentes principais, consulte o documento de criação Componentes principais para obter uma visão geral dos recursos dos componentes principais e o documento do desenvolvedor Desenvolvimento dos componentes principais para obter uma visão geral técnica.

Além disso, você pode querer investigar mais detalhadamente modelos editáveis. Consulte o documento de criação Criação de modelos de página ou a página do documento do desenvolvedor Modelos - Editáveis para obter detalhes completos sobre modelos editáveis.

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e