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.
Quando um componente em uma página da Web é renderizado, um elemento HTML pode ser gerado, vinculando o componente renderizado dentro de si mesmo. Isso serve principalmente dois propósitos:
Um componente só pode ser editado quando está envolvido com um elemento HTML.
O elemento de encapsulamento é usado para aplicar classes HTML que fornecem:
Para desenvolvedores, o AEM oferece lógica simples e clara controlando as tags de decoração que envolvem componentes incluídos. Se e como a tag de decoração é renderizada é definida pela combinação de dois fatores, que esta página mergulhará em:
Estas são algumas recomendações gerais de quando incluir o elemento wrapper que devem ajudar a evitar problemas inesperados:
As seguintes propriedades e nós podem ser aplicados aos componentes para controlar o comportamento de sua tag de decoração:
cq:noDecoration {boolean}
: Essa propriedade pode ser adicionada a um componente e um valor real força AEM não gerar nenhum elemento wrapper sobre o componente.cq:htmlTag
node : Esse nó pode ser adicionado em um componente e pode ter as seguintes propriedades:
cq:tagName {String}
: Isso pode ser usado para especificar uma tag HTML personalizada a ser usada para vincular os componentes, em vez do elemento DIV padrão.class {String}
: Isso pode ser usado para especificar nomes de classe CSS a serem adicionados ao wrapper.O comportamento do wrapper difere, no entanto, dependendo de se HTL ou JSP é usado para incluir o elemento .
Em geral, o comportamento do wrapper no HTL pode ser resumido da seguinte maneira:
data-sly-resource="foo"
).O comportamento do invólucro também pode ser totalmente controlado.
cq:noDecoration
e cq:tagName
) também pode definir a tag wrapper.É possível controlar totalmente o comportamento das tags wrapper a partir de scripts HTL e sua lógica associada.
Para obter mais informações sobre o desenvolvimento no HTL, consulte Documentação do HTL.
Essa árvore de decisão resume a lógica que determina o comportamento das tags wrapper.
Os três casos de uso a seguir fornecem exemplos de como as tags wrapper são manipuladas e também ilustram como é simples controlar o comportamento desejado das tags wrapper.
Todos os exemplos a seguir pressupõem a seguinte estrutura de conteúdo e componentes:
/content/test/
@resourceType = "test/components/one"
child/
@resourceType = "test/components/two"
/apps/test/components/
one/
one.html
two/
two.html
cq:htmlTag/
@cq:tagName = "article"
@class = "component-two"
O caso de uso mais comum é quando um componente inclui outro componente por motivos de reutilização do código. Nesse caso, o componente incluído não é desejado para ser editável com sua própria barra de ferramentas e caixa de diálogo, portanto, nenhum wrapper é necessário e o componente cq:htmlTag
serão ignoradas. Isso pode ser considerado o comportamento padrão.
one.html: <sly data-sly-resource="child"></sly>
two.html: Hello World!
Resultado na saída em /content/test.html
:
Hello World!
Um exemplo seria um componente que inclui um componente de imagem principal para exibir uma imagem, normalmente nesse caso usando um recurso sintético, que consiste em incluir um componente filho virtual passando para data-sly-resource um objeto de mapa que representa todas as propriedades que o componente teria.
Outro caso de uso comum é quando os componentes do contêiner incluem componentes filhos editáveis, como um Contêiner de layout. Nesse caso, cada filho incluído precisa imperativamente de um invólucro para o editor funcionar (a menos que explicitamente desativado com o cq:noDecoration
propriedade).
Como o componente incluído é, nesse caso, um componente independente, ele precisa de um elemento wrapper para que o editor funcione e defina seu layout e estilo para aplicar. Para acionar esse comportamento, há a variável decoration=true
opção.
one.html: <sly data-sly-resource="${'child' @ decoration=true}"></sly>
two.html: Hello World!
Resultado na saída em /content/test.html
:
<article class="component-two">Hello World!</article>
Pode haver vários casos complexos, que podem ser facilmente alcançados com a possibilidade de HTL fornecer explicitamente:
decorationTagName='ELEMENT_NAME'
Para definir o nome do elemento do wrapper.cssClassName='CLASS_NAME'
Para definir os nomes de classe CSS a serem definidos.one.html: <sly data-sly-resource="${'child' @ decorationTagName='aside', cssClassName='child'}"></sly>
two.html: Hello World!
Saída resultante /content/test.html
:
<aside class="child">Hello World!</aside>
Ao incluir um componente usando cq:includ
e ou sling:include
, o comportamento padrão no AEM é usar um DIV para envolver o elemento. No entanto, esse encapsulamento pode ser personalizado de duas maneiras:
cq:noDecoration
.cq:htmlTag
/ cq:tagName
ou decorationTagName
.A árvore de decisão a seguir ilustra como cq:noDecoration
, cq:htmlTag
, cq:tagName
e decorationTagName
afetam o comportamento do invólucro.