Weitere ähnliche Inhalte
Ähnlich wie User Interface customization for AEM 6 (20)
Kürzlich hochgeladen (20)
User Interface customization for AEM 6
- 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. © 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
Introduction
New UI: Mobile first, Desktop in mind
- 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. © 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. © 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. © 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
Sling Resource Merger
Add or override a property
- 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
Sling Resource Merger
Delete one or more properties
- 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
Sling Resource Merger
Delete a node (and its children)
- 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
Sling Resource Merger
Delete children of a node
- 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
Sling Resource Merger
Reorder nodes
- 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. © 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. © 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. © 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. © 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. © 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23
The new Page Authoring
in AEM 6.0
- 24. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
- 25. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25
Customer Page = ContentFrame
Editing Features = EditorFrame
- 26. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
Layer switcher
Layer switcher
- 27. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
These are Overlays
- 28. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
Sidepanel
AssetGroups
- 29. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
Components
- 30. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
Toolbar
- 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. © 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- Toolbar action
- Inplace Editor
- Custom Layer
- Page action
Extending the Page Authoring
- Assetfinder Group
- 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35
Custom toolbar action
- 36. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Still working: Adding custom actions to components
36
- 37. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
Still working: Adding custom actions to components
- 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. © 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
Adding a screenshot functionality
- 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. © 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
Inplace Editors
- 44. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 44
Create an Inplace Editor
- 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46
How we created the title editor
- manipulate the Editable’s DOM
- 47. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
Create a Hybrid Editor
- 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. © 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. © 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 51
- 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. © 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. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 54
Questions & Comments?