Document 6604956

Customizing Page Authoring (Touch-Optimized UI)
Customizing Page Authoring (TouchOptimized UI)
Overview / Adobe Experience Manager / Adobe Experience Manager 6.0 / Developing / Extending AEM Features /
AEM provides various mechanisms to enable you to customize the page authoring functionality (and the
consoles) of your authoring instance (touch-optimized UI).
• Clientlibs
Clientlibs allow you to extend the default implementation to realise new functionality, while reusing the
standard functions, objects and methods. When customizing, you can create your own clientlib under /
apps; the new clientlib must:
• depend on the authoring clientlib: cq.author.editor:
/libs/cq/gui/components/authoring/clientlibs/editor
• be part of the appropriate cq.authoring.editor.hook category;
for example, cq.authoring.editor.hook.foo where foo is the name of your module
• Overlays
Overlays are based on node definitions and allow you to overlay the standard functionality (in /libs) with
your own customized functionality (in /apps). When creating an overlay a 1:1 copy of the original is not
required, as the sling resource merger allows for inheritance.
NOTE
•
•
•
•
•
Javascript Namespace: Granite.author
ClientLib category hook: cq.authoring.editor.hook
Overlays are managed by: overlayManager
The Editables for the current page are in: Granite.author.store
A lot of page data is in: Granite.author.page
These can be used in many ways to extend the page authoring functionality in your AEM instance. A
selection are covered below (at a high level).
NOTE
For further information see:
• Using and creating clientlibs.
• Using and creating overlays.
• Granite
• Structure of the AEM Touch-Optimized UI for details of the structural areas used for page
authoring.
CAUTION
You must not change anything in the /libs path.
This is because the content of /libs is overwritten the next time you upgrade your instance (and
may well be overwritten when you apply either a hotfix or feature pack).
The recommended method for configuration and other changes is:
1. Recreate the required item (i.e. as it exists in /libs) under /apps
2. Make any changes within /apps
ADD NEW LAYER (MODE)
When you are editing a page, there are various modes available. These modes are implemented using
layers. These allow access to differing types of functionality for the same page content; the standard layers
are: edit, preview, annotate, developer, targeting.
Standard Layers
In a standard AEM installation:
1.
/libs/cq/gui/components/authoring/clientlibs/editor/js/layers/Layer.js
This holds the base definition, all other layers inherit from this.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 1
Created on 2014-11-10
Customizing Page Authoring (Touch-Optimized UI)
2.
/libs/cq/gui/components/authoring/clientlibs/editor/js/edit
This is the definition for the edit layer. This the default layer. Your new layer should inherit from this.
This folder contains the definitions for:
• edit.js - edit definitions
• edit.Layer.js - layer definitions
• edit.actions.js - actions
• edit.Overlay.js - layer overlay - defines the behavior/look-and-feel for the layer
and therefore how you interact with the content
• edit.Toolbar.js - toolbar
Creating a New Layer
To create a new layer definition (within your clientlib) you have to:
1.
Implement:
• setUp
• tearDown
CAUTION
A layer must return the editor to the state it was before the layer was activated.
It is very important that a layer must be responsible for cleaning what it introduced. This
is done in the tearDown function.
2.
3.
Register the layer (includes the constructor):
• layerManager.registerLayer
With the constructor you need to specify:
• name
• icon (iconClass)
• overlay (overlayConstructor)
• toolbar (toolbarConstructor)
Code Sample
aem-authoring-extension-layer-msm is a sample package showing how to create a new layer in page
authoring. The example is using MSM data and highlights it in the layer. To try it you may use Geometrixx
Outdoors or any other LiveCopy page.
ADD NEW SELECTION CATEGORY TO ASSET BROWSER
The asset browser shows assets of various types/categories (e.g. image, documents, etc). The assets can
also be filtered by these asset categories.
Standard Categories in the Asset Finder
In a standard AEM installation:
1.
/libs/cq/gui/components/authoring/clientlibs/assetfinder
Holds definitions related to the asset finder.
2.
/libs/cq/gui/components/authoring/clientlibs/assetfinder/js
Holds definitions for the asset categories collated and shown in the asset finder. The following are
available in a standard installation:
• document
• image
• video
Creating a New Asset Category
To create a new asset category to the asset finder (within your clientlib) you have to:
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 2
Created on 2014-11-10
Customizing Page Authoring (Touch-Optimized UI)
1.
2.
Define the asset category:
• loadAssets searches for appropriate assets based on mimeType (asset type)
Define the handling required for actions such as drag/drop, copy/paste, etc.
Code Sample
aem-authoring-extension-assetfinder-flickr is a sample package showing how to add a new group to the
asset finder. This example connects to Flickr's public stream and shows them in the sidepanel.
ADD NEW ACTION TO A COMPONENT TOOLBAR
Each component (usually) has a toolbar that provides access to a range of actions that can be taken on that
component.
Standard Actions in a Component Toolbar
In a standard AEM installation:
1.
An action is registered with the call to:
• editableToolbar.registerAction
For example, as in:
/libs/wcm/msm/content/touch-ui/authoring/editor/js/msmEditorHook.js
Creating a New Action
To create a new action:
1.
You need to define the characteristics of the new button that will appear in the component's toolbar:
• icon
• text
• condition (e.g. for toggled buttons)
• handler
Code Sample
aem-authoring-extension-toolbar-screenshot is a sample package showing how to create a custom toolbar
action to render components.
ADD NEW INPLACE EDITOR
Standard Inplace Editor
In a standard AEM installation:
1.
2.
/libs/cq/gui/components/authoring/clientlibs/editor/js/editors
Holds definitions of the various editors available.
There is a connection between the editor and each resource type (as in component) that can use it:
• cq:inplaceEditing
for example, /libs/foundation/components/text/cq:editConfig
• property: editorType
Defines the type of inline editor that will be used when the inplace editing is triggered for that
component; e.g. text, textimage, image, title.
Creating a New Inplace Editor
To implement a new inplace editor (within your clientlib):
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 3
Created on 2014-11-10
Customizing Page Authoring (Touch-Optimized UI)
NOTE
For example, see:
/libs/cq/gui/components/authoring/clientlibs/editor/js/editors/editorExample.js
1.
2.
3.
Implement:
• setUp
• tearDown
Register the editor (includes the constructor):
• editor.register
Provide the connection between the editor and every resource type (as in component) that can use it.
ADD A NEW PAGE ACTION
To add a new page action to the page toolbar, for example a Back to Sites (console) action:
1.
To achieve this you need:
• extend the cq.authoring.editor.hook clientlib to define the functionality:
/apps/wcm/core/components/backtosites/clientlibs
• a header action as the means for the user to access that functionality:
/apps/wcm/core/content/editor/jcr:content/content/items/content/header/items/headerbar/items/
backToSites
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 4
Created on 2014-11-10
Customizing Page Authoring (Touch-Optimized UI)
Code Sample
aem-authoring-extension-header-backtosites is a sample package showing how to create a custom header
bar action to jump back to the Sites console.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 5
Created on 2014-11-10