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.authoring.editor.sites.page
- be part of the appropriate cq.authoring.editor.sites.page.hook category
- 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.
참고:
For further information see the JS documentation set.
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).
참고:
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.
This topic is also covered in the AEM Gems session - User interface customization for AEM 6.0.
경고:
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:
- Recreate the required item (i.e. as it exists in /libs) under /apps
- Make any changes within /apps
A standard AEM instance provides the MSM layer; this accesses MSM data and highlights it in the layer.
To see it in action you may use Geometrixx Outdoors (or any other live copy page) and select the Live Copy Status layer.
You can find the MSM layer definition (for reference) in:
/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js
The asset browser shows assets of various types/categories (e.g. image, documents, etc). The assets can also be filtered by these asset categories.
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.
Code on GitHub
You can find the code of this page on GitHub
- Open aem-authoring-extension-assetfinder-flickr project on GitHub
- Download the project as a ZIP file
Each component (usually) has a toolbar that provides access to a range of actions that can be taken on that component.
aem-authoring-extension-toolbar-screenshot is a sample package showing how to create a custom toolbar action to render components.
Code on GitHub
You can find the code of this page on GitHub
- Open aem-authoring-extension-toolbar-screenshot project on GitHub
- Download the project as a ZIP file
-
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
- /libs/foundation/components/image/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.
- property: editorType
- cq:inplaceEditing
-
Additional configuration details of the editor can be configured using a config node containing configurations as well as a further plugin node to contain necessary plugin configuraiton details.
The following is an example of defining aspect ratios for the image cropping plugin of the image component. Note that because of the potential of very limited screen size, the crop apect ratios were moved to full screen editor and can only be seen there.
<cq:inplaceEditing jcr:primaryType="cq:InplaceEditingConfig" active="{Boolean}true" editorType="image"> <config jcr:primaryType="nt:unstructured"> <plugins jcr:primaryType="nt:unstructured"> <crop jcr:primaryType="nt:unstructured"> <aspectRatios jcr:primaryType="nt:unstructured"> <_x0031_6-10 jcr:primaryType="nt:unstructured" name="16 : 10" ratio="0.625"/> </aspectRatios> </crop> </plugins> </config> </cq:inplaceEditing>경고:
Note that in AEM crop ratios, as set by the ratio property, are defined as height/width. This differs from the conventional definition of width/height and is done for legacy compatability reasons. The authoring users will not be aware of any difference provided you define the name property clearly since this is what is displayed in the UI.
참고:
For example, see:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
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.
Code on GitHub
You can find the code of this page on GitHub
- Open aem-authoring-extension-header-backtosites project on GitHub
- Download the project as a ZIP file
When authoring pages, the user must often select from resources (e.g. pages, components, assets, etc.). This can take the form of a list for example from which the author must choose an item.
In order to keep the list to a reasonable size and also relevant to the use case, a filter can be implemented in the form of a custom predicate. For example, if the pathbrowser Granite component is used to allow the user to select the path to a particular resource, the paths presented can be filtered in the following way:
- Implement the custom predicate by implementing com.day.cq.commons.predicate.AbstractNodePredicate interface.
- Specify a name for the predicate, and refer that name when using the pathbrowser.
For further detail on creating a custom predicate, see this article.
참고:
Implementing a custom predicate by implementing com.day.cq.commons.predicate.AbstractNodePredicate interface works in both classic and touch UIs.
See this knowledge base article for an example of implementing a custom predicate in the classic UI.
Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.