Sistema de estilos style-system

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.

O sistema de estilos permite ao autor do modelo definir classes de estilo na política de conteúdo de um componente para que autores de conteúdo possam selecioná-las ao editarem o componente em uma página. Esses estilos podem ser variações visuais alternativas de um componente, tornando esse componente mais flexível.

Isso elimina a necessidade de desenvolver um componente personalizado para cada estilo ou personalizar a caixa de diálogo do componente para ativar essa funcionalidade de estilo. Ele leva a componentes mais reutilizáveis, que podem ser adaptados de forma rápida e fácil às necessidades dos autores de conteúdo sem qualquer desenvolvimento AEM de back-end.

Caso de uso use-case

Os autores de modelos precisam não apenas da capacidade de configurar como os componentes funcionam para os autores de conteúdo, mas também configurar uma série de variações visuais alternativas de um componente.

Da mesma forma, os autores de conteúdo precisam ter a capacidade de estruturar e organizar o conteúdo, além de selecionar como ele é apresentado visualmente.

O Sistema de estilos fornece uma solução unificada para os requisitos do autor de modelo e do autor de conteúdo:

  • Os autores de modelos podem definir classes de estilo na política de conteúdo dos componentes.
  • Os autores de conteúdo podem selecionar essas classes em uma lista suspensa ao editar o componente em uma página para aplicar os estilos correspondentes.

A classe de estilo é então inserida no elemento wrapper de decoração do componente para que o desenvolvedor do componente não precise se preocupar em manusear os estilos além de fornecer suas regras de CSS.

Visão geral overview

O uso do Sistema de estilos geralmente funciona da seguinte maneira.

  1. O web designer cria diferentes variações visuais de um componente.

  2. O desenvolvedor de HTML recebe a saída dos componentes em HTML e as variações visuais desejadas para implementar.

  3. O desenvolvedor de HTML define as classes CSS que correspondem a cada variação visual e que devem ser inseridas no elemento que envolve os componentes.

  4. O desenvolvedor de HTML implementa o código CSS correspondente (e, opcionalmente, o código JS) para cada uma das variações visuais, de modo a serem exibidas conforme a definição.

  5. O desenvolvedor do AEM coloca o CSS fornecido (e o JS opcional) em uma Biblioteca do cliente e a implanta.

  6. O desenvolvedor do AEM ou o autor do modelo define os modelos de página e edita a política de cada componente estilizado, adicionando as classes CSS definidas, fornecendo nomes amigáveis a cada estilo e indicando quais estilos podem ser combinados.

  7. O autor da página do AEM pode escolher os estilos criados no editor de páginas no menu de estilo da barra de ferramentas do componente.

Observe que somente as três últimas etapas são realmente realizadas no AEM. Isso significa que todo o desenvolvimento do CSS e do Javascript necessários pode ser feito sem AEM.

Na verdade, a implementação dos estilos requer apenas a implantação no AEM e a seleção nos componentes dos modelos desejados.

O diagrama a seguir ilustra a arquitetura do Sistema de estilos.

aem-style-system

Utilização use

Para demonstrar o recurso, usaremos como exemplo a implementação da WKND do componente de título do componente principal.

As seções a seguir, Como um autor de conteúdo e Como um autor de modelo descrevem como testar a funcionalidade do Sistema de estilos usando o Sistema de estilos da WKND.

Se você desejar usar o Sistema de estilos em seus próprios componentes, faça o seguinte:

  1. Instale o CSS como bibliotecas de clientes, conforme descrito na seção Visão geral.
  2. Configure as classes CSS que deseja disponibilizar para os autores de conteúdo, conforme descrito na seção Como um autor de modelo.
  3. Os autores de conteúdo podem usar os estilos conforme descrito na seção Como autor de conteúdo.

Como autor de conteúdo as-a-content-author

  1. Depois de instalar o projeto WKND, navegue até a página inicial principal no idioma inglês da WKND em http://<host>:<port>/sites.html/content/wknd/language-masters/en e edite a página.

  2. Selecione um componente de Título mais abaixo da página

    Sistema de estilos do autor

  3. Toque ou clique no botão Estilos na barra de ferramentas do componente Lista para abrir o menu de estilos e alterar a aparência do componente.

    Seleção de estilos

    note note
    NOTE
    Neste exemplo, os estilos de Cores (Preto, Branco e Cinza) são mutuamente exclusivos, enquanto as opções de Estilo (Sublinhado, Alinhar à direita e Miniespaçamento) podem ser combinadas. Isso pode ser configurado no modelo como o autor do modelo.

