While we are updating this documentation, you should also look at the following blogposts:
Always use DOM ready event before executing your DOM manipulation.
There are two options:
defineto define a pattern that can be imported by other modules
A good example for a new pattern can be found here: https://github.com/collective/pat-fancytree (Work in progress)
It uses the new Base Pattern that was added to patternslib recently. The way how this example registers the Pattern assumes that require.js is available and used.
To make a pattern work without
require.js please use the way like it is proposed by the patterslib documentation: http://patternslib.com/creating-a-pattern/#main-content
There is also a Yeoman patternslib generator that can be found here: https://www.npmjs.com/package/generator-patternslib It produces a boilerplate for creating a new pattern
<records prefix="plone.resources/MY-PATTERN" interface='Products.CMFPlone.interfaces.IResourceRegistry'> <value key="js">++resource+MY-PATTERN-PATH/MY-PATTERN.js</value> </records>
Make sure that your pattern is available over the provided resource directory path
- Create bundle resource (only if “define” is used under 1)
Products.CMFPlone/Products/CMFPlone/static/plone.js for an example
- Add bundle resource (only if “define” is used under 1) (in registry.xml)
<records prefix="plone.resources/MY-BUNDLE-RESOURCE" interface='Products.CMFPlone.interfaces.IResourceRegistry'> <value key="js">++resource++MY-BUNDLE-RESOURCE-PATH/MY-BUNDLE-RESOURCE.js</value> <value key="css"> <element>++resource++MY-BUNDLE-RESOURCE-PATH/MY-BUNDLE-RESOURCE.less</element> </value> </records>
- Define bundle
<records prefix="plone.bundles/MY-BUNDLE" interface='Products.CMFPlone.interfaces.IBundleRegistry'> <value key="resources"> <element>MY-BUNDLE-RESOURCE</element> </value> <value key="enabled">True</value> <value key="jscompilation">++resource++MY-BUNDLE-PATH/MY-BUNDLE-compiled.min.js</value> <value key="csscompilation">++resource++MY-BUNDLE-PATH/MY-BUNDLE-compiled.min.css</value> <value key="depends">BUNDLE-DEPENDENCY</value> </records>
- Compile bundle
First you need to install your addon in a fresh plone site. Then execute
bin/plone-compile-resources --site-id=Plone --bundle=MY-BUNDLE
Open questions for addons developers:
- Do I need to create a bundle for every add on? I there a possibility to add a resource to an existing bundle? If yes, how is this done?
What is missing here?
How to add a patternslib pattern to plone bundle in Products.CMFPlone¶
- Add resource
<records prefix="plone.resources/patternslib-patterns-autofocus" interface='Products.CMFPlone.interfaces.IResourceRegistry'> <value key="js">++plone++static/components/patternslib/src/pat/autofocus/autofocus.js</value> </records>
- Add pattern to