Exercise 2: Include JavaScript In Browser View#

Warning

This exercise requires a working buildout using a fork of the collective.jstraining package.

For this exercise, we are simply including JavaScript in a browser view.

You will be working in the exercise2 directory of the collective.jstraining package.

Add Your JavaScript File#

In your exercise2/static directory, add a file named script.js.

This exercise is open ended as to what you do with JavaScript on the page.

We will stay very simple for the sake of brevity, using jQuery to do an animation effect on the title of the page:

require([
  'jquery'
], function($){

  var cycle = function(){
    $('h1').animate({
      left: '250px',
      opacity: '0.5',
      'font-size': '30px'
    }, function(){
      $('h1').animate({
        left: '0',
        opacity: '1',
        'font-size': '20px'
      }, function(){
        setTimeout(function(){
          cycle();
        }, 2000);
      });
    });
  };

  $(document).ready(function(){
    cycle();
  });
});

Feel free to customize the script to do whatever you like.

Register Static Resource Directory#

Next, let us register the static directory we just placed our script into.

To register it, you need to add ZCML registration for the static directory your script is in.

Add this to the exercise2/configure.zcml file

<plone:static
    directory="static"
    type="plone"
    name="exercise2"
    />

Register JavaScript Resource#

Let us register our script as a JavaScript resource with Plone.

In the exercise2/profiles/default/registry.xml file, add configuration to register your script:

<records prefix="plone.resources/exercise2"
         interface='Products.CMFPlone.interfaces.IResourceRegistry'>
    <value key="js">++plone++exercise2/script.js</value>
</records>

Create Your Browser View#

Warning

This might be redundant with other documentation.

Skip ahead if you know how to create browser views.

Let us load our JavaScript file to only load on a specific page you need it on.

In our case, let us add a basic new page view.

The page template does not need to implement any logic and we can use the main template to bring in the content of the page we are using in the JavaScript(h1).

Add this into your exercise2/page.pt file:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
    xmlns:tal="http://xml.zope.org/namespaces/tal"
    xmlns:metal="http://xml.zope.org/namespaces/metal"
    xmlns:i18n="http://xml.zope.org/namespaces/i18n"
    lang="en"
    metal:use-macro="context/main_template/macros/master"
    i18n:domain="plone">
<body>

</body>
</html>

Load Your JavaScript Resource#

Add in view Python code to tell Plone to render the script in the exercise2/browser.py file:

from Products.CMFPlone.resources import add_resource_on_request
from Products.Five import BrowserView


class Exercise2View(BrowserView):

    def __call__(self):
        # utility function to add resource to rendered page
        add_resource_on_request(self.request, 'exercise2')
        return super(Exercise2View, self).__call__()

The most interesting part here is to look at add_resource_on_request.

Wire it up with ZCML registration in the exercise2/configure.zcml file:

<browser:page
     name="exercise2"
     for="*"
     class=".browser.Exercise2View"
     template="page.pt"
     permission="zope2.View"
     />

Installation#

  1. Start up your Plone instance

  2. Install the Exercise 2 add-on

Then, visit the URL: http://localhost:8080/Plone/front-page/@@exercise2.

This is assuming your Plone is located at the URL http://localhost:8080/Plone.

Production#

In this exercise, there is no special distinction between development and production builds.

The JavaScript is developed without any build process.