Exercise 1: Include a JavaScript resource TTW

Warning

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

For this exercise, we are going to include a Javascript using the resource registry through the web

We will be working in the exercise1 directory of the collective.jstraining package.

Create your browser view

Warning

This might be redundant with other documentation. Skip ahead if you know how to create browser views.

Let’s add a basic new page view. This is only needed for calling our Javascript file. Add this into your exercise1/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>

And wire it up with ZCML registration in the exercise1/configure.zcml file

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

Add your JavaScript file

Go to the Site Setup, then to the Resource Registries.

Under the Overrides tab, click Add file

When it asks to give it a name, enter ++plone++static/exercise1.js

Inside the new editor that comes up, enter the following

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();
  });
});

Click Save

You can verify that the resource works by going to http://localhost:8080/Plone/++plone++static/exercise1.js

Use the Javascript in your template

Now, you just need to edit your exercise1/page.pt file, so it would look like this

<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">

<metal:block fill-slot="javascript_head_slot">
    <script type="text/javascript" src="//localhost:8080/Plone/++plone++static/exercise1.js"></script>
</metal:block>

<body>

</body>
</html>

Installation

  1. Start up your Plone instance

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

This is assuming your Plone is 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.