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.

User Interface customization for AEM 6

17,787 views

Published on

http://dev.day.com/content/ddc/en/gems/user-interface-customization-for-aem-6.html

Published in: Software, Technology, Business
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2F90ZZC ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want a girl to "chase" you, then you have to use the right "bait". We discovered 4 specific things that FORCE a girl to chase after you and try to win YOU over. copy and visiting... ♥♥♥ http://t.cn/AijLRbnO
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ●●● https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ♥♥♥ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

User Interface customization for AEM 6

  1. 1. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 1 User Interface customization for AEM 6 CQ Gems May 7th, 2014 ! Gilles Knobloch Damien Antipa
  2. 2. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2 working on AEM/Granite/Coral and wherever Javascript is used 4 years of AEM experience working on AEM/Granite/Coral architect of the Sling Resource Merger Damien Antipa, Senior UX Engineer Gilles Knobloch, Engineering Manager @visiongeist @gilknob
  3. 3. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3 Introduction New UI: Mobile first, Desktop in mind
  4. 4. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4 Introduction - Granite UI introduced in 5.6.0 - Now spread across multiple UIs of the product - UI framework provides base components ! Challenges Extensible technology for partners/customers ! Goal of the session Understand how to extend admin screens and page authoring
  5. 5. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5 Extending the Administration pages - Extend existing admin screen - Create a custom admin screen - Sling Resource Merger - Includes
  6. 6. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6 Sling Resource Merger https://issues.apache.org/jira/browse/SLING-2986 ! - Custom resource provider - Overlays of resources using resource resolver search paths - Working as a diff - Custom Sling vocabulary ! Overall goal: override in /apps, never touch /libs - Guarantees upgradability - Easier for customers to debug
  7. 7. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7 Sling Resource Merger Add or override a property ! Create the corresponding property within /apps
 (the property will have priority based on Sling Resource Resolver configuration) ! Changing the type of the property is supported
  8. 8. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8 Sling Resource Merger Add or override a property
  9. 9. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9 Sling Resource Merger Delete one or more properties ! Create the corresponding node within /apps, Add sling:hideProperties property: list of properties to delete (String[]) ! * wildcard can be used to delete all the properties
  10. 10. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10 Sling Resource Merger Delete one or more properties
  11. 11. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11 Sling Resource Merger Delete a node (and its children) ! Create the corresponding node within /apps Set sling:hideResource to true (Boolean)
  12. 12. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12 Sling Resource Merger Delete a node (and its children)
  13. 13. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13 Sling Resource Merger Delete children of a node (but keep the properties of the node) ! Create the corresponding node within /apps, Add sling:hideChildren property: list of children to delete (String[]) ! * wildcard can be used to delete all the children
  14. 14. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14 Sling Resource Merger Delete children of a node
  15. 15. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15 Sling Resource Merger Reorder nodes ! Create the corresponding node within /apps Set sling:orderBefore to the name of the sibling where that node should be reordered before (String) ! TODO: support redefining the whole list of children
  16. 16. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16 Sling Resource Merger Reorder nodes
  17. 17. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17 Extend existing admin screen Sling Resource Merger is our friend! ! - Update root title for breadcrumb - Custom documentation links (sling:hideChildren, sling:orderBefore) - Additional toolbar action - Restrict Create Site to administrators (custom rendering condition) - Default layout to list view, removed toggle to card view (sling:hideResource)
  18. 18. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Create a custom admin screen 18 Launches Console - Custom console - Custom menu entry - Specific actions
  19. 19. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19 Create a custom admin screen Root space for Launches console Granite UI page resource Page definition Custom components (styles, scripts, JSPs)
  20. 20. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20 Create a custom admin screen Add in navigation Extend navigation Give same ID as your console and point to it Specify location in the tree
  21. 21. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21 Create a custom admin screen Custom action bar - Build your own components - Include the corresponding client libraries for custom actions
  22. 22. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22 Granite UI Includes granite/ui/components/foundation/include ! - Specify path to include Can be used to extend component dialogs
  23. 23. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23 The new Page Authoring 
 in AEM 6.0
  24. 24. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  25. 25. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25 Customer Page = ContentFrame Editing Features = EditorFrame
  26. 26. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26 Layer switcher Layer switcher
  27. 27. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27 These are Overlays
  28. 28. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28 Sidepanel AssetGroups
  29. 29. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29 Components
  30. 30. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30 Toolbar
  31. 31. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31 What is an Editable? - is an instance of a component on a page - allows access to the page’s DOM and its overlay - is aware of its JCR path and edit configuration - all Editable’s of the current page are accessible through Granite.author.store - Constructor: Granite.author.Editable - inherits from Granite.author.Inspectable
  32. 32. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32 What is a layer? - A layer is an independent bundle of functionality which can be activated in order to manipulate or interact with the page - What can I do with a layer? What ever you want. 
 (but please cleanup:-)
  33. 33. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. - Toolbar action - Inplace Editor - Custom Layer - Page action Extending the Page Authoring - Assetfinder Group
  34. 34. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34 Before we start… - Javascript Namespace: Granite.author - Overlays are managed by overlayManager - ClientLib category hook: cq.authoring.editor.hook - Current page’s Editables are in Granite.author.store - A lot of page data is in Granite.author.page
  35. 35. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35 Custom toolbar action
  36. 36. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Still working: Adding custom actions to components 36
  37. 37. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37 Still working: Adding custom actions to components
  38. 38. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38 New: Manipulating the toolbar with Javascript - understand eventing in the authoring channel - use global objects - toolbar entry definition - component independent actions
  39. 39. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39 'CUSTOM': {! icon: 'coral-Icon--gear',! text: Granite.I18n.get('Custom'),! handler: function (editable, param, target) {! alert('my custom action');! // do not close toolbar! return false;! },! condition: function (editable) {! // optional condition to show action! return !!editable.config.orderable;! },! render: function (dom) {! // custom rendering! return dom;! },! // could be executed when only one editable is selected! // default: false! isNonMulti: true ! }!
  40. 40. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40 Adding a screenshot functionality
  41. 41. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Custom page action 41 Add an action to page authoring toolbar Example: a button to translate the page
  42. 42. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42 Custom page action - define as a header action - cq-Translate-action used as jQuery selector new action added under /apps extension to cq.authoring.editor client library
  43. 43. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43 Inplace Editors
  44. 44. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 44 Create an Inplace Editor
  45. 45. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45 var MyEditor = function () {! ! };! ! MyEditor.prototype.setUp = function (editable) {! ! };! ! MyEditor.prototype.tearDown = function (editable) {! ! };! ! Granite.author.editor.register(‘myeditor', new MyEditor());!
  46. 46. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46 How we created the title editor - manipulate the Editable’s DOM
  47. 47. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47 Create a Hybrid Editor
  48. 48. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48 var textImageEditorConfig = {! editors: [! {! editorType: "text",! imageClass: "coral-Icon coral-Icon--text coral-Icon--sizeL"! },! {! editorType: "image",! imageClass: "coral-Icon coral-Icon--image coral-Icon--sizeL"! }! ]! };! ! Granite.author.editor.TextImageEditor = function () {! };! ! Granite.author.editor.TextImageEditor.prototype = ! new Granite.editor.HybridEditor(textImageEditorConfig);! ! // register the editor to the editor registry! Granite.author.editor.register('textimage', new Granite.editor.TextImageEditor());!
  49. 49. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49 Creating a layer - Important objects: layerManager, overlayManager, persistence - Build-in layers: Edit, Preview, Annotation, Developer, Target - Change the view and actions
  50. 50. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50 var MyLayer = function () {! // Call super constructor! this.constructor.prototype.constructor.call(this, "MyLayer", "coral-Icon--bug");! };! ! MyLayer.prototype = new author.Layer();! ! ! MyLayer.prototype.setUp = function () {! // allow user interaction with the iframe content (e.g., click on links)! author.ContentFrame.showFullScreenMask(false);! ! // Close the sidepanel! author.SidePanel.close();! };! ! MyLayer.prototype.tearDown = function () {! // prevent user interaction with the iframe content (e.g., click on links)! author.ContentFrame.showFullScreenMask(true);! };! ! // register at the manager! author.layerManager.registerLayer(new MyLayer());!
  51. 51. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 51
  52. 52. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. - Adding a new asset group 52 Assetfinder - Handling the Drag&Drop 
 Granite.author.dropController - Handling the Persistence
 Granite.author.edit.actions or
 Granite.author.persistence - Handling the rendering
 Granite.author.ui.assetFinder
  53. 53. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53 Resources Upcoming resources on Package Share - Sample packages - CRXDE Lite extension tool - Dialog conversion tool ! Extension points currently being documented
  54. 54. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 54 Questions & Comments?

×