Integrating Apache Wookie with AEM

Interactive websites - term making a lot of buzz over world wide web. 

But what are Interactive websites ?

Interactive websites are the ones which provides a number of different features to make interactive experience for users. One of the most important qualities of a website is interactivity. It allows users to interact with the website. With change of time web visitors expect to interact meaningfully with websites. 
There interactive aspects of a website often include : 

• responsive forms
• chat applications
• games
• or some sort of mini applications

Though creating any such feature is not a rocket science but it does comes with some development time associated with each feature. And creating such site in AEM would also cost time as there are no such features provided in AEM 'out of the box'. 

What if we have a central server where we can have such mini applications and use them directly in AEM ? 

Where users can select from a wide variety of interactive mini applications like chat-applications, geolocation sharing apps, a to-do list or a game and many such ready to use mini applications. 

Integrating Apache wookie with AEM allows users to drag & drop such interactive application. We have developed a connector tool for connecting AEM with apache wookie : AEM-WookieConnector 

Apache wookie is Java server application with allows you to upload & deploy widgets (mini web applications) for your applications. Using AEM-Wookie Connector tool AEM users can use simply drag n drop wookie widgets on their AEM pages and use from any where. 

Here are the steps to install AEM-WookieConnector Tool : 

Install Wookie as a standalone jar or as a WAR version from instructions given here

Next, Clone the AEM Wookie connector 

Build and Deploy :
   mvn clean install -PautoInstallPackage

Configure and provide the Wookie server URL and API Key

And Start Using !

AEM Wookie connector tool was presented as a solution to wider audience at a annually organized event AEMHub 

Other useful links :

• Presentation : HTML & Slideshare 
• GitHub repository : https://github.com/ankit-gubrani/AEM-WookieConnector

Creating custom Content Finder tab in AEM

AEM provides a quick and easy way to find & use content while editing a page via Content Finder. Content Finder is a way to search different types of assets stored in AEM and make them available for drag N drop on the pages. 

Creating a custom tab in Content finder makes it easier for user locate content or drag N dropable data. While creating a connector tool for AEM I came across this use case where I had to provide custom tab in the content finder to make data available for user while editing the page. 

Creating custom tab is a 2 step process : 

• Creating a back-end service for providing data.
• Creating custom content finder step.

1. Back-end service : It provides the data to the custom content finder tab to display. For this post I have created a text file with JSON data, in real world scenario it would be a service providing dynamic data.

2. Creating custom content finder step : 

• Create a folder with jcr:primaryType as sling:folder under /apps/wcm/extensions hierarchy with name contentfinder.
• Set property extensionGroup as tabs on "contentfinder" folder.
• Set property extensionType as "contentfinder_extension" on contentfinder folder.

• Now create a JS file under contentfinder folder.  

Above code creates a new content finder tab with name mentioned as tabTip property, setting the ranking as 1 makes this tab to appear on #1 position in the content finder, iconCls property sets the class on the tab and displays the icon on the tab. The most important part is creating a result box using CQ.wcm.ContentFinderTab.getResultsBoxConfig to display the result fetched from URL mentioned. 
After creating a similar JS file there will be new tab added in the content finder as shown here :  

Here is the link to github repository : 
https://github.com/ankit-gubrani/Codebrains

Configuring AEM 6.0 with mongoMK

One of the most important feature of AEM 6.0 is introduction of "Apache Jackrabbit Oak" with this new version of AEM. Jackrabbit oak is an effort to enhance the scalability and performance of the backend of the AEM content reporsitory. Oak introduces the micro-kernel for persistence of repository data, there are two micro-kernel implementation supported with oak :

• Mongo MK
• Tar MK

Tar MK:
Tar storage uses tar files for storing the repository content. The content is stored in segments that can be upto 256 MB in size. Segments are immutable which makes it easy to cache frequently accessed segments.

Mongo MK: 
Mongo storage uses Mongo DB to storing the content of the repository. Mongo MK makes oak repository scalable as mongo DB supports sharding and clustering.

In this post I will be discussing how to configure Mongo storage or MongoMK with AEM. Here are the set of steps for setting up mongo MK with AEM :

