The document discusses building extensions for Creative Cloud applications using the Common Extensions Platform (CEP). It covers the basics of CEP extension development including anatomy, manifest files, debugging, and using Node.js modules. It also provides examples of connecting CEP extensions to Adobe Experience Manager (AEM), including logging in via HTTP, querying AEM via the Query Builder API, and referencing AEM resources through tokenized URLs. The document demonstrates two sample CEP extensions - one for searching AEM and another for interacting between the extension and host application.

1. © 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

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

3. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Extending Desktop Apps

4. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
• 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

5. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe apps supporting HTML5
extensions
Compatible Products

6. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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

7. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Anatomy of a CEP
Extension
7
Regular CSS
Regular
JavaScript
Regular HTML
Special Sauce

8. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Manifest
• Provides Extension ID & Name
• Declares Compatible Applications & Versions
• Points to Starting HTML
• Defines UI
8

9. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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

10. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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

11. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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

12. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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

13. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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

14. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Logging into AEM from
CEPlogin: 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

15. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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

16. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Referencing Resources
getTokenizedUrl : function(path) {
return $localStorage.baseUrl + path + "?j_login_token=" +
$localStorage.tokenCookie.split('=')[1].slice(0, -1);
}
16

17. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Demo #1
17

18. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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

19. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Demo #2
19

20. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Demo Code Link
https://github.com/justinedelson/cep-aem-search-extension
20

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