What's new in AEM5.6

The AEM user interface combines the advantages of a web interface with the fluidity and responsiveness usually associated with desktop applications. AJAX (Asynchronous Javascript and XML) technology is used to support interface features such as:

Administration Consoles (Classic UI): The administration consoles for each major AEM function (WCM, DAM, Worklow, etc.) present a consistent "explorer" interface. For example, the WCM console features a two-pane interface with a dynamic expandable/collapsable tree on the left and a grid with draggable rows and columns on the right.

Sidekick (Classic UI): A floating "inspector" window appears on the editable page from which new components can be dragged and actions that apply to the page can be executed.

Component Browser (Touch-Optimized UI): On the right side of an editable page a sliding browser can be opened; from here components can be dragged onto the page where they can be edited.

Content Finder (Classic UI): On the left side of each authorable page, the content Finder provides quick access digital assets such as other images, Flash elements and documents as well as other pages and paragraphs. These items can be dragged to the page to position assets or create links to other pages.

Asset Browser (Touch-Optimized UI): On the left side of an editable page a sliding browser can be opened; from here assets can be dragged onto the page.

In-place Editing: Text components can be edited directly on the webpage without any intervening dialog box or explicit saving.

Drag and drop: Paragraphs, other components, and digital assets such as images can be positioned on the page simply by dragging and dropping them in the desired location.

Search as you type: Searching for content through the AEM interface presents dynamic matches as you type the query.

Context menu (Classic UI): Right clicking on most onscreen elements brings up a context menu with appropriate action options, just as in a desktop OS interface.

Basic of CQ5

 If you are a developer from Java/JSP background with decent experience of JavaScript, AJAX, XML, JSON and CSS you can start immediately with CQ5.
 CQ5  follows a template, page and component based development methodology.

Template(cq:template)
Every page that we build for our website has some template. Template itself does not have any rendering logic, a template is just a logical unit in CQ5 environment which groups certain pages that shares common features (features can be functional or non functional). For example, we have a group of pages that users can access without logging in (these are static/public pages), these pages have common feature (i.e. they are public, it is functional feature) and share common headers and footers (this is non-functional/rendering feature). As I mentioned above that template itself does not have any rendering logic then a general question that you might ask “how the pages are getting rendered?”, well we need to define a resource/page (cq:Page) that can will render the template.

Page(cq:page)
To create a page on our web site we need a template and to render a template we need a page. A page is combination of one or more resources (Java classes, JSP etc.), and the primary goal of a page to create page structure (ex. Two column with a header or one column with header and footer) in which components can be placed. So a page renders blank container and we need to place components in it, this is real power of CQ5. We can add and remove components on a page, we can change their position of components and even we can extend a page and add/remove components from extended pages.

 Component (cq:Component)
 Component is a reusable entity that we can place on any number of pages. As pages can be extended to add/remove functionality similarly a component can also be extended to add/remove functionality. Components are the smallest building block of a page and usually a component is composed of various resources (Java classes, JSPs, JS).Components can be hardcoded within the page component i.e (cq:page) or can be drag-n-drop into the page containing the parsys i.e the place holder.

How to Remove CQ5 generated div tag around components

Add the below code in to global.jsp, which you include for all the component jsp's.

if (WCMMode.fromRequest(request) != WCMMode.EDIT && WCMMode.fromRequest(request) != WCMMode.DESIGN) {
       IncludeOptions.getOptions(request, true).forceSameContext(Boolean.TRUE);

This will not generate any more extra  <div> tags  for any number of components you add.

How to integrate Typekit in CQ5

For rendering specific font style as per the customer,Adobe provides a package for integration of fonts in CQ5.

For Typekit integration
Download the package TypeKit-Page-Property-Extension-Beta-1.0.1.4 from the Adobe package manager.
Install it into your CQ instance.
You will get an additional option into the page properties of WCM


Create an account in https://typekit.com/ you will get an ID.
Than register your ip address/hostname to https://typekit.com/ where you need to render the fonts.
Like you deploy your website on www.myhost.com than register it in the typekit account.

After all this you just need to provide the typekit ID into the page properties in WCM.

:)