Navigation API's, Client Library: in AEM CQ

Navigation:Creates a new navigation object.

Navigation API's:

getAbsoluteParent(2)- to get parent page

listChildren- list all children

Pagefilter- to exclude all invalid pages (pages hidden from navigation)

Below given sample code shows how a navigation element can be created.

<%--

navigation component.

navigation component

--%><%

%><%@include file="/libs/foundation/global.jsp"%><%

<%@ page import="java.util.Iterator,

com.day.text.Text,

com.day.cq.wcm.api.PageFilter,

com.day.cq.wcm.api.Page,

com.day.cq.commons.Doctype,

org.apache.commons.lang.StringEscapeUtils" %>

<%@page session="false" %><%

%><%

// TODO add you code here

Page navRootPage = currentPage.getAbsoluteParent(2);

if(navRootPage != null){

Iterator<Page> children = navRootPage.listChildren(new PageFilter(request));

%><ul><%

while(children.hasNext()){

Page child = children.next();

<li>

<%= StringEscapeUtils.escapeXML(child.getTitle())%>

</a>

</li>

}

%></ul><%

}

Client Library:cq:ClientLibraryFolder

The Client Library (ClientLib) in Adobe AEM makes it easy to include client libraries(files like js or css) by category and each can be accessed through dependencies.

It can be created under etc>clientlibs or design/project folder.

Read More:
Solr and AEM
JSON for Solr
AEM INTERNALIZATION
Search Persistance
Navigation in AEM

Website design steps in AEM

Dialog , Design Dialog in AEM/CQ

Dialog:

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:

http://localhost:4505/crx/de/index.jsp#/apps/training/components/content/complexcomp/dialog/items/items/tab1/items/tableField

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:

------------------------

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.

http://localhost:4505/miscadmin#/etc/designs

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

/libs/cq/ui/widgets/source/widgets/

Eg: Rich text : /libs/cq/ui/widgets/source/widgets/form/RichText.js

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

extn=html

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.

Adobe Experience Manager Tutorials

Tuesday 10 June 2014