Domanda

Se un componente è incluso per esempio dal tag <cq:include>, un tag div viene aggiunto automaticamente intorno al componente nell'HTML generato.
A cosa serve questo tag div ed è possibile sopprimerne la creazione automatica?

Risposta, Risoluzione

Questo tag div viene utilizzato per modificare il sistema di CQ5 (disegno delle barre di modifica, rollover frames etc), il sistema Designer di CQ5 (impostare il nome della classe CSS, Designer CSS styling) e anche per identificare il componente nel DOM del client.

E' possibile sopprimere questo tag div generato sia specificando una proprietà vuota cq:cellName nella definizione del componente (vedere Come sono costruiti gli ID delle celle di progettazione) o utilizzando IncludeOptions.forceSameContext(true).
Nota: In entrambi i casi, non sarà più possibile modificare il componente (cioè senza finestre di dialogo).

Il tag div generato ha sempre almeno un attributo del nome della classe CSS costruito a partire dal nome della cella del componente (vedere Come sono costruiti gli ID delle celle di progettazione) usato per lo stile CSS del componente.
Questo attributo del nome della classe CSS non può essere soppresso.
E' possibile aggiungere ulteriori attributi per questo tag div generato dal nodo cq:htmlTag nella definizione del componente.
Ogni funzionalità di questo nodo sarà aggiunta come attributo tag.
E' anche possibile 'sovrascrivere' l'attributo CSS del tag div aggiungendo la classe property nel nodo cq:htmlTag.
In questo caso il nome della cella non viene più aggiunto automaticamente. Per questo motivo le proprietà rilevanti del disegno css dalla finestra di dialogo del disegno (aggiunta al file Designer css generato) non hanno più effetto -> il nome della cella deve essere aggiunto alla classe di proprietà nel nodo cq:htmlTag manualmente.

Il file Designer css generato automaticamente (/etc/designs/<designname>.css) include le proprietà css rilevanti del disegno dal dialogo di disegno con il nome della classe css uguale al componente div. Dovete assicurarvi che i nomi delle classi css del vostro file css statico (/etc/designs//static<designname>.css) non si scontrino con questi nomi!

CQ5.3 e superiori

A partire da CQ5.3, è stata implementata una nuova e più dedicata API che permette un migliore controllo dei tag di decorazione (creati automaticamente)

  • opzione per specificare il nome del tag per un componente (proprietà cq:htmlTag/cq:tagName)
  • per controllare il tag per include: IncludeOptions#setDecorationTagName
  • per controllare il nome predefinito del tag: ComponentContext#setDefaultDecorationTagName

Tutte le opzioni di cui sopra permettono di sopprimere il tag di decorazione se impostato su una stringa vuota.

Prodotti interessati:

CQ5.2
CQ5.3+

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online