Tuesday, October 22, 2013

Remote access of JCR repository in CQ5 | AEM

Follow the below steps to access the CQ5 JCR repository (CRX) remotely.

  1. Construct the remote URL of your CQ instance.
    1. e.g. http://localhost:4502/crx/server
  2. Where localhost  is the host where CQ is running & 4502 is port where CQ is listening to the requests.
  3. Get the repository by using the JCRUtils class which is available in the jackrabbit-jcr-commons.jar library.
    1. repository = JcrUtils.getRepository("http://localhost:4502/crx/server");
  4. Create a SimpleCredential object by passing username, password entries.
    1. SimpleCredentials creds = new SimpleCredentials("admin", "admin".toCharArray());
  5. Invoke the login method of repository object by passing the credential object & the workspace name.
    1. Session session = repository.login(creds, "crx.default");

A code snippet for the above can be found below

Thursday, October 17, 2013

Access different widgets inside the widget event listeners | CQ5 / AEM

To access widgets inside the event listeners of any widget, follow the below step.
  1. Get the "dialog" object first.  
    1. var dailogObject = this.findParentByType('dialog');
  2. This will return the dialog object associated with your compoent dialog. Then look for the corresponding widget by invoking 
    1. var titleField = dailogObject .getField('./jcr:title'); 
  3. The above function looks for a widget by name './jcr:title' and returns the widget object associated.
Use case scenario.
Let's create a component dialog with 2 widgets (Pathfield, TextField). 
use case 1: if author selects any link URL then the corresponding title of the page should be set into the TextField widget.

Below steps can be followed to achieve this.
  1. create a component dialog with two widgets.
    1. One path field with name "./path" and xtype is  "pathfield"
    2. Text field with name "./title" and xtype is "textfield" 
  2. Attach a listener to the path field. And add "dialogclose" event to the listener. 
  3. The javascript function for the above event can be written as below.
  4. Sample screen shot

Attach listeners to widgets in CQ5 / AEM

Follow the below steps to create or attach listeners (javascript event listeners) to any widget in CQ5 / AEM.

  1. Create a node by name "listeners" of type "nt:unstructured"
  2. Find out the events which can be attached to a widget. You can find the list of events from the CQ Widget API documentation. Click here to visit.
  3. e.g. The "pathfield" widget has got one event called "dialogclose". This event is fired when user selects any link from the browse field & clicks OK.
  4. To attach this add one property by name "dialogclose" to the listeners node. The value should be any javascript function call. 
    1. e.g. function(){ console.log("You have selected a link in path field"); }
  5. Please see below  image for reference.




Tuesday, October 15, 2013

Edit the Bottom tool bar of SmartImage widget in CQ5 / AEM

Modify the below properties to remove/edit the tool bar (appears on the bottom) of the HTML5 smart image widget. (xtype: html5smartimage)

disableZoom="{Boolean}true" This will disable the zoom functionality
mapParameter="0" This will disable the Map feature
rotateParameter="0" This will disable the image rotation capability
cropParameter="" This will disable the image crop capability