Como autor de modelo as-a-template-author

  1. Ao editar a página inicial mestre em inglês do WKND em http://<host>:<port>/sites.html/content/wknd/language-masters/en, edite o modelo da página em Informações da página -> Editar modelo.

    Editar modelo

  2. Edite a política do componente de Título tocando ou clicando no botão Política do componente.

    Editar política

  3. Na guia Estilos das propriedades, é possível ver como os estilos foram configurados.

    Editar propriedades

    • Nome do grupo: Os estilos podem ser agrupados no menu de estilo que o autor do conteúdo verá ao configurar o estilo do componente.
    • Os estilos podem ser combinados: Permite que vários estilos dentro desse grupo sejam selecionados ao mesmo tempo.
    • Nome do estilo: A descrição do estilo que será exibido ao autor do conteúdo ao configurar o estilo do componente.
    • Classes CSS: O nome real da classe CSS associada ao estilo.

    Use as alças de arrastar para organizar a ordem dos grupos e os estilos nos grupos. Use os ícones adicionar ou excluir para adicionar ou remover grupos ou estilos nos grupos.

CAUTION
As classes CSS (bem como qualquer Javascript necessário) configuradas como propriedades de estilo da política de um componente devem ser implantadas como Bibliotecas do cliente para funcionarem.

Configurar setup

Os Componentes principais versão 2 e posteriores estão habilitados para se beneficiarem do Sistema de estilos e não exigem configuração adicional.

As etapas a seguir são necessárias apenas para ativar o Sistema de estilos para os seus próprios componentes personalizados ou para habilitar a guia Estilos opcional na caixa de diálogo Editar.

Habilitar guia Estilo na caixa de diálogo Design enable-styles-tab-design

Para que um componente funcione com o Sistema de estilos do AEM e mostre a guia Estilo na caixa de diálogo Design, o desenvolvedor do componente deve incluir essa guia com as seguintes configurações no componente:

  • path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"

Com o componente configurado, os estilos configurados pelos autores da página serão inseridos automaticamente pelo AEM no elemento de decoração que AEM automaticamente envolve cada componente editável. O componente em si não precisa fazer mais nada para que isso aconteça.

Habilitar a guia Estilos na caixa de diálogo Editar enable-styles-tab-edit

Desde AEM versão 6.4.7.0, uma guia Estilos opcional na caixa de diálogo Editar agora está disponível. Diferentemente da guia da caixa de diálogo Design, a guia na caixa de diálogo Editar não é essencial para o funcionamento do Sistema de estilos, mas é uma interface alternativa opcional para um autor de conteúdo definir estilos.

A guia da caixa de diálogo Editar pode ser incluída de maneira semelhante na guia da caixa de diálogo Design:

  • path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"
NOTE
A guia Estilos na caixa de diálogo Editar não está habilitada por padrão.

Estilos com nomes de elemento styles-with-element-names

Um desenvolvedor também pode configurar uma lista de nomes de elementos permitidos para os estilos no componente por meio da propriedade de matriz da sequência cq:styleElements. Em seguida, na guia Estilos da política na caixa de diálogo de design, o autor do modelo também pode escolher um nome de elemento a ser definido para cada estilo. Isso definirá o nome do elemento do wrapper.

Essa propriedade é definida no nó cq:Component. Por exemplo:

  • /apps/<yoursite>/components/content/list@cq:styleElements=[div,section,span]
CAUTION
Evite definir nomes de elemento para estilos que podem ser combinados. Quando vários nomes de elemento são definidos, a ordem de prioridade é:
  1. HTL tem precedência sobre tudo: data-sly-resource="${'path/to/resource' @ decorationTagName='span'}
  2. Entre os vários estilos ativos, o primeiro estilo na lista de estilos configurados na política do componente é aplicado.
  3. Por fim, a cq:htmlTag/ cq:tagName do componente será considerada um valor de fallback.

Essa capacidade de definir nomes de estilo é útil para componentes muito genéricos, como o Contêiner de layout ou o componente de Fragmento de conteúdo, para oferecer-lhes significado adicional.

Por exemplo, permite que um Contêiner de layout receba uma semântica como <main>, <aside>, <nav>, etc.

recommendation-more-help
5f6f1f67-8db1-40cb-84e9-024e65b9fc4c