In Adobe AEM, how does the parsys component inject styles into the design css file?

Question

In Adobe AEM ( formerly CQ5 ) the foundation component parsys' design_dialog allows the user to set the "Cell Padding". Whatever value is entered into the text field will show up in the design css.

For example:

Given that the current page is using /etc/designs/my-design the page output will include reference to the /etc/designs/my-design.css stylesheet virtual path.

If the user configured the parsys cell padding to be 30px then the my-design.css file will include the following:

.page_full .par div.section {
  padding: 30px;
}

The string "30px" is stored in the jcr:content/page/par/section attribute called div.padding, however, I can't figure out how the parsys.jsp injects it into the my-design.css.

EDIT: To be clear, the currentDesign.writeCssIncludes(pageContext); call in the foundation page headlibs.jsp is the code that sets up the design css includes like so:

<link href="/etc/designs/my-design/static.css" rel="stylesheet" type="text/css"/>
<link href="/etc/designs/my-design.css" rel="stylesheet" type="text/css"/>

However, it is not clear how to get your own CSS included in the response body of the /etc/designs/my-design.css request.

What do you mean by injecting? What are you trying to accomplish, or is this merely for knowledge? — justacoder
The padding gets added dynamically based on the user setting. I want to do a similar thing with my component, but I don't know how this setting gets into the main design.css file. — jedatu

diffa diffa · Accepted Answer · 2013-03-28T23:55:03

The parsys doesn't really inject the styles, but when you change the design parameters for the parsys component in they are stored the design page and when this is rendered as css by a Design class and the output is contains those updates.

How the design CSS is rendered

The design information is stored in the /etc/designs/my-design as you noticed. This component for this page supports a css rendition of the information contained.

You can track the source of the rendition using the CQ development tools included in the product...

If you take a look at your design page in crx/de or crx/explorer, you'll notice it has sling:resourceType of wcm/core/components/designer.

That will be rendered by the following java class /libs/wcm/core/components/designer/designer.css.java. You can take a look at this file in crx/de also. I'm not sure the license in that file would allow me to post a snippet here, but you should be able to find it easily yourself.

The class takes the page Resource and adapts the object to a com.day.cq.wcm.api.designer.Design instance.

Looking at the dependency finder in the web console, the Design class is provided by the cq-wcm-api bundle.

<dependency>
  <groupId>com.day.cq.wcm</groupId>
  <artifactId>cq-wcm-api</artifactId>
  <version>5.5.0</version>
  <scope>provided</scope>
</dependency>

This is provided by the jar: /libs/wcm/core/install/cq-wcm-api-5.5.0.jar, which is bundled with CQ.

Customising the design CSS

Looking at what you are trying to achieve... you are able to customise the content of the design page (this is normally by adding a design dialog to the component you are working with) adding any properties/css attributes associated with that component.

For an example of this take a look at logo component within the geometrixx design (/etc/designs/geometrixx/jcr:content/contentpage/logo). This already has a div img.margin property which translates to

.contentpage div.logo img {
  margin: 1px;
}

in the output css (/etc/designs/geometrixx.css?cacheKiller=xyz).

Adding a property named div img.border with a value of 5px solid red to this node will output css as:

.contentpage div.logo img {
  margin: 1px;
  border: 5px solid red;
}

Considering your example, your design content node at /etc/designs/my-design should look something like this:

+jcr:content
  + page_full
    + par
      + section
        - div .margin = 30px

Or in the repository XML format, like this:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Page">
    <jcr:content
        cq:lastModified="{Date}2013-01-13T17:22:51.339+01:00"
        cq:lastModifiedBy="admin"
        cq:template="/libs/wcm/core/templates/designpage"
        jcr:primaryType="cq:PageContent"
        jcr:title="design"
        sling:resourceType="wcm/core/components/designer">
        <page_full jcr:primaryType="nt:unstructured">
            <par jcr:primaryType="nt:unstructured">
                <section
                    jcr:primaryType="nt:unstructured"
                    div_x0020_.margin="30px"/>
            </par>
        </page_full>
    </jcr:content>
</jcr:root>

Design dialogs (which should be used to customise design content) are described to some extent on the Developing Components page. You can find the design dialog (for an example) of the logo component mentioned above at /libs/foundation/components/logo/design_dialog.html

In Adobe AEM, how does the parsys component inject styles into the design css file?

2 Answers

How the design CSS is rendered

Customising the design CSS