The purpose of this tutorial is to show you how to add the “cq:listeners” node to a component so when the component is modified the page will automatically refresh. You can read more about “cq:listeners” from a previous post I made here: cq:listeners node

For this tutorial we will be using crxde lite. This tutorial does not go into full detail, but does provide all the code that was used in the creation of this component for learning purposes.

For this tutorial I was using: AEM 6.0. You should be able to follow along with other versions of this software.

In order to follow along with this tutorial, you will need to have complete the following tutorial:

ShareThis Component Tutorial

If you have not completed the tutorial listed above, you can download a package from GitHub that has the completed component from here: ShareThis-AEM-Component. Just follow the instructions in the “readme” file to install the package into your instance of AEM.

If you have completed the previous steps, we can get started.

The purpose of this tutorial is to create an AEM Component that uses the ShareThis plugin that will allow users to share your content easily. For this tutorial we will be using crxde lite. This tutorial does not go into full detail, but does provide all the code that was used in the creation of this component for learning purposes.

For this tutorial I was using: AEM 6.0. You should be able to follow along with other versions of this software.

ShareThis is a tool that makes it easy to share your content across many social media websites. ShareThis also allows you to track when your content is shared. This is all accomplished by using their simple to use plugin. You can find more information here:

http://www.sharethis.com/

In order to follow along with this tutorial, you will need an account with ShareThis. The reason you need an account is because they will assign you a publisher id, which you will need in order to use their plugin. If you do not have an account, click on the link above and then sign up for their site. Registering is free and only takes a few seconds.

Now that you have an account with ShareThis, we can get started.

The purpose of this tutorial is to show you how to set up a basic project structure in AEM. For this tutorial we will be using crxde lite. This tutorial does not go into full detail, but does provide all the code that was used in the creation of this project for learning purposes.

For this tutorial I was using AEM 6.0. You should be able to follow along with other versions of this software.

Lets get started.

There are many times when an author is modifying a component on a page, and they will have to manually refresh the page in order to see the changes that were made to it. Now, this does not take up a lot of time, but if it happens often it can add up significantly.

There is a way to have the page automatically refresh when a change is made to the component. This can be accomplished by using the “cq:listeners” node that is the following type: “cq:EditListenersConfig”. This node type is used when you want the page to refresh whenever a certain action is done to the component.

Some of the properties that the node can have are:

The purpose of this tutorial is to install the AEM Sightly Brackets Extension and see how easy it is to transfer content back and forth between Brackets and your local instance of AEM.

For this tutorial I was using: AEM 6.0, AEM Brackets Extension 0.0.12, and Brackets 1.1. You should be able to follow along with other versions of this software.

In order to follow along you will need the following:

With the release of AEM 6, sightly has become the new go to language instead of using JSP. With the switch to this there has a been a new tool that was released, a sightly brackets extension. This extension offers some great features such as sightly syntax highlighting, code completion for sightly expressions, and bidirectional synchronization.

What does this all mean? Well, Brackets is an open source text editor that focuses on web design, and with sightly being a HTML5 template, it is a great tool to edit it with. Here is a link if you are interested: Brackets

The best feature of this extension is that you can package up your code, open it in Brackets and start editing it right away. Once you are done, you just click a button and your code is automatically uploaded to your AEM instance. It works the same way if you are editing that code in crxde lite, you just click a button and your code is updated in Brackets.

You can find more information here if you are interested in the extension: Sightly Brackets Extension

When you are preparing for technical interview, it is sometimes beneficial to know what types of questions that may be asked during your interview. I am going to list some questions that may be asked during an AEM interview, and the answers to these questions. This is not a definitive guide by any means, but a way to get going in the right direction.

This is part one of my AEM interview questions. You find the other parts here:

Part 2 - Part 3 - Part 4 - Part 5 - Part 6 - Part 7 - Part 8 - PDF

Q: What is AEM?

A: Adobe Experience Manager (AEM), is a java based content management system that is offered from Adobe. It was previously called Day CQ5, but was acquired from Adobe in 2010. AEM is based on a content repository and uses the JCR to access the content in the repository. AEM uses the Apache Sling framework to map request url to the corresponding node in the content repository. It also uses the OSGI framework to internally allow modular application development.

Q: What are the advantages of AEM over another CMS?

A: One big advantage of AEM over another CMS is how it integrates with other products from Adobe and with the Adobe Marketing Cloud. AEM comes built in with features like workflows to control content in the CMS, the use of search queries to find anything you are looking for, setting up social collaboration, tagging content, and a way to manage your digital content.

Finding a new tool to help you as a developer is always exciting. One that I would like to share with you that recently became available is the AEM Developer Chrome Extension. This extension is a great tool that can save you a lot of time when working with AEM. The extension was created by Nate Yolles, and you can check it out here on GitHub: aem-developer-chrome

You can also find the extension on the Google Chrome store here: AEM Developer Chrome Extension

Now you may be wondering what the tool has to offer. Here are some of its features:

Adobe has recently released a new tool that can extend your existing components dialog that is defined for the classic view and update it to the new Touch UI dialog. The tool will use the original dialog that was built with ExtJS and create a duplicate dialog that is based on the Granite UI.

Even though your classic dialog will work on the Touch UI, it does not have the nice new design that fits in with the Touch UI and it really stands out. If you wanted a new dialog before, you would have to create a new dialog for your component. Now with this new tool, it can be done automatically for you, which will save you time as a developer and allow you to focus elsewhere.

The tool is not perfect and cannot always create a dialog for you. So, you need to verify that your new dialog works correctly and that it meets your needs. It is a great tool that will help you get started with your dialog creation, and will save you time in the long run.

For more information go to the following link: Dialog Conversion Tool

Adobe will be holding another “Ask the Community Experts Session” this month on March 24th at 11 A.M. - 12:00 P.M. EST. This session will be focusing on workflows in AEM. The session will be giving an in depth look at building workflow models, custom workflow steps, using the workflow launcher, and available workflow operations.