ui customization in aem 6.0

Download UI Customization in AEM 6.0

Post on 07-Jul-2015

746 views

Category:

Software

7 download

Embed Size (px)

DESCRIPTION

Get how to customize AEM 6 Touch-optimized UI. Showed at Evolve'14 conference in San Diego.

TRANSCRIPT

  • 1. USER INTERFACE CUSTOMI ZAT ION FOR AEM 6P R E S E N T E D B YDamien AntipaGilles Knobloch 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 1November 18th, 2014

2. Gilles Knobloch, Engineering Manager4 years of AEM experienceWorking on AEM/Granite/CoralArchitect of the Launches & Sling Resource Merger@gilknobDamien Antipa, Senior UX EngineerWorking on AEM/Granite/Coral andwherever Javascript is used@visiongeist 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2 3. IntroductionNew user experience introduced in 5.6.0Challenges- Extensible technology for partners/customers- Guarantee upgradabilityGoal of the sessionUnderstand how to extend admin screens and page authoring 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3 4. ExtendAdmin screensCreateAdmin screens 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4PageAuthoring 5. Fundamental Concepts 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5- UI based on content nodes- Sling Resource Merger- Granite UI Include 6. How were you used to overlay? 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential./libs/wcm/core/content/siteadmin6/new-feature/custom-feature- All properties duplicated- Blocking for upgrades/apps/wcm/core/content/siteadmin- Currently, need to copythe whole subtree 7. How does it work now? 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential./libs/wcm/core/content/sites/apps/wcm/core/content/sites7/new-feature/custom-feature(/new-feature)- Extend within analmost empty sub-tree- Only needednodes/properties need tobe overlaid 8. Sling Resource Merger- Custom resource provider: /mnt/overlay- Overlays of resources using resource resolver search paths- Working as a diff- Custom Sling vocabularyOverall goal: override in /apps, never touch /libs- Guarantees upgradability- Easier debugging 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8 9. Sling Resource MergerAdd or override a propertyCreate the corresponding node structure and property within /apps(the property will have priority based on Sling Resource Resolver configuration)Changing the type of the property is supported 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9 10. Sling Resource MergerHide one or more propertiesCreate the corresponding node structure and property within /apps,Add sling:hideProperties property: list of properties to hide (String[])* wildcard can be used to hide all properties 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10 11. Sling Resource MergerHide a resource (and its children)Create the corresponding node structure within /appsSet sling:hideResource to true (Boolean) 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11 12. Sling Resource MergerHide children of a resource (but keep the properties of the resource)Create the corresponding node structure within /apps,Add sling:hideChildren property: list of children to hide (String[])* wildcard can be used to hide all children 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12 13. Sling Resource MergerReorder resourcesCreate the corresponding node within /appsSet sling:orderBefore to the name of the sibling wherethat node should be reordered before (String) 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13 14. Extend existing admin screenCheck our examples!- Custom documentation links(sling:hideChildren, sling:orderBefore)- Additional toolbar action- Restrict Create Site to administrators(sling:hideProperties, custom rendering condition)- Default layout to list view, removed toggle to card view(sling:hideResource) 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15. Create a custom admin screenLaunches Console- Custom console- Custom menu entry- Specific actions 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16. Create a custom admin screenRoot spacefor LaunchesconsoleCustom components (styles, scripts, JSPs)Page definition Granite UI page resource 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16 17. Create a custom admin screenAdd innavigation Give same ID as your console and pointExtend navigation 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17to itSpecify location in the tree 18. Granite UI Includesgranite/ui/components/foundation/includeAvoid duplicatingsame subtrees ofnodesSpecify path toinclude/apps/one /apps/two/apps/commonCan be used to extend component dialogs 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18 19. Page Authoring in AEM 6.0 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19 20. Customer Page = ContentFrameEditing Features = EditorFrame 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20 21. :AssetGroups 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.21Sidepanel 22. Components 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22 23. 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23These are Editables 24. What is an Editable?- is an instance of a component on a page- the JCR node lives under the pages jcr:content- represented through a Javascript object- allows access to the pages HTML- is aware of its JCR path and edit configuration 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24 25. An Editable in Javascript- It is a central object for manipulation and retrieval- Exposes the configuration of the component- Allows to add listeners (afterEdit, beforeDelete, beforeMove etc).- Constructor: Granite.author.Editable- All Editables of the current page are accessiblethrough Granite.author.store 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25 26. 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26These are Overlays 27. Toolbar 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27 28. 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28 29. 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29 30. Inplace Editing 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30 31. 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31Layer 32. What is a layer?- Defines a state of the Authoring User Interface- Bundles View/Rendering and Functionality- Only 1 Layer is active- Have to play nicely with each other- Full control about the whole experience- Build-in layers: Edit, Preview, Annotate, Developer,Target 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32 33. Layer Switcher 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33 34. Extending the Page Authoring 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.- Toolbar action- Page action- Inplace Editor- Custom Layer- Assetfinder Group- Dialog Conversion 35. Before we start- ClientLib category hook: cq.authoring.editor.hook- Javascript Namespace: Granite.author- Overlays are managed by Granite.author.overlayManager- Current pages Editables are in Granite.author.store- A lot of page data is in Granite.author.page 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35 36. 1 Custom toolbar action 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36 37. Still working: Adding custom actions to components 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.371 38. 1 Add Toolbar Button- Javascript implementation- component independent actions- toolbar entry definition 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38 39. 'CUSTOM': {icon: 'coral-Icon--gear',text: Granite.I18n.get('Custom'),handler: function (editable, param, target) {alert('my custom action');// do not close toolbarreturn false;},condition: function (editable) {// optional condition to show actionreturn !!editable.config.orderable;}}1 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39 40. 1 EXAMPLE: Adding a screenshot functionality 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40 41. Custom page action 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.412 42. 2/apps/wcm/core/content/editor/jcr:content/content/items/content/header/items/headerbar/items/myCustomButton 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42 43. 3 Inplace Editors 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43 44. 3 Create a Hybrid Editor 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46 45. var textImageEditorConfig = {editors: [{editorType: "text",imageClass: "coral-Icon coral-Icon--text"},{editorType: "image",imageClass: "coral-Icon coral-Icon--image"}]};textImageEditor =new Granite.editor.HybridEditor(textImageEditorConfig);// register the editor to the editor registryGranite.author.editor.register('textimage', textImageEditor);3 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47 46. Creating a layer- Inherit from Build-in layers like Edit- Important objects: layerManager, overlayManager,persistence- Change the view and actions4 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48 47. 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50 48. Assetfinder- Adding a new asset group- Handling the renderingGranite.author.ui.assetFinder 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.51- Handling the Drag&DropGranite.author.dropController- Handling the Persistence