18. ContextAwareConfiguration

Article directory

18. ContextAwareConfiguration
- Introduce dependencies
- - Modify the all/pom.xml file
  - Modify core/pom.xml
- Create caconfig configuration class
- Added caconfig template
- Modify configuration information
- Modify the translation component
- View the effect

18, ContextAwareConfiguration

In project development, different configurations are often performed on different sites, so there is ContextAwareConfiguration (context configuration) in AEM to perform such operations.

Introducing dependencies

Modify all/pom.xml file

Add the following configuration to the embeddeds node, and install the caconfig plugin into the AEM instance when building the project

<embedded>
    <groupId>io.wcm</groupId>
    <artifactId>io.wcm.caconfig.extensions</artifactId>
    <target>/apps/wknd-packages/application/install</target>
</embedded>

Add in the configuration node to install the caconfig package into the AEM instance

<subPackages>
    <subPackage>
        <groupId>io.wcm</groupId>
        <artifactId>io.wcm.caconfig.editor.package</artifactId>
        <filter>true</filter>
    </subPackage>
</subPackages>

Add in the dependencies node, import the package required by caconfig, mainly used in the page

<!-- WCM IO CA Config UI Editor Dependencies -->
<dependency>
    <groupId>io.wcm</groupId>
    <artifactId>io.wcm.caconfig.editor.package</artifactId>
    <version>1.8.2</version>
    <type>zip</type>
</dependency>
<dependency>
    <groupId>io.wcm</groupId>
    <artifactId>io.wcm.caconfig.extensions</artifactId>
    <version>1.8.2</version>
    <type>jar</type>
</dependency>

Modify core/pom.xml

Find the bnd-process plug-in and modify the information as follows

The org.apache.sling.caconfig.bndplugin.ConfigurationClassScannerPlugin plugin is used to scan the caconfig class
-exportcontents: com.adobe.aem.guides.wknd.core.models.* If you need to use the caconfig class added later in the component, you need to export the component

<plugin>
    <groupId>biz.aQute.bnd</groupId>
    <artifactId>bnd-maven-plugin</artifactId>
    <executions>
        <execution>
            <id>bnd-process</id>
            <goals>
                <goal>bnd-process</goal>
            </goals>
            <configuration>
                <bnd><![CDATA[
                -plugin org.apache.sling.caconfig.bndplugin.ConfigurationClassScannerPlugin

                Import-Package: javax.annotation;version=0.0.0,*
                Export-Package: com.adobe.aem.guides.wknd.core.*
                Sling-Model-Packages: com.adobe.aem.guides.wknd.core.models
                -exportcontents: com.adobe.aem.guides.wknd.core.models.*
                    ]]></bnd>
            </configuration>
        </execution>
    </executions>
</plugin>

Create caconfig configuration class

Added ContextAwareConfigurationDemo.java, which is the configuration class that different sites need to use

The @Configuration annotation can be scanned by the ConfigurationClassScannerPlugin plugin
The @Property annotation declares the content of this property, default can add a default value

package com.adobe.aem.guides.wknd.core.config;

import org.apache.sling.caconfig.annotation.Configuration;
import org.apache.sling.caconfig.annotation.Property;

@Configuration(label = "Context Aware Configuration Demo", description = "Context Aware Configuration Demo")
public @interface ContextAwareConfigurationDemo {<!-- -->

    @Property(label = "Site Name", description = "Please enter Site Name")
    String siteName() default "steven aem practice";

    @Property(label = "Site Url", description = "Please enter Site Url")
    String siteUrl() default "http://localhost:4502";
}

Add caconfig template

Create a directory templates.caconfigs under the ui.apps/src/main/content/jcr_root/apps/wknd directory, and add a new file .content.xml

<?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"
    jcr:description="Template with focus on brand's configuration"
    jcr:primaryType="cq:Template"
    jcr:title="WCM.io Context-Aware Configuration page"
    allowedPaths="[/content/wknd(/.*)?,/content(/.*)?]"
    ranking="{Long}110">
    <jcr:content
        jcr:primaryType="cq:PageContent"
        sling:resourceType="wcm-io/caconfig/editor/components/page/editor">
    </jcr:content>
</jcr:root>

Modify configuration information

Modify the ui.apps/src/main/content/META-INF/vault/filter.xml file and add the following configuration

<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/apps/wknd/clientlibs"/>
    <filter root="/apps/wknd/components"/>
    <filter root="/apps/wknd/i18n"/>
    <filter root="/apps/wknd/templates"/>
    <filter root="/apps/msm/wknd_blueprint" mode="merge"/>
</workspaceFilter>

Modify the ui.content/src/main/content/jcr_root/content/wknd/.content.xml configuration, /apps/wknd/templates/caconfigs is the newly added template path above

<?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:allowedTemplates="[/conf/wknd/settings/wcm/templates/landing-page-template,/conf/wknd/settings/wcm/templates/article-page-template,/conf/wknd/settings/wcm/ templates/content-page-template,/conf/wknd/settings/wcm/templates/adventure-page-template,/apps/wknd/templates/caconfigs]"
        cq:conf="/conf/wknd"
        cq:lastModified="{Date}2021-04-27T20:19:05.296-08:00"
        cq:lastModifiedBy="admin"
        jcr:primaryType="cq:PageContent"
        jcr:title="WKND Site"
        sling:configRef="/conf/wknd"
        sling:resourceType="wknd/components/page"
        cq:redirectTarget="/content/wknd/us/en"
        cq:template="/conf/wknd/settings/wcm/templates/landing-page-template">
        <image jcr:primaryType="nt:unstructured">
            <file/>
        </image>
    </jcr:content>
</jcr:root>

Modify the translation component

Add the following code in the init method of Translate.java

@PostConstruct
public void init() throws WCMException, PersistenceException, RepositoryException {<!-- -->
config = resource.adaptTo(ConfigurationBuilder.class).as(ContextAwareConfigurationDemo.class);
log.info("siteName is {}", config.siteName());
log.info("siteUrl is {}", config.siteUrl());
}

Add the following two methods

public String getSiteName() {<!-- -->
    return Objects.nonNull(config) ? config.siteName() : "empty";
}

public String getSiteUrl() {<!-- -->
    return Objects.nonNull(config) ? config.siteUrl() : "empty";
}

Modify the ui.apps/src/main/content/jcr_root/apps/wknd/components/translate/translate.html file

<div class="cq-placeholder cmp-title" data-emptytext="${component.title}:Click to configure" data-sly-unwrap="${!wcmmode.edit} "></div>
<script src="//i2.wp.com/cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/crypto-js/4.0.0/crypto-js.js"></script>

<sly data-sly-use.clientLib="${<!-- -->'/libs/granite/sightly/templates/clientlib.html'}"/>
<sly data-sly-call="${clientLib.all @ categories='steven.translate'}" />

<sly data-sly-use.model="com.adobe.aem.guides.wknd.core.models.Translate">
    <h1>Class name: ${model.className}</h1>
    <h1>SiteName: ${model.siteName}</h1>
    <h1>SiteUrl: ${model.siteUrl}</h1>
    <div class="cmp-translate" appId="${model.appId}" appKey="${model.appKey}">
        <input id="trans-content" type="text" placeholder="Please enter the English content to be translated" >
        <button onclick="transByServlet()">Translate</button><br>
        <span id="result"></span>
    </div>
</sly>