Exercise 6: Simple Pattern¶
Advertencia
This exercise requires a working buildout using a fork of the collective.jstraining package.
In this exercise, we’ll be walking through creating a simple Plone pattern.
We will be working in the exercise6
directory of the collective.jstraining package.
Add your pattern file¶
First off, in your exercise6/static
directory, add a file named pattern.js
. Use
this file to build your pattern. This example will stay very simple we’ll use
jQuery to do a simply modify the content of an element:
define([
'jquery',
'mockup-patterns-base',
], function($, Base) {
'use strict';
var Pattern = Base.extend({
name: 'exercise6',
trigger: '.pat-exercise6',
parser: 'mockup',
defaults: {
},
init: function() {
var that = this;
that.$el.append(' <span>Exercise 6 was here</span>');
}
});
return Pattern;
});
For more details on how to write a mockup pattern, utilize the various resources available.
In our example, we’re using the RequireJS define
function to define our pattern
as a JavaScript module.
Integrating with LESS¶
Add a pattern.less
file to the exercise6/static
directory and provide
whatever styles you’d like for your pattern:
.pat-exercise6 {
color: red;
}
Creating your bundle¶
To register the pattern, we’ll create a bundle. Recall the difference between
using require
and define
from the RequireJS docs.
Our bundle will use the require
function to include the JavaScript module
pattern we created our previously.
Create a bundle.js
file in your exercise6/static
directory:
require([
'exercise6'
], function() {
'use strict';
});
The only thing we’re doing in this file is including the exercise6
module
we defined earlier–that’s it. Bundles can do more as well. Then can include
initialization code for example. See Plone’s default bundle.
Bundles more or less tell the compiler what we care about loading. They do the dependency resolution and include the modules that were required with them.
Register static resource directory¶
Next, let’s register the static directory we just placed our script into. To
register, you need to add ZCML registration for the static directory your script
is in. Add this to the exercise6/configure.zcml
file:
<plone:static
directory="static"
type="plone"
name="exercise6"
/>
Register your bundle¶
Registering your bundle is done by adding Generic Setup xml configuration to the
Plone registry. This is done in the registry.xml
file in the profiles/default
directory.
Resource¶
Resource is done exactly the same as in Exercise 1:
<records prefix="plone.resources/exercise6"
interface='Products.CMFPlone.interfaces.IResourceRegistry'>
<value key="js">++plone++exercise6/pattern.js</value>
</records>
Bundle resource¶
The bundle resource is just another resource registration like any other. Remember, the only
difference here is in the content of the JavaScript file. One file uses require
,
the other uses define
. Addditionally, we include our CSS/LESS dependencies here:
<records prefix="plone.resources/bundle-exercise6"
interface='Products.CMFPlone.interfaces.IResourceRegistry'>
<value key="js">++plone++exercise6/bundle.js</value>
<value key="css">
<element>++plone++exercise6/pattern.less</element>
</value>
</records>
Bundle¶
Finally, let’s create our bundle registration:
<records prefix="plone.bundles/exercise6"
interface='Products.CMFPlone.interfaces.IBundleRegistry'>
<value key="resources">
<!-- reference to bundle resource definition -->
<element>bundle-exercise6</element>
</value>
<value key="merge_with">default</value>
<value key="enabled">True</value>
<value key="jscompilation">++plone++exercise6/exercise6-compiled.min.js</value>
<value key="csscompilation">++plone++exercise6/exercise6-compiled.css</value>
<value key="last_compilation">2016-10-04 00:00:00</value>
<!-- so we don't include these modules multiple times -->
<value key="stub_js_modules">
<element>jquery</element>
<element>mockup-patterns-base</element>
</value>
</records>
Installation¶
- Start up your Plone instance
- Install the
Exercise 6
add-on
Running¶
At this point, we have no compiled version of the code that we’re running with so our code doesn’t do anything.
- Go into
Site Setup
->Resource Registries
- Check “Development Mode”
- Select to develop JavaScript and CSS for the
exercise6
bundle - Click save
This should load your JavaScript and LESS files now; however, we don’t have
any elements with the pat-exercise6
class assigned to them.
It’s up to you how to apply the pattern class to an element of your choice. A couple options available to you are:
- use TinyMCE source view and add
class="pat-exercise6"
onto anyp
tag - customize the theme on your site and add it to an element in your theme file or use a diazo rule diazo rule to dynamically add the class to an element
Production¶
To build our bundle, we’ll utilize the plone-compile-resources
script that
Plone ships with.
Advertencia
If you’re not running a ZEO setup, you’ll need to shut down your Plone instance since the ZODB in this mode does not allow multiple processes to access it at the same time.
An example command will look like this:
./bin/plone-compile-resources --site-id=Plone --bundle=exercise6
Once this command finishes, your bundle is built and will be deployed with your package package.