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.

You 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 us 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 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.