Tuesday 10 June 2014

Dialog , Design Dialog in AEM/CQ


Dialogues will have
1) Field label: messaging information about input.
2) xtype:  type of the user interface
3) Name: is responsible for storage mechanism(it will always start with./ if it is used as storage mechanism)

While creating multiple fields under dialog, new nodes should be named as items.
xtype property is the user name field in dialogs.
items node, image path field -> add xtypepathfield; fieldLabel: Please select an image;name
Widgets located at:
Readable, CQ API : http://dev.day.com/docs/en/cq/5-5/widgets-api/index.html -

Design dialog:[design dialogname/labelshould be always ‘design_dialog’]
Take data input and config info as dialog. But data entered will always remain throughout all pages once we define a data
Note:Widget collection holds widgets
·         In edit mode, dialog always opens on double click.
·         Design dialog can be opened by going to design.

design_dialog’s properties are saved in website design level. So we need to use corresponding API to get the values stored indesign_dialog
Edit config:cq:editConfig - node used to keep edit options for a component/dialog

CQ Samples in github : https://github.com/davidjgonzalez/com.activecq.samples/tree/master/core/src/main/java/com/activecq/samples

Website Designs steps in AEM

Website Designs:

Websites designs are going to be created under Tools>etc/designs.
All site design components like css,images,js etc. are placed in this location.
Create a design:
Go to tools> designs and create a new design by selecting your design page template. Put all your css,images etc. files in this design level directories.
Applying design to website
Go to side kick>page>pageproperties>Advanced>designs> select required/created designs through above procedure.Save it, so that your website's all pages will have the new design now.
Content components:
Content appearing in side kick are content components.
Need to get your component in your side kick? Have any below items mapped to the component.
Edit config, design dialog, dialogue

Dialogues will have
1) Field label: messaging information about input.
2) xtype:  type of the user interface
3) Name: is responsible for storage mechanism(it will always start with./ if it is used as storage mechanism)
Default Widgets
Adobe has implemented many widgets which can be used. All these can be seen at
Eg: Rich text : /libs/cq/ui/widgets/source/widgets/form/RichText.js

Apache sling in AEM/CQ

Apache sling

Content centric application based on content repository to store & manage content. REST based and supports OSGi bundles.
Sling finds the resources via url decompositions.
>>> read more at: http://sling.apache.org/documentation/the-sling-engine/url-decomposition.html

A general uri can be decomposed as below.
URI                                           -resource path               -selectors          -extensions       -suffix path
/a/b.s1.s2.html/c/d.s.txt /a/b                  s1.s2                   html               /c/d.s.txt          

Now let us see some real examples:
Eg1 : http://localhost:4505/cf#/content/demos.html
Here,Resource Path /content/demos
selector = null
extension = html

Resource path resolution: It uses the given path
If no selectors given then below approach used to find the resource.
1) Is there any html /JSP under the directory?
2) is there any node name matching the JSP name?
3) is there any method JSP files? (GET.JSP/post.JSP)?
If nothing above matches,
4) Then it checks for sling property and path related
Note: Whatever may be the resource look up level, when look up resource happens, always the search starts from our base project path directories.
Looking order of folders reach back to app> libs

Eg 2: uri: content/demo.print.html
RP= /content/demo
selector print
It goes to relevant node, then gets resource path's path property then fetches result.

Components & Inheritance

Components can inherit properties, scripts, dialogs and other objects from base components.
All built in components available at /libs/foundation/components.CQ uses single inheritance, where there can only be a single super type for each component.  Inheritance in CQ is done by 'sling:resourceSuperType' attribute.

Components in Real time projects
Base comp will always inherit page component
base.jsp will hold header.jsp,footer.jsp,content.jsp etc.

Thursday 5 June 2014

Mapping of request URLs in CQ/AEM

Mapping of request URLs in CQ

There are cases where in we need to map the URL's during the process of CQ request. Also these must happen before Sling starts processing the URL.

Problem 1:

Say we need to convert the URL like: www.example.com --> converts to --> /content/mysite/en/


Let us see how this can be done. There are possible many ways to do this by creating an OSGi bundle for this, to ensure that the URL is filtered by the class first and then catered by Sling.

