Olet tarkastelemassa seuraavan version ohjesisältöä::

Huomautus:

The decoration tag behavior and options described in this article are based on AEM 6.2 CFP1 and later versions of AEM 6.2.

When a component in a web page is rendered, an HTML element can be generated wrapping the rendered component within itself. Wrapping the element primarialy serves two purposes:

  • A component can only be edited when it is wrapped with an HTML element.
  • Wrapping an element is helpful in applying custom styles by adding classes to the wrapper or using custom HTML tag for the wrapper.

For developers, AEM offers logic controlling the decoration tags that wrap included elements.

Customizing Wrapper Behavior

The following properties and nodes can be used to control the element wrapping behavior.

  • cq:noDecoration {boolean} : This property can be added to a component and a true value forces AEM not to generate any wrapper elements over the component.
  • cq:htmlTag node : This node can be added under a component and can have the following properties:
    • cq:tagName {String} : This can be used to specify a custom HTML tag to be used for wrapping the components instead of the default DIV element.
    • class {String} : This can be used to specify css class names to be added to the wrapper.
  • decorationTagName : This property is an include parameter and can be specified when a component is included using methods such as data-sly-resourcecq:includesling:include, dispatcher, etc.

The wrapper behavior does differ however depending on if HTL or JSP is used to include the element.

HTL

The behavior of the wrapper dependents on whether the component is included from a HTL container component (cq:isContainer = true  property set). A component is always wrapped if it is included from a HTL container component.

For further information about developing in HTL see the HTL documentation.

Decision Tree

This decision tree and accompanying tables summarize the logic that determines the behavior of the wrapper tags.

decision_tree_htlpre63cfp1

Table A

Value of cq:tagName

Edit / Design

Mode

Preview / Disabled

Mode

Property Absent Wrap with default DIV Do not wrap
"" (empty) Wrap with default DIV Do not wrap
Whitespaces <class="my Component">
<class="my Component">
Custom tag Wrap with custom tag Wrap with custom tag

Table B

Value of cq:tagName

Edit / Design

Mode

Preview / Disabled

Mode

Property Absent Do not wrap Do not wrap
"" (empty) Do not wrap Do not wrap
Whitespaces <class="my Component">
<class="my Component">
Custom tag Wrap with custom tag Wrap with custom tag

JSP

When including a component using cq:include or sling:include, the default behavior in AEM is to use a DIV to wrap the element. However, this wrapping can be customized in two ways:

  • Explicitly tell AEM not to wrap the component using cq:noDecoration.
  • Use a custom HTML tag to wrap the component using cq:htmlTag/cq:tagName or decorationTagName.

Decision Tree

The following decision tree illustrates how cq:noDecorationcq:htmlTagcq:tagName, and decorationTagName affect the wrapper behavior.

decision_tree_jsp

Lisensoitu Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License -lisenssin mukaan.  Creative Commons -lisenssien ehdot eivät koske Twitter™- ja Facebook-viestejä.

Lakisääteiset ilmoitukset   |   Online-tietosuojakäytäntö