Wednesday, 24 August 2016

Failed to decode downloaded font

When accessing AEM pages fonts may not be loaded properly

Error: 
OTS parsing error: Failed to convert WOFF 2.0 font to SFNT




Solution:
Add below plugin in pom.xml
<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <executions>
        <execution>
            <id>copy-content-resources</id>
            <phase>process-resources</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <outputDirectory>${project.build.directory}/vault-work</outputDirectory>
                
                <nonFilteredFileExtensions>
                    <nonFilteredFileExtension>jpg</nonFilteredFileExtension>
                    <nonFilteredFileExtension>jpeg</nonFilteredFileExtension>
                    <nonFilteredFileExtension>gif</nonFilteredFileExtension>
                    <nonFilteredFileExtension>png</nonFilteredFileExtension>
                    <nonFilteredFileExtension>ico</nonFilteredFileExtension>
                    <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                    <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                    <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                    <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                    <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                    <nonFilteredFileExtension>otf</nonFilteredFileExtension>
                    <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                    <nonFilteredFileExtension>jar</nonFilteredFileExtension>
                    <nonFilteredFileExtension>zip</nonFilteredFileExtension>
                </nonFilteredFileExtensions>
                
                <resources>
                    <resource>
                        <directory>${basedir}/src/main/content</directory>
                        <filtering>true</filtering>
                        <excludes>
                            <exclude>/etc/designs/${project.parent.artifactId}/jcr:content(/.*)?</exclude>
                            <exclude>**/*.eot</exclude>
                            <exclude>**/*.svg</exclude>
                            <exclude>**/*.ttf</exclude>
                            <exclude>**/*.woff</exclude>
                            <exclude>**/*.woff2</exclude>
                            <exclude>**/*.otf</exclude>
                            <exclude>**/.svn</exclude>
                            <exclude>**/.vlt</exclude>
                            <exclude>**/.vltignore</exclude>
                            <exclude>**/.DS_Store</exclude>
                        </excludes>
                    </resource>
                    <resource>
                        <directory>${basedir}/src/main/content</directory>
                        <filtering>false</filtering>
                        <includes>
                            <include>/etc/designs/${project.parent.artifactId}/jcr:content(/.*)?</include>
                            <include>**/*.eot</include>
                            <include>**/*.svg</include>
                            <include>**/*.ttf</include>
                            <include>**/*.woff</include>
                            <include>**/*.woff2</include>
                            <include>**/*.otf</include>
                        </includes>
                    </resource>
                </resources>
            </configuration>
        </execution>
    </executions>
</plugin>

Saturday, 20 August 2016

Injecting a DataSourcePool Service into an Adobe Experience Manager OSGi bundle



This development article discusses how to inject a DataSourcePool service into an OSGi component. By injecting a DataSourcePool, your OSGi bundle can connect to a relational database such as MySQL. You configure a DataSourcePool using Adobe Experience Manager.

Creating custom AEM workflow steps that send email messages

You can develop a custom Adobe Experience Manager (AEM) workflow step that sends email messages to users within a workflow. A custom workflow step is implemented as an OSGi bundle that you can build using Maven and the AEM Workflow APIs that belong to thecom.adobe.granite.workflow.exec package. For information, see Package com.adobe.granite.workflow.exec


A custom AEM workflow step


Monday, 15 August 2016

Creating an AEM HTML Template Language component that uses the WCMUsePojo class

You can create an Adobe Experience Manager (AEM) 6 Touch UI component that can be used within the AEM Touch UI view. Furthermore, you can use the AEM HTML Template Langauge (HTL - formally known as Sightly) to develop the AEM component. HTL is the AEM template language that can be used to replace use of JSP when developing an AEM component. HTL helps you to separate your design from your application logic. For more information, see Introduction to the HTML Template Language.

An AEM author can access a HTL dialog to enter component values. For example, you can enter text that is displayed by the component, as shown in the following illustration.

A HTL Component Dialog


After you enter the component's values (for example, text values), you click the checkmark icon and the values are entered onto the AEM page. 

Values displayed in the AEM web page

Thursday, 11 August 2016

Sightly – Quick Reference

Sightly was introduced by AEM 6.0 to replace JSP by a new HTML Templating System. This post is a quick reference about Sightly. A list of best practices and things to know.
Java class or server side Javascript
With Sightly, you can create a component with two methods. By using Java Class or Javascript Server-Side File. Personnaly, I always use Java Class, but Javascript seems to be a really good deal if you want to develop your components with one language. But keep in mind that AEM Java API offer more functionnalities than Javascript API.
  • Sigthly component with Java
package apps.mycomponent;
  
import com.adobe.cq.sightly.WCMUse;
  
public class MyComponent extends WCMUse {
    private String title;
    private String description;
  
    @Override
    public void activate() throws Exception {
        title = getProperties().get("title", "");      
        description = getProperties().get("description", "");
    }
  
    // Must have to get back the value in html file
    // Explanation : 'get' + capitalize method name
    public String getTitle() {
        return title;
    }
    
    public String getDescription() {
        return description;
    }
}

HTL (Sightly) Code Snippets


Below are few HTL syntax used frequently in AEM.


1. HTL does not support JSP tag libraries.


2. Including a script: data-sly-include instead of cq:include

<cq:include script="template.html"/> //Including a HTL file in JSP
<sly data-sly-include="template.jsp"/> //Including a JSP file in HTL

The element on which a data-sly-include has been set is ignored and not displayed.

3. Including a Resource: data-sly-resource

Includes the result of rendering the indicated resource through the sling resolution and rendering process. Basic syntax-

<article data-sly-resource="path/to/resource"></article>

Override resourceType of an include-
<article data-sly-resource="${'path/to/resource' @ resourceType='my/resource/type'}"></article>

Change the wcmmode-
<article data-sly-resource="${'path/to/resource' @ wcmmode='disabled'}"></article>