Sidekick Issue 0

Sidekick 

The digital magazine on Adobe Experience Manager | Issue 0 

Sending PhoneGap Push 

Notifications from Adobe 

Experience Manager 

Responsive Design with 

Adaptive Images 

ClientLibs Explained 

By Example 

Sightly - 

Beautiful Markup 

by Rob In der Maur 

by Vianney Baron 

by Feike Visser 

by Şenol Taş 

▼ 

Sidekick | Issue 0 | page 1/2


▲ 

Welcome to Sidekick 

by Rob In der Maur (@ridmaur) 

Welcome to Sidekick. The first digital magazine for Adobe Experience Manager developers and architects. The title 

of the magazine refers to the toolbox authors use to build rich and engaging content. The same toolbox that developers 

are building, enhancing and/or modifying components for as part of the overall delivery of an Adobe Experience 

Manager implementation. 

But Sidekick actually refers as well to the more literal meaning of the word, being yet another, community driven, 

‘assistant’ to our developers and architectects on top of the communication and information that Adobe offers 

around Adobe Experience Manager. 

We believe there is an audience for a magazine that our beloved Adobe Experience Manager developers and architects 

can read while not being busy on the job. As a way of catching up with new ideas, concepts, implementations, 

etc., not necessarily part of the engagements they are working on right now. 

This magazine is inspired by a similar initiative started by Michael Chaize around web standards and technologies 

(HTML5, CSS, JSP) which is named Appliness, has established its footprint and is up to its 20th issue! 

The issue you are viewing on your tablet right now is named Issue 0 and that is for a particular reason. We consider 

this first issue a soft launch of the magazine, not yet supported by an infrastructure consisting of a web site, social 

channels, etc. It is almost like we are ‘dipping our toes in the water’ before going for a full launch. The feedback 

we receive (and we highly appreciate any feedback) will further define the content, delivery, and supporting 

infrastructure of the magazine. 

For now, enjoy this first issue of Sidekick. 



Sending Push Notifications 

from Adobe Experience Manager 

by Rob In der Maur 

▼

CommuniQAEM 


▲ 

It might be relevant to automatically push out a notification whenever a new piece of content is created 

within your AEM environment. This article is going to illustrate how you can combine the power of 

AEM workflows with the PhoneGap framework for building cross-device mobile applications. 

PhoneGap application 

Creating a PhoneGap application that can receive notifications is really beyond the scope of this 

publication. But, as usual, there are some good resources out there on the web, particularly Holly 

Schinsky’s articles titled Apple push notifications with PhoneGap and Android Push Notifications 

with PhoneGap. In this illustration we will only focus on the iOS side of the push notification space. 

Once you have your iOS application running on your mobile device, ready to receive notifications, 

an excellent way to test these out is using PushMeBaby, an OS X desktop application that allows you 

to send notifications to your mobile device. Be aware that you can not test your mobile application 

receiving notifications in the iOS simulator; it has to run on a hardware device! 

Push Notification Service 

Assuming we have the mobile application setup in place and actually working, the interesting bit in 

light of the theme of this publication is, obviously, to have it send notifications from our AEM platform. 

To invoke push notifications from AEM, we are going to make use of JavaPNS, a Java library to send 

notifications through the Apple Push Notification Service as well as Bouncy Castle Java cryptography 

API’s, as we need those to work with our iOS certificates. 

1. In CRXDELite, create a bundles folder underneath your application root folder. 

2. Right click on the bundles folder and select Create Bundle and give the bundle a symbolic 

name like com.adobe.demo.pn. This will create a com.adobe.demo.pn folder that contains a 

com.adobe.demo.pn.bnd node as well as a src 

folder. 

3. Create a libs sub folder underneath your bundles 

folder. 

4. Your src folder has been automatically set up with 

an Activator.java source file. At that same level 

create a new file node named 

java (which will be our interface) and an impl 

folder node. Within the impl folder create a 

file node (which will 

be our implementation). (play the video on the 

right to see how we could create a bundle within 

CRXDELite). 

Play. 

Video 1. Create a bundle in CRXDE Lite 

▼ 



▲ 

5. To ensure we can use these libraries in our bundle, update the com.adobe.demo.pn.bnd file to look 

like 

 

javapns.test.* 

Import-Package: * 

# Private-Package: com.adobe.demo.pn 

Include-Resource: 

 

Bundle-Description: 

Bundle-SymbolicName: com.adobe.demo.pn 

Bundle-Version: 1.0.0-SNAPSHOT 

Bundle-Activator: com.adobe.demo.pn.Activator 

6. Our code in is straightforward as it is simply the definition of our interface. 

package com.adobe.demo.pn; 

import java.util.List; 

 

 

{ 

 

throws Exception; 

} 

7. Our code in is of more interest. 