Setting Up Mongo DB (Ubuntu specific) :

1. Download the mongo binaries from https://www.mongodb.org/downloads
2. Extract the files from the downloaded archive.

tar -zxvf mongodb-linux-i686-3.0.4-rc0.tgz

3. Copy the extracted folder to the location from which MongoDB will run.

mkdir -p /opt/mongodb

cp -R -n mongodb-linux-x86_64-ubuntu1404-3.0.3/* /opt/mongodb

4. Ensure the location of the binaries is in the PATH variable.

export PATH=/opt/mongodb/bin:$PATH

5. Run MongoDB : mongod (run mongod command from termilnal)
6. Create the data directory.

mkdir -p /data/db

7. Set permissions for the data directory.

Before running mongod for the first time, ensure that the user 
account running

mongod has read and write permissions for the directory.

8. Run MongoDB.

mongod or /opt/mongodb/bin/mongod

I used Robomongo which is a client to access Mongo DB server and  
perform the manipulations on the mongo DB.

AEM Setup

1. Unpack AEM by running the following command:
   java –jar cq-quickstart-6.0.0.jar -unpack
2. Create a folder named crx-quickstart\install in the installation directory.
3. Configure the node store by creating a configuration file with the name of the configuration you want to use in the crx-quickstart\install directory. The Document Node Store (which is the basis for AEM's MongoDB storage implementation) uses a file called org.apache.jackrabbit.oak.plugins.document.DocumentNodeStoreService.cfg. Here is the sample DocumentNodeStoreService.cfg file :

12. Start the AEM 6 jar with a MongoDB storage backend by running:

java -jar cq-quickstart-6.0.0.jar -r crx3,crx3mongo Here is the link to github repository : https://github.com/ankit-gubrani/Codebrains

Configuring AEM 6.0 with remote SOLR server

Apache Jackrabbit Oak is the next generation repository implementation which powers in AEM 6.0. Oak does not index content by default to offer improved performance. Every JCR query will traverse whole repository, impacting the performance of the repository. Custom indexes need to be created to reduce node traversal with for every query in the repository.

The SOLR index

There are multiple options to index data in AEM, in this post we will be covering "The SOLR index".The Solr index in oak can be used for any type of JCR query. The integration in AEM 6.0 happens at repository level so Solr is one of the possible indexes that can be used in oak. 

Here are the steps for configuring AEM 6.0 with remote SOLR server : 

1. First extract the Solr zip prior to version 5.0 (I used solr 4.9.1) in folder named Solr .

2. This solr folder should be parallel to crxfolder folder AEM installation directory, i.e inside Author directory.

3. Copy the example folder and paste in the same directory (Solr), rename the folder as node1 (any name).

4. Repeat step 3, just rename the folder as node2.

5. Create a folder in node1 and node2 with name cfg. Inside this folder paste solr.xml, zoo.cfg and oak core config folder. (I used default core collection1 in my case)

6. Now start the first solr shard with zookeeper configured. Run the following command from node1 directory :

java -Xmx256m -Dbootstrap_confdir=./cfg/oak/conf

-Dcollection.configName=myconf -DzkRun -DnumShards=2 -jar start.jar

7. Now start the second shard by running the following command from node2 directory :

java -Xmx256m -Djetty.port=7574 -DzkHost=temphost.ig.com:9983 -jar  start.jar

Catch here is Solrcloudserver does not use the URL for initialization, rather it uses the connection string. Connnection string is same we pass with the zkHost parameter. In my case it was not working if I passed value as localhost:9983. I had to create a custom host name and the pass the same connection string while configuring with AEM.

8. Once second shard is up and running, check if it both the shards are working or not by accessing the url :

http://localhost:8983/solr/#/~cloud

9. Now open the Configuration Manager console (localhost:3502/system/console/configMgr), and set the value of Oak Solr server provider as Remote Solr from drop down.

10. Now edit Oak Solr remote server configuration and set the values as :

Solr HTTP URL : http://localhost:8983/solr/

ZooKeeper host : http://temphost.ig.com:9983

Solr collection : collection1

No. of collection shards : 2

Replication factor : 1

Solr configuration directory : /home/codebrains/CQ_Instance/Author/solr/node1/cfg/oak

11. Now open the CRXDE Lite and create a node under oak:index with following properties :

Name : solrindex (String)

jcr:primaryType : oak:QueryIndexDefinition

reindex : true (Boolean)

async : async

type : solr

Polling Importer configuration in AEM 6.0

AEM houses a powerful feature which allows user to poll after specified interval, as we discussed in our earlier blog Feed importer in Adobe CQ/AEM. 
Its pretty straight forward to create a custom polling importer in AEM all one needs to do is create a polling configuration node with following properties on a nt:unstructured node : 

While with AEM 5.6 it is fine to create such polling node any where in CRX, polling importer will work fine but with AEM 6.0 polling works only if polling configuration node is created either under /etc or /content hierarchy.

I was stuck in similar problem when my project that was imported from AEM 5.6 to AEM 6.0. As we were creating the polling config nodes under /var hierarchy and it was not initiating the polling our service.

AEM 6.0 allows users to configure path under which if polling configuration nodes can be created, polling importer work fine i.e. after configuring the Day CQ Polling importer service one can create polling node in the specified path and polling still works fine.

Or one create a sling:OsgiConfig with name as PID of the Polling importer service and add the allowed path property. As follows :

Requesting AEM Component via AJAX

Why?
In AEM pages are created in modular fashion and this modularity is achieved using components. But we often come across a situation where we want a specific component to be reloaded and not the complete page but mostly dispatcher is the main reason for loading a component via AJAX.

As dispatcher caches component's output html due to which dynamicity of a component becomes questionable. For instance if we want a component to show unique results with each request. Loading component via AJAX is one way out for handling such scenarios.

Sample AJAXified component

How?
To request a component via AJAX we will be using a Sling trick. In this trick we will request the URL to the component node then Sling resolution comes into the picture and it look for sling:resourceType property ,executes the script at given path & sends final HTML response.

It is quite straight forward to implement this approach. We need to create a cq:component and the Javascript code for making a AJAX request.  As we would want our component to give unique response each time, we can either use a selector or query parameters and then give response accordingly.

Code snippet below gives an example of how to request the desired component via ajax and show  the latest result.

But for requesting a component's node we need to store the path on which we would be requesting, we will have to store that on our page itself in the page's DOM. Like shown below:

Now we just need to read the path of the component node and request for component to reloaded via AJAX. Here is the sample jQuery method for how to achive this.

I have created a demo component which is loaded on the page via AJAX. To use it one need to drop AJAX Demo Component inside parsys of AJAX Demo Warpper component and on press of reload button it reloads the component via AJAX.

Here is the link for code repository for a sample component that is reloaded via AJAX : Requesting cq:components via AJAX

OSGI : Creating Factory configuration in CQ

AEM houses a powerful open source framework in its technology stack, Apache Felix. Felix is a open source implementation of OSGi. OSGi provides a way to manage bundles and their configurations.

OSGi provides a way to configure services and modify those configurations on the run-time. But apart from this there is a another powerful feature that OSGi provides that is : ability to create Factory Configurations. Factory Configurations is a way to create a single service, and bind multiple configurations to it  & then consume those configurations from different classes/Services. You all might have used Logger service provided by CQ out of the box, logger is an example of factory configuration service. 

Factory Configuration

Here are the steps for how to create factory configuration in CQ.

Step 1:

Create a Component/Service class to hold configurations values. This component will act a interface for adding properties of multiple configurations. Key for creating this Component/Service class is that declare this class as a configurationFactory and pass configuration policy as required.

Step 2:

Create a service to that actually uses the FactoryConfig Component/Service as a interface to allow user to add configuration and accept values of properties. For creating this service we will use dynamic binding of OSGi. We will have to create a collection of FactoryConfig class and binding & unbinding methods are also required that will add or remove each FactoryConfig object in/from the collections.

Here is the link to code repository for this service : OSGi Factory Config