Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Creative Product Extensions with Experience Manager

Presentation “Building Creative Product Extensions with Experience Manager“ by Jakub Kaniewski at CONNECT Web Experience in Basel on June 24/25, 2015.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

Building Creative Product Extensions with Experience Manager

  1. 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. 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. 3. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Extending Desktop Apps
  4. 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. 5. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Adobe apps supporting HTML5 extensions Compatible Products
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Demo #1 17
  18. 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. 19. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Demo #2 19
  20. 20. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Demo Code Link https://github.com/justinedelson/cep-aem-search-extension 20
  21. 21. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

×