package com.adobe.demo.pn.impl; 

// lots of imports 

import ... 

 

 

 

{ 

 

 

@Reference 

private SlingRepository repository; 

@Reference 

 

private Session adminSession; 

private ResourceResolver resourceResolver; 

 

@Activate 

 

{ 

try 

{ 

 

▼ 



▲ 

resourceResolver = resourceResolverFactory.getResourceResolver 

(adminSession); 

Here we import the APN certificate 

InputStream is = resourceResolver. 

getResource(“/apps/geometrixx/bundles/apn-cert.p12”).adaptTo(InputStream.class); 

 

 

} 

 

{ 

 

e.getStackTrace()); 

} 

} 

 

 

{ 

 

 

return result; 

} 

} 

Here we send the notification 

8. As part of the activation of the bundle, we actually 

load our certificate, which we subsequently use 

when sending the actual push alert. Note how 

we have not worried too much about password 

security here... 

9. Talking about certificates and the required libraries 

for our bundle; the best way to get these in your 

bundle is using CRXDE rather than CRXDE Lite, 

as CRXDE allows you to simple import (or even 

drag and drop) external files into your bundle / 

application (as shown in the video on the right). 

This is a bit more convoluted in CRXDE Lite. 

Push Notification Workflow 

Play. 

Video 2. Import files in CRXDE 

The final bit to our integration is to hook it all together as part of a workflow. Which we then can invoke 

from any page in our content. 

In order to do that, we need to build a custom workflow step that uses our push notification service 

(bundle) and then use that step in a workflow model. 

The workflow step we will define as an ECMAScript in 

ecma and could look like 

▼ 



▲ 

 

 

 

 

 

 

 

 

{ 

 

 

 

 

 

} 

 

And then we are going to use this workflow functionality in a workflow by adding a process step and, 

as part of the definition of that step, point to our ECMAScript. 

On each page, when going to the Workflow tab in the Sidekick, we can kick off our Send Notifications 

workflow and it will send a push notification to our device containing the page title and page description. 



Responsive Design 

with Adaptive Images 

by Vianney Baron 

▼


▲ 

As you know CQ 5.6 has recently been released, and if you’ve seen demo’s or read the release notes 

you will have noticed that this new version offers support for responsive design. So what does this 

mean exactly? And how can you leverage the new features to ensure your website is responsive as 

well? 

Responsive Design, a clarification 

First things first, it’s important to define what responsive design means exactly. There are loads of 

resources available on the net of course, but I find that this small sample illustrates the concept really 

well: it’s really just about making sure your website design can adapt to various resolution and devices 

and offer an optimal user experience in all cases. 

So how is this supported in CQ 5.6? With two main features: 

• Responsive design preview in authoring 

• Geometrixx Media 

Let’s explore these and see how the magic happens. 

Responsive Preview 

When authoring content in CQ 5.6 you will notice that most features that you were used to in previous 

version are still there, including the small magnifying glass allowing you to switch to Preview mode. 

However when you click you will immediately notice a small difference. 

We can now select the device we’re targeting and adapt the user experience accordingly; 

this is really convenient, as it saves the hassle of resizing the browser window manually. 

Note that the list of available devices is just indicative, you can very simply add new devices 

Play. 

Video 1. Responsive design preview. 

▼ 



▲ 

or modify the existing ones, but it’s not the topic of this post (just a small hint: look at 

/libs/wcm/mobile/components/emulators on your CQ 5.6 instance). 

Of course I did not choose a random website. This little guy is the new member of the Geometrixx 

family: Geometrixx Media, this website is designed for customers in the media and publishing space, 

and it illustrates a number of new 5.6 features, including responsive design. Play the video on the 

right to explore how the website looks on various devices. 

Now let’s see how we achieve this in Geometrixx Media, and how you can leverage this sample to 

kick off your responsive design work. The two main concepts here are: 

• Media queries 

• Adaptive image component 

Nowadays most designers are familiar with media queries, this CSS 3 feature allows us to define 

different styles for different screen sizes. This is the corner stone of any responsive website. 

For instance if you open the Geometrixx Media design you will notice several CSS stylesheets. And 

each of these starts with this statement: 

