Experimente os componentes principais no We.Retail

Os componentes principais são componentes modernos e flexíveis, com fácil extensibilidade e que permitem uma integração simples em seus projetos. Os componentes principais foram criados com base em vários princípios principais de design, como HTL, usabilidade imediata, configuração, controle de versão e extensibilidade. We.Retail foi construído com base em componentes principais.

Tentando sair

  1. Start AEM com o conteúdo de amostra We.Retail e abra o console Componentes.

    Navegação global -> Ferramentas -> Componentes

  2. Ao abrir o painel no console Componentes, você pode filtrar por um grupo específico de componentes. 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 como v1, refletindo que esta é a primeira versão desse componente principal. Versões regulares serão lançadas a partir de agora, o que será compatível com a versão e permitirá uma atualização fácil, para que você possa aproveitar os recursos mais recentes.

  4. Clique em Texto (v1).

    Verifique se o Tipo de recurso do componente é /apps/core/wcm/components/text/v1/text. Os componentes principais são encontrados em /apps/core/wcm/components e têm controle de versão por componente.

    chlimage_1-163

  5. Clique na guia Documentação para ver a documentação do desenvolvedor do componente.

    chlimage_1-164

  6. Retorne ao console Componentes. Filtre o grupo We.Retail e selecione o componente Texto .

  7. Verifique se o Tipo de recurso aponta para um componente conforme esperado, mas o Supertipo /apps/weretail de recurso aponta de volta para o componente principal /apps/core/wcm/components/text/v1/text.

    chlimage_1-165

  8. Clique na guia Uso ​em tempo real para ver em quais páginas esse componente está sendo usado no momento. Clique na primeira página de Agradecimentos 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 na qual o conteúdo é encaminhado de mestres de linguagem para cópias ao vivo 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. Após a herança ser cancelada e você selecionar os componentes de texto, muitas outras opções estarão disponíveis. Clique em Editar.

    chlimage_1-169

  12. Agora você pode ver quais opções de edição estão disponíveis para o componente de texto.

    chlimage_1-170

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

  14. No Editor de modelos da página, clique no ícone Política do componente Texto no Container ​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. Depois de ativados, eles ficam disponíveis para o autor por meio dos editores de componentes.

    chlimage_1-172

Informações adicionais

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

Além disso, talvez você queira investigar mais detalhadamente os modelos editáveis. Consulte o documento de criação Criar modelos de página ou os modelos de página do documento do desenvolvedor - Editável para obter detalhes completos sobre modelos editáveis.

Nesta página