© 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
© 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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe apps supporting HTML5
extensions
Compatible Products
© 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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Anatomy of a CEP
Extension
7
Regular CSS
Regular
JavaScript
Regular HTML
Special Sauce
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Querying AEM from CEPsearch: 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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Referencing ResourcesgetTokenizedUrl : function(path) {
return $localStorage.baseUrl + path + "?j_login_token=" +
$localStorage.tokenCookie.split('=')[1].slice(0, -1);
}
16
© 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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Demo Code Link
https://github.com/justinedelson/cep-aem-search-extension
20
Top Related