CQ5/WEM Developer Tricks

Gabriel Walt

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

CQ5/WEM Developer Tricks

Quick intro to a few mostly unknown new features:
1. 2. 3.

Front-End Optimization Mobile Detection Mobile Content Synchronization

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

1. Front-End Optimization

h p://www. ickr.com/photos/amorsiko/3355940427/
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

1. Front-End Optimization

h p://www. ickr.com/photos/amorsiko/3355940427/
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Front-End is about

HTML = Markup + Content CSS JS = Layout

CQ5 structures well HTML: under the content node under the component node Client Libraries

= Behavior

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Client Libraries
Each project usually has:

Various CSS & JS libraries Express relations between client libs

Framework Library A Library B Component A Component B Component C Site Design Publish ClientLib

dependencies embed

Various optimizations

concatenated mini ed gzipped

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Client Libraries

/ etc clientlibs designs site apps site components

Framework Library A Library B Component A Component B Component C Site Design Publish ClientLib

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Client Libraries

Demo

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Client Libraries Cheat Sheet

List ClientLib dependencies and embeds: h p://SERVER/libs/cq/ui/content/dumplibs.html

Include JS and CSS in separate les: h p://SERVER/PAGE.html?debugClientLibs=true

Show Firebug console: h p://SERVER/PAGE.html?debugConsole=true

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

2. Mobile Detection

h p://www. ickr.com/photos/mikecogh/4520411836/
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

10

Why?
We are facing:

ousands of devices with varying capabilities Rare so ware updates still, for most devices

Unequal capabilities

Screen size JS support CSS support Image support

Serve a dierent design

Need to abstract away capabilities

Server-side feature detection

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

11

Device Capabilities Abstraction

Wireless Universal Resource FiLe

Con guration le for all known mobile devices on earth Over 500 capabilities for each device that are broken up into 30 groups Used by many others, such as Facebook is Free and Open Source So ware h p://wur .sourceforge.net/

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

12

Mobile Page Rendering

HTML Renditions HTTP request Content in Repository
Master Content

CQ5

Default Site

Live Copy
Touch Phone Site

Device Capabilities (from WURFL)

Mobile Content Smart Phone Site

Dierent avors of same content

Supports JS Supports CSS Supports Image Exact Screen Size Supports Device Rotation Etc.

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Mobile Page Rendering

Web Path HTTP request
/site/news.html

Node Path
/content/site/news

CQ5

Default Site

Master Content

/site-mobile/news.touch.html

Live Copy
/content/site-mobile/news

Touch Phone Site

Device Capabilities (from WURFL)

Mobile Content
/site-mobile/news.smart.html

Supports JS Supports CSS Supports Image Exact Screen Size Supports Device Rotation Etc.

Smart Phone Site

Dierent avors of same content

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Mobile Page Rendering with Dispatchers

Visit site with mobile browser

Dispatcher forwards request to publish server

Lookup device list and evaluate device group

Dispatchers
Request mobile optimized version

Sends back URL to optimized version

CQ5

Render device-group speci c page

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

15

Mobile Page Rendering

Demo

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

16

Improving the default solution

Server A ention Span

h p://xkcd.com/869/

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

17

e default solution

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

18

e default solution, improved

We need JavaScript to improve it further!

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

19

Adding a check selector

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

20

e full solution

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

21

3. Mobile Content Synchronization

h p://www. ickr.com/photos/clemmac/3571171997/
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

22

What it does

HTTP request with timestamp of latest sync Redirects client to cache URL
Req uest

CQ5
If needed: generates content package and stores it in cache
ckag e

Unpacks content and merges it with previous content

s co

nten

t pa

Cache
Content changes from time Y to time Z Content changes from time X to time Z Content changes from time X to time Y

App Content, can be:

Web UI: HTML+CSS+JS displayed in web frame Native UI: JSON or XML parsed and displayed using native widgets

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Mobile Content Synchronization Bene ts

Optimized for low bandwidth consumption

Only di is transferred Content is ZIPed

Client Technology Agnostic:

Requires HTTP client Requires ZIP library

Reuse of content for mobile app Can synchronize any kind of content: HTML, XML, JSON, Images, PDF, les, App can be:

Web UI: HTML+CSS+JS displayed in web frame Native UI: JSON or XML parsed and displayed using native widgets

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

24

Mobile Content Synchronization

Demo

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

25

Mobile Content Synchronization Cheat Sheet

Con guration:

copy Copy les and folders parameters: path content Render content using standard Sling request processing parameters: path, extension, selector clientlib Package a Javascript or CSS client library parameters: path, extension assets Collect original renditions of assets parameters: path pages Render CQ pages and collect referenced assets parameters: path, extension, selector, deep

Console to update the content of the ContentSync packages: h p://SERVER/libs/cq/contentsync/content/console.html Documentation: h p://dev.day.com/docs/en/cq/current/developing/mobile/contentsync.html

2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

26

 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.