Experience Manager 6 Developer Features - Highlights

The New Developer Adobe Experience Manager 6

<div itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Emily Stange</span> <span itemprop="jobTitle"> Senior Solution Consultant </span> for <span itemprop="affiliation">Adobe</span> </div>

<div itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Cedric Huesler</span> <span itemprop="jobTitle"> Group Product Manager Web Experience Management </span> for <span itemprop="affiliation">Adobe</span> </div>

6._

TL:DR

1 2 3Code save components quicker with Sightly

New JCR repository that can handle more content faster

Lots of new features/APIs and a fresh Touch-optimized UI

New code workflow

1

Adobe Experience Manager

FilesystemGIT et al FilesystemRuntime &

Repository

IDEPreview

in Browser

commit

hot-deploysave

save

Less code… and keep it neat!

2

Adobe Experience Manager

Component Modelcq:Component

Dialog

Code

ClientLibs

Analytics

Design Dialog

Edit Config

cq:Dialog (ExtJS)

JSP ECMA

Dialog: cq/gui/components/authoring/dialog

HTML (Sightly)+JS HTML (Sightly)+Java

cq:Dialog (ExtJS)

cq:EditConfig

cq:ClientLibraryFolder

‘analytics’ node

Adobe Experience Manager

Code<%@include file="/apps/geometrixx-media/global.jsp"%><% %><%@ page session="false" import="java.util.Iterator, com.day.cq.wcm.api.PageFilter" %><%

long absParent = currentStyle.get("absParent", 2L); Page rootPage = currentPage.getAbsoluteParent((int) absParent);

Iterator<Page> childPages = null; if (rootPage != null) { childPages = rootPage.listChildren(new PageFilter(request)); } %>

<div class="visible-phone btn-container"> <a class="btn btn-inverse authenticate"><i class="icon-cog icon-white"></i></a> <a class="btn btn-inverse menu-dropdown">Menu <i class="icon-chevron-down icon-white"></i></a> </div>

<nav> <ul> <% if (childPages != null) { while (childPages.hasNext()) { String cssStyle = ""; Page childPage = childPages.next(); if (isCurrentPage(currentPage, childPage)) { cssStyle = "class='current-page'"; } String title = getTitle(xssAPI, childPage); %><li <%=cssStyle%>><a href="<%= childPage.getPath() %>.html"><%= title %></a></li> <% } } %> </ul> <cq:include path="search" resourceType="geometrixx-media/components/page/search"/> </nav>

<%! boolean isCurrentPage(Page currentPage, Page page) { return currentPage.equals(page); }

String getTitle(XSSAPI xssAPI, Page page) { String navTitle = page.getNavigationTitle();

if(navTitle == null) { navTitle = page.getTitle(); } if(navTitle == null) { navTitle = page.getName(); }

return xssAPI.encodeForHTML(navTitle); } %>

<div class="visible-phone btn-container"> <a class="btn btn-inverse authenticate"><i class="icon-cog icon-white"></i></a> <a class="btn btn-inverse menu-dropdown">${'Menu' @ i18n} <i class="icon-chevron-down icon-white"></i></a> </div>

<nav data-sly-use-topNav="TopNav"> <ul data-sly-list-navItem="${topNav.items}"> <li class="current-${navItem.isCurrent}"><a href="${navItem.page.path}.html">${navItem.title}</a></li> </ul> <div data-sly-resource="${options: path='search', resourceType='geometrixx-media/components/page/search'}"/> </nav>

package apps.geometrixx_media.components.topnav;

import com.adobe.cq.sightly.WcmUse; import com.day.cq.wcm.api.Page; import com.day.cq.wcm.api.PageFilter; import java.util.*;

public class TopNav extends WcmUse { private List<Map<String, Object>> items = new ArrayList<Map<String, Object>>();

private String getTitle(Page page) { String navTitle = page.getNavigationTitle();

if (navTitle == null) { navTitle = page.getTitle();

if (navTitle == null) { navTitle = page.getName(); } }

return navTitle; }

public void activate() throws Exception { Page currentPage = getCurrentPage();

int absParent = getCurrentStyle().get("absParent", 2); Page rootPage = currentPage.getAbsoluteParent(absParent);

if (rootPage != null) { Iterator<Page> childPages = rootPage.listChildren(new PageFilter(getRequest())); while (childPages.hasNext()) { Map<String, Object> navItem = new HashMap<String, Object>(); Page childPage = childPages.next(); navItem.put("page", childPage); navItem.put("title", getTitle(childPage)); navItem.put("isCurrent", new Boolean(currentPage.equals(childPage))); items.add(navItem); } } }

public List<Map<String, Object>> getItems() { return items; } }

Component Code (HTML+JSP) Component Code (HTML+Sightly)

Reusable Java or JavaScript Code

vs

Automated Site Testing

3

New repo - same API

4

Adobe Experience Manager

Microkernel Repository (aka Oak)

Tar Set DataStore Indexes Tar Set

JCR

HTTP

5.x 6.x

Microkernel

ISMs for Session

ISMs for Workspace

Multiversion concurrency control

Our & Your Code Our & Your Code

SearchBinariesNodes

Properties Nodes, Properties, Binaries, Search

CQSE Jetty

Update process

5

Adobe Experience Manager

2-step Upgrade

Replace JARfile

Startup runsin-placeupgrade

runcrx2oak

Choice:

- TAR files

- MongoDB

Stop Start Stop Start

Mobile apps with PhoneGap

6

New APIs7

Adobe Experience Manager

New & extended APIs• Sling Models

• Sling Health-check

• Sling Resource Merge

• Translation API

• Vault RPC

• ContextHub

• ContentInsight

• eCommerce

• Social Components

• DAM Collection & Sets

Dependencies for Maven/Gradle: http://repo.adobe.com/nexus/content/repositories/releases/com/adobe/aem/aem-api/6.0.0.1/

TL:DR

1 2 3Code save components quicker with Sightly

New JCR repository that can handle more content faster

Lots of new features/APIs and a fresh Touch-optimized UI

What I always wanted to know?