Tuesday 10 June 2014

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.

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/

Anaylsis:

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.

<map>
 <http jcr:primaryType="sling:OrderedFolder">
 <www.example.com
 jcr:primaryType="sling:Mapping"
 sling:internalRedirect="/content/mysite/en"/>
 </http>
</map>

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)
@Service(value=Filter.class)
@Properties({
 @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);

 @Activate
 protected void activate(ComponentContext ctx) throws Exception {
 }

 @Deactivate
 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

Anaylsis:
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.

Solution:
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.

https://www.youtube.com/channel/UCbDTGaDneAbj_RCX27VE4cA/videos

Subscribe Our YouTube Channel Here.

Read More:

Website design steps in AEM

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

global.jsp
------------
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
AEM INTERNALIZATION
Search Persistance
Navigation in AEM
Website design steps in AEM

API's to interact with CQ/AEM Apps
-------------
1 CQ or WCM API
2 Sling API
3 JCR 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 ]================ 

<%=currentPage.getTitle()%> 

=============Sling API[properties object ]================ 

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

=============JCR API[currentNode object ]================== 

<%=currentNode.getProperty("jcr:title").getString()%>

AEM Run modes - Ports - CRX

CQ/AEM Run modes

1 Author
2 publish

default is always author

AEM - CQ Ports:

Default port of AEM is 4502,if this port is not available its next look up ports as 8080,8081...

AEM installation first time takes more time:
This is the time all set up is done in system level. All packages, jar files, lucene, webserver etc installed during this time.

Accessing AEM Main console:
http://localhost:4505/

CRX interface:
http://localhost:4505/crx/explorer/index.jsp

Felix console:
http://localhost:4505/system/console/bundles

IDE's for CQ- AEM

CRXDE Lite- browser based

http://localhost:4505/crx/de or http://localhost:4505/crxde

Limitations of CRXDE Lite:

You cannot debug JSP/Java code
No Auto code completion

CRXDE Eclipse

Below given the image of CRXDE once loaded first time. It contains 3 folders by default.

apps
etc
libs.

Configuring CRXDE to add more directories can be done at below location

/etc/crxde/profiles/default -> crxde:paths -> To add new directories, add required directories here as shown.

Directory structure CRX
----------------------------

content dir-all contents like page,
tmp-file moved from desktop to cq will be placed first in tmp
Home- All created user & groups are stored in home directory
apps- ALL new CQ apps/projects created here
etc- all website design, client lib, css, js
lib- code of the core functionality
var- all auditing info stored here like adding page, deleting page etc. all user compiled class files are cached here
jcr:System- version contents stored here
rep:policy,rep:repoPolicy- repository level permission(users & groups) are stored here
bin- to deploy our custom servlets.

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

Adobe Experience Manager Tutorials