Circuit Chicago Presentation - a highlight of developer centric features for Adobe Experience Manager 6. Presented by Emily Stange and Cedric Huesler

1. The New Developer
Adobe Experience Manager 6

2. <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>

3. 6._

4. TL:DR
1 2 3
Code 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

5. New code
workflow
1

6. Adobe Experience Manager
FilesystemGIT et al Filesystem
Runtime &
Repository
IDE
Preview
in Browser
commit
hot-deploysave
save

7. Less code… and
keep it neat!
2

8. Adobe Experience Manager
Component Model
cq: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

9. 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

10. Automated Site
Testing
3

11. New repo -
same API
4

12. 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
SearchBinaries
Nodes
Properties Nodes, Properties, Binaries, Search
CQSE Jetty

13. Update
process
5

14. Adobe Experience Manager
2-step Upgrade
Replace JAR
file
Startup runs
in-place
upgrade
run
crx2oak
Choice:
- TAR files
- MongoDB
Stop Start Stop Start

15. Mobile apps with
PhoneGap
6

16. New APIs7

17. 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/

18. TL:DR
1 2 3
Code 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

19. What I always wanted to know?