Apache sling site(http://sling.apache.org/documentation/the-sling-engine/mappings-for-resource-resolution.html) says, "The mapping of request URL's to resources is mainly configured in a configuration tree which is (by default) located below /etc/map. The actual location can be configured with the resource.resolver.map.location property of the org.apache.sling.jcr.resource.
internal.JcrResourceResolverFactoryImpl configuration."

Thus to deal with the new resource resolution, sling have a number of properties

sling:match -> A property to be set on a node in the /etc/map tree. A regular expression which is used instead of the node's name to match the incoming request here.
sling:redirect ->  This triggers a redirect response to be sent to the client, which inturn calls the client to send in a new request with the modified location.
sling:status -> Defines the HTTP status code sent to the client with the sling:redirect response.
sling:internalRedirect –> Here the current path internally gets modified to continue with resource resolution.
sling:alias –> helps the resource to indicate an alias name for the resource.

1st Solution to the problem 1:
Our above problem can be handled by Sling URL Mapping.

For this we need to create a node under the /etc/map directory with a resource type of sling:Mapping(A primary node type which may be used to easily construct entries in the /etc/map tree), then match to call www.example.com.

Once an incoming request matches the node name in above case, this then takes a property of sling:internalRedirect & this property is appended to the path to continue with internal resource resolution as shown below.

    <http jcr:primaryType="sling:OrderedFolder">

The above will ensure any request coming to www.example.com  is resolved to www.example.com/content/mysite/en/.

2nd Solution to the problem 1:

Say you need code-based solution for multiple websites and you are not interested in managing /etc/map, you can setup your own Filter as below.

package your.package;

import org.apache.felix.scr.annotations.*;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.RequestDispatcher;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.sling.commons.osgi.PropertiesUtil;
import org.osgi.service.component.ComponentContext;

@Component(immediate=true, enabled=true)
    @Property(name="sling.filter.scope", value="REQUEST", propertyPrivate=true),
    @Property(name="service.ranking", intValue=-10000, propertyPrivate=true)
public class URLFilter implements Filter {
    private static final Logger log = LoggerFactory.getLogger(ProductSEOFilter.class);

    protected void activate(ComponentContext ctx) throws Exception {

    protected void deactivate() throws Exception {

    public void init(FilterConfig filterConfig) throws ServletException {

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
    throws java.io.IOException, ServletException {
        String lang = "en";

        // 1. get domain and path
        // 2. check if your conditions are met
        // 3. extract language from domain
        // 4. internal redirect

        RequestDispatcher dispatch = request.getRequestDispatcher("/content/mysite/" + lang);
        dispatch.forward(request, response);

    public void destroy() {

Problem 2:
Say we need to implement case insensitivity in URL in our CQ application like test.html and TEST.HTML directs to same page

While trying to use Apache mod_rewrite and mod_speling we can find they both having some undesired effects on various type of requests. Option could be to create a request filter for this, but having multiple URL's for the same page is not recommended for SEO.

We can use mod_rewrite.c for this at your HTTP server so that CMS system remains untouched. Best known pattern approach for CQ is keep AEM content pages lowercase with no underscores and have http server convert url requests to lower case. Doing url clean up on webserver level improves your dispatcher caching options too. 


Subscribe Our YouTube Channel Here.
Read More: 

Interact with CQ/AEM

Location of CQ5 elements

1 OSGi Bundles

2 Templates
3 components - page, contents [JSP Scripts or Servlets are used to render components in CQ.]
4 Static files

What is the use of including Global.JSP <%@include file="/libs/foundation/global.jsp"%> ? Why global.JSP file is getting included default when you create a new component?

  • global.jsp file is having many useful implicit objects available once included.
  • it supports usage of cq taglibs
Read More: 
Solr and AEM
JSON for Solr
Search Persistance
Navigation in AEM
Website design steps in AEM

API's to interact with CQ/AEM Apps
2 Sling API

Side kick-

How the sidekick appear/disappear in a page?
WCM initialization code calls the side kick. So it appears
location of side kick code: /libs/wcm/core/components/init/init.jsp

Just include below code in your JSP. It brings side kick
<cq:include script="/libs/wcm/core/components/init/init.jsp" />

Include option for JSP
Compile time - <%@include file="/libs/foundation/global.jsp" %>
run time - <cq:include script="/libs/foundation/global.jsp" %>
run time - <sling:include resource="<%=par%>" %>

Options available to access content in CQ5 WCM/AEM

=============WCM API [currentPage object ]================<br>

<%=currentPage.getTitle()%> <br>

=============Sling API[properties object ]================<br>

<%=properties.get("jcr:title")%> <br>

=============JCR API[currentNode object ]==================<br>