Pergunta

Se um componente é incluído, por exemplo, pela tag <cq:include>, uma tag div é adicionada automaticamente ao redor dele no HTML gerado.
Para que é usada essa tag div, e é possível suprimir a criação automática dela?

Resposta, Resolução

Essa tag div é usada para o sistema de edição do CQ5 (desenho das barras de edição, quadros de sobreposição etc.), o sistema Designer do CQ5 (definir nome da classe CSS, estilo CSS do Designer) e também para identificar o componente no DOM do cliente.

É possível suprimir essa tag div gerada especificando uma propriedade vazia cq:cellName na definição do componente (consulte Como são criados os IDs de células de design) ou usando o IncludeOptions.forceSameContext(true).
Nota: em ambos os casos, não será mais possível editar o componente (ou seja, sem caixas de diálogo).

A tag div gerada tem sempre pelo menos um atributo de nome de classe CSS criado a partir do nome da célula do componente (consulte Como são criados os IDs de células de design) usado para o estilo CSS do componente.
Este atributo de nome de classe CSS não pode ser suprimido.
É possível adicionar atributos extras a essa tag div gerada usando o nó cq:htmlTag na definição do componente.
Cada propriedade desse nó será adicionada como atributo de tag.
Também é possível "sobrescrever" o atributo de nome de classe CSS da tag div adicionando a propriedade class no nó cq:htmlTag.
Nesse caso, o nome da célula não será mais adicionado automaticamente. Portanto, as propriedades de design relevantes do CSS da caixa de diálogo de design (adicionadas ao arquivo CSS do Designer gerado) não têm mais efeito: o nome da célula deve ser adicionado à propriedade class no nó cq:htmlTag manualmente.

O arquivo CSS Designer gerado automaticamente (/etc/designs/<designname>.css) inclui as propriedades de design relevantes do CSS da caixa de diálogo de design com o nome da classe CSS igual ao div do componente. É necessário verificar se os nomes de classe CSS do arquivo CSS estático (/etc/designs/<designname>/static.css) não conflitam com esses nomes.

CQ5.3 e acima

A partir do CQ5.3, foi implementada uma API nova e mais dedicada que permite um melhor controle de tags de decoração (criadas automaticamente):

  • opção para especificar o nome da tag de um componente (propriedade cq:htmlTag / cq:tagName)
  • opção para controlar a tag por include: IncludeOptions#setDecorationTagName
  • opção para controlar o nome da tag padrão: ComponentContext#setDefaultDecorationTagName

Todas as opções acima permitem suprimir a tag de decoração se definidas como uma string vazia.

Aplica-se a

CQ5.2
CQ5.3+

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online