Building Creative Product Extensions with Experience Manager

© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Building Creative Product Extensions with Experience Manager Justin Edelson | AEM Evangelist | @justinedelson

#Connect2015

© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Agenda• Common Extensibility Platform

• Getting Started

• Anatomy of a CEP Extension

• Connecting CEP Extensions to AEM

2


Extending Desktop Apps


• Sandbox – a crashing extension will not affect the native application

• Much faster to develop and run

• Well known, widely supported, industry standard

• Easy to integrate web services

• Rapidly build user interfaces

• Wealth of existing frameworks and tools to support development

Benefits of HTML5


Adobe apps supporting HTML5 extensions

Compatible Products


Getting Started• Enable PlayerDebugMode

• OSX: ~/Library/Preferences/com.adobe.CSXS.<version>.plist• Windows: HKEY_CURRENT_USER/Software/Adobe/CSXS.<version>

• (OS X) kill cfprefsd (or just Restart)

6


Anatomy of a CEP Extension

7

Regular CSS

Regular JavaScript

Regular HTML

Special Sauce


Manifest• Provides Extension ID & Name

• Declares Compatible Applications & Versions

• Points to Starting HTML

• Defines UI

8


The .debug File Allows you to remote debug your extension via a Browser

<?xml version="1.0" encoding="UTF-8"?>

<ExtensionList>

<Extension Id="com.example.helloworld.extension">

<HostList>

<Host Name="PHXS" Port="9090"/>

</HostList>

</Extension>

</ExtensionList>

9


Using Node Modules in CEP

• The Easy Way:• $ cd MY_EXTENSION_DIR• $ npm install MODULE_NAME

• The Cleaner Way• Create a package.json file• Run npm install

10


Using Node Modules in CEP

• Then…• Use require() in your JavaScript

var opener = require('opener');

• Or in Angular:

app.factory('opener', function() {

return require('opener');

});

11


Sidebar – AEM Assets Companion

• Introduced with AEM 6.1

• WebDAV Helper Application

• Registers special URL Handler• aem-asset:/geometrixx/banners/airport.jpg

• Reveal (Open Containing Folder)

• aem-asset:/geometrixx/banners/airport.jpg?action=open• Opens File in Default Editor

$ open aem-asset:/geometrixx/banners/airport.jpg?action=open

12


Logging into AEM from CEP

Option 1: Host the entire UI in AEM

Pros: Supports any authentication scheme used by AEM. Cons: Not the best development experience

Option 2: Use XHR from CEP Extension

Pros: Simple. Cons: Requires allowing blank referrers. Only supports username/password.

Option 3: Use node http client

Pros: Simple Cons: Only supports username/password. Requests don’t appear in Debugger.

13


Logging into AEM from CEP

login: function(username, password, url, success, error) {

$localStorage.baseUrl = url;

request.post({

url : url + "/j_security_check",

form: {

j_username : username,

j_password : password,

j_validate : true

}

}, function(err, response, body) {

if (response.statusCode === 200) {

$localStorage.tokenCookie = response.headers['set-cookie'][0].split(' ')[0];

success();

} else {

error();

}

});

}

14


Querying AEM from CEP

search: function(term, callback) {

request.post({

url : $localStorage.baseUrl + "/bin/querybuilder.json",

form : _.extend({

'fulltext' : term

}, searchDefaults),

headers : {

'Cookie' : $localStorage.tokenCookie

}

}, function(err, response, body) {

var results = JSON.parse(response.body);

callback(results.hits);

})

}

15


Referencing Resources

getTokenizedUrl : function(path) {

return $localStorage.baseUrl + path + "?j_login_token=" +

$localStorage.tokenCookie.split('=')[1].slice(0, -1);

}

16


Demo #1

17


Interacting with the Host

CSInterface.js Information about the host application & environment Event Handling

CEPEngine_extensions.js Extension Control Functions File handling

Vulcan.js Launch CC Applications

All available from https://github.com/Adobe-CEP

18

https://github.com/Adobe-CEP

https://github.com/Adobe-CEP


Demo #2

19


Demo Code Link

https://github.com/justinedelson/cep-aem-search-extension

20


Engineering

Building Creative Product Extensions with Experience Manager