Content-Centric Apps for Mobile Devices with AEM and DPS Integration

John Fait Software Development Lead, AdobeAEM R&D, Ottawa

Who are you?

Key Takeaways

DPS as a new channel for

AEM content

Developers continue using their AEM skills

Authors continue to

control content the AEM way

You may be thinking…

Key Takeaways

DPS as a new channel for

AEM content

Developers continue using their AEM skills

Authors continue to

control content the AEM way

Adobe® Digital Publishing Suite (DPS)

Adobe® Digital Publishing Suite (DPS)

“Create, distribute, monetize, and optimize engaging content and publications for mobile devices.”

Adobe® Digital Publishing Suite (DPS)Platform

Adobe® Experience Manager (AEM)

Adobe® Experience Manager (AEM)

“Organize, create, and manage the delivery of creative assets and other content across your digital marketing channels, including web, mobile, email, communities, and video.”

AEM + DPS

DPS Way

Pros:• Highly designed content that can be very engaging 

and interactive• Creatives have a great deal of freedomCons:• Slow – custom layout for each article and 

orientation• Multiple files for different target devices• Requires InDesign expertise

AEM + DPS Way

Pros:• Rapid development using templates• Automated creation of multiple formats• Easy content reuse• Content is fully managed• Low barrier to entry for usersCons:• Pixel perfect/complex layouts are difficult

Key Takeaways

DPS as a new channel for

AEM content

Developers continue using their AEM skills

Authors continue to

control content the AEM way

DPS

AEM

AEM + DPS Integration Details

DPS Integration

Content Management

Interface

DPS Web Services

DPS

AEM

AEM + DPS Integration Details

DPS Integration

Content Management

Interface

DPS Web Services

Publication  Console Workflow Servlet

DPS Page Manager

Content Sync

Sling Rewriter

Cloud Service

DPS Session Service DPS Folio Producer Service

DPS OAUTH Service DPS Folio Producer Service

MSM

DPSAEM

AEM + DPS Content Integration Details

Media PublisherWCM

Folder

Page

Designs

Folio

Article

ClientLibs

Assets

contains

uses

contains

contains

DPSFolio

DPSPage

contains

contains

HTMLResources

contains

uses

contains

DPSAEM

AEM + DPS Content Integration Details

Media PublisherWCM

Folder

Page

Designs

Folio

Article

ClientLibs

Assets

contains

uses

contains

contains

DPSFolio

DPSPage

contains

contains

HTMLResources

contains

uses

containsadaptTo

transform

transform

transform

Folio Propertiescq:cloudserivceconfigs

dps‐resourceType=dps:Issuedps‐exportTemplate 

dps‐folioId

dps‐* metadata

Article Propertiesdps‐resourceType=dps:Article

dps‐articleId

dps‐* metadata

ContentSync Configurationfor DPS export

• Folio linked to a configuration via property dps‐exportTemplate

• dps‐folio configuration transforms content in <article>.folio 

• dps‐HTMLResources configuration transforms AEM content into HTMLResources.zip

• Several handlers available out of the box• Create custom handlers as needed

Key Takeaways

DPS as a new channel for

AEM content

Developers continue using their AEM skills

Authors continue to

control content the AEM way

Publication Console

Author Workflow

• Create DPS CloudService instance• Manage AEM Folio using Publication Console• Edit sample Folio Geometrixx‐Unlimited + assign created cloudservice • Upload Folio from AEM to FolioProducer• Manage Folio using FolioProducer• Preview on device with Adobe Content Viewer

• Create Live Copies for multi‐device Folio• Upload Folio from AEM to FolioProducer• Manage Folio using FolioProducer• Preview on device with Adobe Content Viewer

Scaling Image Component• Folio aware component• Adapt rendered size and quality• Manage image file size

• <RESOURCE_PATH>.img.<FOLIO_SIZE>.<QUALITY>.<EXTENSION>

ContentSync Handler• Configuration setup can take time• Front loaded dev task• WARNING : Not all components export well

• be prepared to create custom content sync handlers• Update your configuration to include your handlers 

• Geometrix Unlimited• AEMHub

• CMO.com • CondeNast Vanity Fair • Lord Abbett Perspectives 

Tips and Tricks• Use RWD & AWD• Manage folio size• Embrace simplicity• Look for existing and new DevNet articles

• Preview /Debug• In AEM• Of file system• On Device

• Logging• Increase logging of com.adobe.cq.media• Redirect DPS_FP_EVENTS & DPS_CQ_EVENTS to dps.log

Key Takeaways

DPS as a new channel for

AEM content

Developers continue using their AEM skills

Authors continue to

control content the AEM way

ResourcesAEM : http://www.adobe.com/solutions/web‐experience‐management.htmlDPS : http://www.adobe.com/ca/products/digital‐publishing‐suite‐enterprise.htmlAEM + DPS : http://www.adobe.com/products/digital‐publishing‐suite‐enterprise/adobe‐experience‐manager.html

AEM Gems : http://dev.day.com/gemsAEM Forums : http://help‐forums.adobe.com/content/adobeforums/en/experience‐manager‐forum/adobe‐experience‐manager.html

DPS DevNet : http://www.adobe.com/devnet/digitalpublishingsuite.htmlhttp://www.adobe.com/devnet/digitalpublishingsuite/articles/aem‐dps‐tips‐tricks.htmlhttp://www.adobe.com/devnet/digitalpublishingsuite/articles/aem‐dps‐responsive‐design.htmlhttp://www.adobe.com/devnet/digitalpublishingsuite/articles/aem‐dps‐advanced‐topics.html 

PublicationsCMO : https://itunes.apple.com/gb/app/cmo‐magazine/id813307980?mt=8Lord Abbett : https://itunes.apple.com/us/app/lord‐abbett‐perspectives/id787529379?mt=8Vanity Fair iPhone : https://itunes.apple.com/ca/app/vanity‐fair‐digital‐edition/id427270716?mt=8

Image Copyrights

• Scale, openskyzen.blogspot.com• Server Room, www.web‐savvy‐marketing.com• Desktop PC, www.enterpriseirregulars.com• Finger, processspecialist.com• Hour Glass, fineartamerica.com• Thinking, dianespeartherapy.com• DPS, digitalpublishing.acrobat.com• Newsstand, www.gadg.com• DPS platform, www.perpetualvisions.com• InDesign workflow, help.adobe.com• Tips,  www.amarketingexpert.com• Tricks,  www.weirdlyodd.com