Creating your first Adobe Experience Manager Component

You can create a custom Adobe Experience Manager component that you can drag from the CQ sidekick and drop onto an AEM page. Furthermore, the custom component can be displayed in an AEM LiveCopy page. However, by default, the custom component is not locked in the LiveCopy page, as shown in the following illustration.

Notice in the previous illustration, three AEM components are displayed in a LiveCopy page:

• A custom component named Echo that display text that a user enters into a CQ dialog
• An Image component
• A standard Text component

By default, the two standard AEM components have a lock, meaning that these components cannot be modified in the LiveCopy page. However, the custom component can be clicked on and modified, as shown by this illustration.

This custom component should be locked within the AEM LiveCopy page. To successfully lock the custom component, you have to add extra configuration to the custom component (this will be shown later in this development article). 

This development article walks you through creating a basic AEM custom component name Echo. All it does is let an AEM user enter a value into a dialog. Then the value is displayed in the AEM web page (this is about as simple of a custom component as you can develop). Then the component is displayed in a LiveCopy page, where it can be modified. Finally the custom component is modified further so that it’s locked within the LiveCopy page.

To read this development article, click http://helpx.adobe.com/experience-manager/using/aem-first-components.html.

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner

I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.

Linked In: http://www.linkedin.com/in/scottmacdonald2010

Twitter: Follow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel. 

Creating a Custom AEM Dam Media Handler

You can create a custom Adobe Experience Manager (AEM) DAM media handler that is invoked when you upload a digital asset to the AEM DAM. A DAM handle processes an asset when it’s uploaded to the DAM. For example an DAM handler can generate a thumbnail generation and extract metadata.

To create an AEM DAM media handler, you create an OSGi bundle that contains a class that extends com.day.cq.dam.commons.handler.AbstractAssetHandler. For information, see AbstractAssetHandler.

To read this development article, click  http://helpx.adobe.com/experience-manager/using/damhandler.html.

To watch the video, click:

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner

I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.

Linked In: http://www.linkedin.com/in/scottmacdonald2010

Twitter: Follow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel. 

Creating a Custom LiveCycle DSC that returns MySQL data in XML

From time to time, I write development articles for other Adobe technologies (other than Adobe Experience Manager) based on community requests. This use case was made from a LiveCycle community member that I have worked with for many years.

You can create a custom LiveCycle custom service that queries a relational database, dynamically creates an XML document, and places the data within an XML document. The advantage to creating a LiveCycle service that creates XML is the XML can be developed to meet your business requirements. For this use case, assume that the requirement is the XML does not contain CDATA section.

Data within an XML document can be parsed and displayed by a client application. However, data located within an XML CDATA section cannot be parsed and is ignored.  The LiveCycle custom service created in this development queries MySQL, dynamically creates an XML document, places the MySQL data within the XML document, and returns the XML. Futhermore, a .NET application invokes the service by using the web service exposed by the LiveCycle custom service.

This development article walks you through creating the custom LiveCycle custom service that returns XML data that contains data queried from MySQL. The XML does not contain additional sections such as CDATA, as shown here in a .NET client application.

In addition, this article walks you through creating the client .NET application that invokes the custom LiveCycle Service using web services. To read this development article, click  Creating a Custom LiveCycle DSC that returns MySQL data in XML.

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner

I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.

Linked In: http://www.linkedin.com/in/scottmacdonald2010

Twitter: Follow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel. 

Creating AEM components that displays DAM Assets in 3D

From time to time, I enjoy looking at the some of the new JQuery plug-ins to see if I can find interesting ones to use with Adobe Experience Manager. As I have stated in previous posts in  Scotts Digital Community, one of the powerful features of AEM is the ability to create custom components using JavaScript frameworks, such as JQuery. I have located a new plug-in that I think the AEM community will like named 3dEye.js. See: https://github.com/metalshan/3dEye.

You can use this JQuery plug-in to create a custom AEM component that displays AEM DAM assets in 3D, as shown here:

By building engaging components, you can create an even better experience for Digital Marketers to do their jobs. To read this development article, click http://helpx.adobe.com/experience-manager/using/creating-gallery-3d.html.

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner

I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.

Linked In: http://www.linkedin.com/in/scottmacdonald2010

Twitter: Follow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel. 

Posting Special Characters to Adobe Experience Manager

In some some business use cases, you may have to post special characters, such as ®, to Adobe Experience Manager. Once posted to AEM, you can use special characters to set node properties, as shown in the following illustration.

By default, you cannot post strings to AEM that contain special characters. For example, you cannot run this CURL command to post special characters to AEM.

curl -H "charset=utf-8" -u admin:admin -X POST --data "test=€ , Š , Œ , ™ , š , œ , ž" http://localhost:4502/content/mynodetest

If you attempt this command with CURL, wrong characters are inserted into AEM. That is, you will see: "Ç , è , î , Ö , Ü , £ , P , Ä , " instead of "€ , Š , Œ , ™ , š , œ , ž , Ž , Ÿ".

To successfully post special characters to AEM and use them to set node values in the AEM JCR, you have to create a custom Sling Servlet that is able to handle UTF-8 (UCS Transformation Format—8-bit) encoded strings. This encoding type is a variable-width encoding that represents every character in the Unicode character set.

The Sling Servlet can decode the strings that contain special characters using Java application logic.

String id = java.net.URLDecoder.decode(request.getParameter("id"), "UTF-8");
String firstName = java.net.URLDecoder.decode(request.getParameter("firstName"),"UTF-8");

To post these special characters to the AEM Sling Servlet, encode the strings, as shown in this Java code example.

String val = java.net.URLEncoder.encode("cust®", "UTF-8");
String firstName = java.net.URLEncoder.encode("TOM®", "UTF-8");

To read this development article, click,   http://helpx.adobe.com/experience-manager/using/post_chars.html.

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner

I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.

Linked In: http://www.linkedin.com/in/scottmacdonald2010

Twitter: Follow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel. 

Creating Event Handlers for Adobe Experience Manager

You can develop a custom event handler for Adobe Experience Manager (AEM) that responds to events that occur at the JCR level. For example, you can write an event handler to respond to the following JCR events:

• A node was added
• A node was moved
• A node was deleted
• A property was added to a node
• A property was changed
• A property was deleted

To create an AEM event handler, you create an OSGi bundle that contains a class that implements javax.jcr.observation.EventListener. For information, see EventListener.

The following illustration shows a client making a change in an AEM web page that results in a new node being created in the AEM JCR. For example, a new customer signs up that results in a new node being created within the AEM JCR. The custom event handler listens for that event and responds.  

To read this development article, click http://helpx.adobe.com/experience-manager/using/events.html.

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner

I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.

Linked In: http://www.linkedin.com/in/scottmacdonald2010

Twitter: Follow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel.