Exercise 6: Using A Pattern In A Z3C Form Widget

Warning

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

This exercise will go through adding a widget that checks the minimum size of an image before it is uploaded.

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

Add Your JavaScript File

First off, in your exercise6/static directory, add a file named script.js.

Use this file to do anything you would like to the page

/* global require, FileReader, Image */

require([
  'jquery',
  'pat-base',
], function($, Base) {
  'use strict';

  Base.extend({
    name: 'exercise6',
    trigger: '.pat-exercise6',
    parser: 'mockup',
    defaults: {
      minHeight: 200,
      minWidth: 200
    },
    init: function() {
      var that = this;

      that.$el.on('change', function(){
        if(this.files.length === 0){
          return;
        }

        var fr = new FileReader();
        fr.onload = function() {
          var img = new Image();
          img.onload = function() {
            if(img.width < that.options.minWidth ||
               img.height < that.options.minHeight){
              alert('Invalid image size. The image must be at least ' +
                    that.options.minWidth + 'x' + that.options.minHeight + '.');
              that.$el[0].value = '';
            }
          };
          img.src = fr.result;
        };
        fr.readAsDataURL(this.files[0]);
      });
    }
  });

});

This pattern simply has minWidth and minHeight options and, when a file is selected for upload, will check to make sure it is a valid size.

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 exercise6/configure.zcml file

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

Register JavaScript Resource

Register our script as a JavaScript resource with Plone.

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

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

Create A Custom Widget

Our custom widget will apply to all lead images.

Add a file widget.py to your exercise6 directory with the following contents:

from .interfaces import IExercise6Layer
from .interfaces import IMinSizeImageWidget
from plone.app.contenttypes.behaviors.leadimage import ILeadImage
from plone.formwidget.namedfile.widget import NamedImageWidget
from plone.namedfile.interfaces import INamedImageField
from Products.CMFPlone.resources import add_resource_on_request
from z3c.form.interfaces import IFieldWidget
from z3c.form.util import getSpecification
from zope.component import adapter
from zope.interface import implementer
from zope.interface import implements

import json
import z3c.form.widget


class MinSizeImageWidget(NamedImageWidget):
    """A widget for a named file object
    """
    implements(IMinSizeImageWidget)

    def pattern_options(self):
        # provide the pattern options
        return json.dumps({
            'minHeight': 300,
            'minWidth': 300
        })

    def render(self):
        # add the registered resource
        add_resource_on_request(self.request, 'exercise6')
        return super(MinSizeImageWidget, self).render()


@adapter(INamedImageField, IExercise6Layer)
@implementer(IFieldWidget)
def LeadImageMinSizeImageFieldWidget(field, request):
    widget = z3c.form.widget.FieldWidget(field, MinSizeImageWidget(request))
    return widget

Notice in the render method we utilize the add_resource_on_request function to load our pattern.

The code for image_widget.pt is already provided for this example since it is quite long.

Review the file and notice where we are passing the value from the pattern_options method into our widget.

Register Widget Customization

Next, we need to register our custom widget so it is used.

In your configure.zcml file, add the following

<adapter factory=".widget.LeadImageMinSizeImageFieldWidget" />
<z3c:widgetTemplate
  mode="input"
  widget=".interfaces.IMinSizeImageWidget"
  layer=".interfaces.IExercise6Layer"
  template="image_widget.pt"
  />

Installation

1. Start up your Plone instance

2. Install the Exercise 6 add-on

Now, try to add/edit a lead image to content on the site.

Warning

To make sure your resource registry configuration changes apply, you will need to be in development mode. You can also toggle development mode on and off, click save, to force configuration to be re-built after changes instead of keeping development mode on.