@media (max-width: 480px) { 

And that’s pretty much all you need to know to start working with media queries… 

Adaptive Image Component 

Next let’s have a look at the adaptive image component. As you’ve probably noticed the layout is not 

the only thing that changes when we resize Geometrixx Media. Images are also resized on-the-fly, 

using the adaptive image component. 

Figure 1. Overview of CSS stylesheets. 

▼ 



▲ 

If you look at the actual code of the component (under /apps/geometrixx-media/components/ 

adaptive-image) you will see that all we do here is use media queries to load the right image 

depending on the screen resolution. 

Images are then suffixed with specific selectors to obtain the right size, for example: myImage. 

adapt.620.high.jpg will generate a rendition of “myImage.jpg” with a with of 620px. 

The actual magic happens in a servlet, the code of which is available here: 

/apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/ 

commons/impl/servlets/AdaptiveImageComponentServlet.java 

It’s simply extends the AbstractImageServlet to produce the new image in real time, based on a 

pre-defined list of widths that is configured in the Felix console (as to avoid hacks, like specifying a 

huge resolution, to slow down the server). 

To ensure the right image is reloaded in real time when resizing the browser a couple of JS libraries 

are used, these can be found here: 

• /apps/geometrixx-media/components/adaptive-image/clientlibs/js/ 

which is used to test if a media query applies; 

• /apps/geometrixx-media/components/adaptive-image/clientlibs/js/ 

which mimics the Picture element proposed for the HTML5 spec. 

Figure 2. OSGi configuration panel for adaptive image component servlet. 



ClientLibs Explained By Example 

by Feike Visser 

▼

CommuniQAEM 


▲ 

In this article I will go through the basic functionality that the ClientLibraryFolder offers, and how 

you can utilize that with the tag. 

The clientlib functionality will manage all your Javascript and CSS resources in your application. It takes 

cares of dependency management, merging files and minifying content. 

The following application scenarios will be explained : 

• Multiple components with their own Javascript and CSS files. 

• Global Javascript and CSS files. 

• /apps folder is not available via the dispatcher. 

• CSS resources have to go in the , Javascript resources at the end of the page. 

• Resources need to be minified. 

• Some resources need to be merged. 

Step 1: Creating components and clientlib nodes 

To set up our example, create a clientlibsexplained application in CRXDE Lite and add the usual 

components and templates folder to your application structure. 

In your components folder you create a contentpage component. In your templates folder, you 

create a contentpage template that uses the contentpage component as its sling:resourceType. 

Next you create 3 additional components: MyFirstComponent, MySecondComponent and 

MyThirdComponent. E.g. something like: 

Figure 1. Initial component structure. 

Next we are going to add a clientlib node of type cq:ClientLibraryFolder, inside each of these 

node in order to store the Javascript and CSS resources 

▼ 



▲ 

Figure 2. Create Node dialog for clientlib. 

Add a property to every clientlib node called categories of type String[] with the single value of 

myproject.components. To get a String[] type click the Multi button. 

Your components-folder will look now like this: 

Figure 3. Propertes of clientlib node. 

Step 2: Adding Javascript and CSS files 

Now we will add some files to the clientlib folder of the component. As an example, for the first 

component: 

CSS (first.css): 

.firstContainer { 

margin-top:10px; 

} 

Javascript (first.js): 

/* 

* This is the comment of the function 

*/ 

function getNameFirst() { 

// return the name 

return "some value";} 

js.txt (refers to all the Javascript resources of the clientlib) 

first.js 

▼ 



▲ 

css.txt (refers to all the CSS resources of the clientlib) 

first.css 

Do the same for the second component, where names and values should be changed where appropriate. 

Your components folder will now look like this: 

Figure 4. Final component structure. 

The configuration of the components is now finished. 

Step 3: Using 

Now the components are finished we can now use to write out the 

references inside the of our contentpage component. You can also choose to write out certain 

references in other places in the page, for example some Javascript at the end of the page. 

We start with putting the following into the 

 

 

Note that myproject.components is the value of the categories properties of the clientlib node. 

▼ 



▲ 

This results in the following HTML output whenever we create a new page: 

 

 

 

 

 

 

 

 

 

This has a few downsides though: 

• The resources are retrieved from /apps. 

• Six server calls are to fetch the resources. 

• Application structure is exposed. 

Step 4: Redirect and Merge 

What we want is that the user gets the resources from /etc/designs/, so that /apps can 

be closed for the production configuration. And on top of that we want the resources to be merged into 

a single .js/.css reference. 

Create a new folder aproject in /etc/designs, then create the structure as shown below. The js.txt 

and css.txt should be empty files. 

The clientlib node has the following properties: 

Figure 5. client lib structure moved to design. 

▼ 



▲ 

Figure 6. Properties for client lib node (including embed property). 

With the embed property it embeds all the resources of myproject.components. 

Now change the attributes in the section to: 

 

 

This results now in the following HTML output: 

 

 

 

If you open these files you will see that the three Javascript/CSS resources are merged into one file. 

And although the resources are located in the /apps folder all references are now done via the /etc/ 

designs folder. 

Step 5: Dependencies 

Another property you can add to the clientlib node is dependencies; this way you can define 

dependencies between client libraries. 

Let’s add a dependency on cq.jquery: 

Figure 7. Adding dependencies property to clientlib node. 

When you now reload the page the dependency is created as part of your HTML: 

 

 

Step 6: Minify and GZip 

▼ 



▲ 

To deliver a better performance you can enable Minify and Gzip for the Day CQ HTML Library Manager 

in the Felix Configuration console. These settings are recommended for production installations. 

Figure 8. Configuring minify and gzip in HTML Library Manager.. 

When you now look at this resource /etc/designs/aproject/clientlib.js, it results in this: 

function getNameThird(){return "some value" 

}function getNameSecond(){return "some value" 

}function getNameFirst(){return "some value" 

}; 

So all comments and spacing are removed to save download-time. 



Sightly - Beautiful Markup 

by Şenol Taş 

▼

CommuniQAEM 


▲ 

Behind The Scenes 

The remainder of this article will explain a lot more on what exactly Sightly is, but as a reference it 

might be valuable to know this is just one of the initiatives where, within Adobe, we are pushing the 

boundaries while 'drinking our own champagne'. To give that a little bit more perspective, watch the 

first episode in my video podcasts (posted on Youtube), that talks about 'Adobe@Adobe - Behind The 

Scenes'. 

Play. 

Video 1: The Refactor - Behind The Scenes 

sight·ly /sītlē/ (adjective: pleasing to the eye...) 

Sightly is an HTML template library with a strong focus on security and programming language 

independence, setting a new standard for templating. The template functionality is added to the HTML 

by using data attributes, which keeps the markup valid, readable and maintainable. Used in Adobe 

Experience Manager, Sightly offers a highly productive enterprise-level web framework with a clear 

separation of concerns, allowing Web and Java developers to efficiently work together. 

Currently, Sightly is still work in progress and more a concept than anything else, but we just want you 

to have a first 'sight' on it... 

Goals 

The essential things Slightly (wants to) offer(s) out of the box are: 

• Security: through the library automatic contextual XSS 

▼ 



▲ 

protection and URL externalization is provided; 

• Less coding: enforcing separation of concerns between logic and markup; 

• Standards adoption: writing readable and valid HTML5 through data-attribute notations; 

• Extensibility: a straight forward API for logic; 

• Intuitive: a clear, simple and restricted future set. 

Vision 

The long term vision of what our engineers are aiming for with Sightly is: 

• Open Source Contribution: Github and Apache license; 

• Programming Language Independence: Javascript lexer with a 

plugin system for the output of a code generator; 

• Multi-tenant capability: supporting a 'thrust model' in order 

to offer a possibility to sandbox components; 

• Standards adoption: let Sightly grow beyond Adobe Experience Manager and Adobe; 

• Framework support: add capabilities like backend to frontend data binding, forms handling, etc. 

Architecture 

The high-level diagram below shows that Sightly can use the same Javascript front-end for compiling 

to different program languages. Only the code generator from the intermediate representation needs 

to be built specifically for the different environments. 

HTML Template Library 

In reality, Sightly is just the 'marketing' name for an HTML Template Library (HTL); an AEM templating 

engine and language implementation. HTL endeavours to supersede JSP as the scripting language for 

AEM components. It strives to clearly separate presentation and logic. Security measures, such as XSS 

prevention are automatically applied. HTL is purely based on HTML5, allowing 3rd party agencies to 

focus on design specifics of an AEM project without having to have deep AEM knowledge. 

HTL has two main concepts: Block Elements and Expression Language. 

HTL Block Elements 

An HTL block element is using the an HTML data like attribute; any tag containing the data-htlpluginName="value" 

will be identified as an HTL block element. 

some content 

▼ 



▲ 

For example one can use the data-htl-test attribute to test an expression and based on the outcome, 

show or not show content. In the examples below, the block of content is shown when the expression 

evaluates to TRUE. 

 

This Page is in Edit Mode 

 

This Page is NOT Edit Mode 

 

This page is not published or in preview mode 

 

Show the Title 

With the data-htl-list attribute one can iterate of any kind of collection (List, Map, Set, Enumeration) 

and display the child elements; again very easy. 

 

${item.name} 

 

HTL Expression Language 

In the previous examples you saw the ${ } syntax, both as the value of an data-htl-PLUGINNAME 

attribute expression as well as part of the resulting output. The field expressions in the HTL Expression 

Language are very powerful. They allow to: 

• easily read properties of ValueMaps, e.g. ${properties.title} for title property 

or even sling resource types, like ${properties.sling:resourceType}. 

• use the following common AEM variables by default: resource, request, 

response, properties, wcmmode, e.g. ${wcmmode.edit} 

• specify options, like defaults e.g. ${properties.title default="string value"} 

• 'and' and 'or' expressions, e.g. ${properties.title OR properties.name} 

Don't mess with my markup! 

Play the video below for a more in-depth information on Sightly.. 

▼ 



▲ 

Play. 

Video 2: Don't mess with my markup!

Sidekick Issue 0

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?