logo

Plone Training 2022 documentation

Training Overview

  • Mastering Plone 6 Development
    • 1. About Mastering Plone
    • 2. Watch the Training Video
    • 3. Introduction
    • 4. The Case Study
    • 5. What is Plone?
    • 6. Installation and Setup of Plone 6
    • 7. Installing Plone for the Training
    • 8. The Features of Plone
    • 9. The Anatomy of Plone
    • 10. What's New in Plone?
    • 11. Plone 6 Basics
    • 12. Configuring and Customizing Plone "Through The Web"
    • 13. Customizing Volto Components
    • 14. Semantic UI
    • 15. Theming in Volto
    • 16. Extending Plone
    • 17. Extending Plone With Add-on Packages
    • 18. Buildout I
    • 19. Write Your Own Python Add-On to Customize Plone
    • 20. Dexterity I: Content types
    • 21. Dexterity II: Talks
    • 22. Dexterity: Reference
    • 23. Volto View Component: A Default View for a "Talk"
    • 24. Behaviors
    • 25. Creating a dynamic frontpage with Volto blocks
    • 26. Volto View Components: A Listing View for Talks
    • 27. Programming Plone
    • 28. IDEs and Editors
    • 29. Custom Search
    • 30. Turning Talks into Events
    • 31. Vocabularies, Registry-Settings and Control Panels
    • 32. Upgrade-steps
    • 33. Testing in Plone
    • 34. Using Third-Party Behaviors
    • 35. Dexterity Types III: Sponsors
    • 36. The Sponsors Component
    • 37. Using Volto add-ons
    • 38. Rich Text Editor Settings
    • 39. Custom Block
    • 40. Extending Volto With Custom Add-on Package
    • 41. Extending Volto With a FAQ Block Type
    • 42. Workflow, Roles and Permissions
    • 43. Relations
    • 44. Creating Reusable Packages
    • 45. More Complex Behaviors
    • 46. Endpoints
    • 47. Volto Actions and Component State
    • 48. Making Our Package Reusable
    • 49. Using starzel.votable_behavior in ploneconf.site
    • 50. Releasing Your Code
    • 51. Buildout II: Getting Ready for Deployment
    • 52. Plone REST API
    • 53. The Future of Plone
    • 54. Optional
    • 55. Using the code for the training
  • Mastering Plone 5 Development
    • 1. About Mastering Plone
    • 2. Introduction
    • 3. What is Plone?
    • 4. Installation & Setup
    • 5. Installing Plone for the Training
    • 6. What Vagrant is and does
    • 7. The Case Study
    • 8. The Features of Plone
    • 9. The Anatomy of Plone
    • 10. What's New in Plone 5, 5.1 and Plone 5.2
    • 11. Configuring and Customizing Plone "Through The Web"
    • 12. Theming
    • 13. Extending Plone
    • 14. Extend Plone With Add-On Packages
    • 15. Dexterity I: "Through The Web"
    • 16. Buildout I
    • 17. Write Your Own Add-Ons to Customize Plone
    • 18. Return to Dexterity: Moving contenttypes into Code
    • 19. Views I
    • 20. Page Templates
    • 21. Customizing Existing Templates
    • 22. Views II: A Default View for "Talk"
    • 23. Views III: A Talk List
    • 24. Testing in Plone
    • 25. Behaviors
    • 26. Writing Viewlets
    • 27. Programming Plone
    • 28. IDEs and Editors
    • 29. Dexterity Types II: Growing Up
    • 30. Custom Search
    • 31. Turning Talks into Events
    • 32. User Generated Content
    • 33. Resources
    • 34. Using Third-Party Behaviors
    • 35. Dexterity Types III: Python
    • 36. Dexterity: Reference
    • 37. Relations
    • 38. Manage Settings with Registry, Control Panels and Vocabularies
    • 39. Creating a Dynamic Front Page
    • 40. Creating Reusable Packages
    • 41. More Complex Behaviors
    • 42. A Viewlet for the Votable Behavior
    • 43. Making Our Package Reusable
    • 44. Using starzel.votable_behavior in ploneconf.site
    • 45. Releasing Your Code
    • 46. Buildout II: Getting Ready for Deployment
    • 47. Plone REST API
    • 48. The Future of Plone
    • 49. Optional
  • React
    • 1. Introduction
    • 2. Watch the Training Video
    • 3. Bootstrapping A React Project
    • 4. Create React Component
    • 5. Styling Your Component
    • 6. Convert To A Reusable Component
    • 7. Use Snapshot Testing
    • 8. How To Use State In Your Component
    • 9. Use Event Handlers
    • 10. Use Callbacks To Delete An Item
    • 11. Use Forms To Add An Item
    • 12. Use Initial Form Data To Edit An Item
    • 13. Use Redux To Store Data
    • 14. Write Tests For Your Reducers
    • 15. Use Actions To Manipulate The Store
    • 16. Using External Data
    • 17. useEffect Hook
    • 18. Using Different Routes
    • 19. Using Links To Navigate
    • 20. Navigate Using Redirects
  • Volto
    • 1. Introduction
    • 2. Code Walkthrough
    • 3. Bootstrapping A Volto Project
    • 4. Styling
    • 5. Static Resources
    • 6. Override Components
    • 7. Internationalization
    • 8. Override Views
    • 9. Custom Views
    • 10. Custom Widget
    • 11. Rich Text Editor Settings
    • 12. Actions & Reducers
  • Volto Hands-On
    • 1. Introduction
    • 2. Quick Start
    • 3. Project requirements
    • 4. Theming
    • 5. Header
    • 6. Footer
    • 7. Breadcrumbs
    • 8. Brief introduction to Volto blocks
    • 9. Blocks - Main Slider
    • 10. Content types Views
    • 11. Blocks - Highlights
    • 12. Blocks - Edit components
  • Volto Add-ons Development
    • 1. Introduction
    • 2. Volto add-ons development
    • 3. Basic working block
    • 4. Improve the block view
    • 5. Block editing with a form
    • 6. Customizable columns
    • 7. Make the block extensible
    • 8. Add-ons - advanced topics
    • 9. Plone integration with Volto blocks
    • 10. About
    • 11. Developer integration with text editors
    • 12. Really short primer on Javascript enhancements
  • Testing Plone
    • Summary
    • Intro to tests
    • Some theory
    • How to test a Plone add-on
    • Testing setup
    • Unit tests
    • Testing a Dexterity content type
    • Testing a view
    • Acceptance testing
    • Robot tests
    • Continuous Integration
  • Plone 6 Classic UI Theming
    • 1. Preparation for the theming training
    • 2. TTW Customizations
    • 3. Create a theme based on Barceloneta
    • 4. Create a Theme from scratch
    • 5. Create a theme based on Diazo
  • Plone 5 Theming
    • Basic TTW Customizations
    • TTW Theming I: Introduction
    • TTW Theming II: Custom Barceloneta Theme
    • TTW Theming III: Make It Reproducible
    • Theme Package I: Preparations
    • Theme Package II: Diazo Theme
    • Theme Package III: Customizations
    • Theme Package IV: Templates
    • Theme Package V: Initial Content
    • Theme Package VI: TinyMCE Templates
    • Theme Package VII: Resource Registries
    • Advanced Diazo
    • Jbot
    • Creating Custom Components
  • JavaScript For Plone Developers (up to Plone 5)
    • Setup
    • JavaScript Development Process
    • RequireJS And JavaScript Modules
    • Mockup
    • Writing Documentation For Mockup
    • Through-The-Web Development
    • Exercises
      • Exercise 1: Include a JavaScript resource TTW
      • Exercise 2: Include JavaScript In Browser View
      • Exercise 3: Gallery Integration With Theme
      • Exercise 4: Gallery integration as resources
      • Exercise 5: Simple Pattern
      • Exercise 6: Using A Pattern In A Z3C Form Widget
      • Exercise 7: Pattern Wrapping A 3rd Party Library
      • Exercise 8: Customizing Pattern
      • Exercise 9: Overriding a pattern TTW
      • Exercise 10: NG2 APP Component Rendered In A Browser View
      • Exercise 11: NG2 APP Component In a A bundle
      • Exercise 12: NG2 APP In Logged In Bundle
      • Exercise 13: Pattern with React
    • Scratchpad
  • Plone Deployment
    • Introduction
    • Training setup
    • Intro To Plone Stack
    • Plone Docker Images
  • Automating Plone Deployment
    • Introduction
    • Intro To Plone Stack
    • Intro To Ansible
    • The Plone Playbook
    • Basic Use Of The Playbook
    • In Operation
    • Customized Use
    • Maintenance Strategies
    • Plone Deployments With Amazon OpsWorks
      • Introduction
      • Deployment Terminology
      • Creating Your First Stack
      • Deploying Changes
      • Maintenance
      • What Doesn't It Do
    • Introduction
    • Deployment Terminology
    • Creating Your First Stack
    • Deploying Changes
    • Maintenance
    • What Doesn't It Do
    • Let's Encrypt Certificates and certbot
  • Plone Deployments With Amazon OpsWorks
    • Introduction
    • Deployment Terminology
    • Creating Your First Stack
    • Deploying Changes
    • Maintenance
    • What Doesn't It Do
  • Deploying and Operating Plone on WSGI
    • 1. Setup a box for the training
    • 2. PEP 3333
    • 3. Deploying Plone with WSGI using zc.buildout, plone.recipe.zope2instance and Waitress
    • 4. Differences to the ZServer setup
    • 5. Understanding the contents of wsgi.ini
    • 6. What's left in zope.conf?
    • 7. WSGI options
    • 8. Bjoern
    • 9. Gunicorn
    • 10. uWSGI
    • 11. Debugging Plone on WSGI
    • 12. Useful Add-ons and Utilities
    • 13. Can I talk to the supervisor?
    • 14. Buildout for the training
  • "Through-The-Web" Plone Customization
    • Customizing logo and CSS of default theme
    • Configuring and Customizing Plone
    • Introduction to Diazo Theming
    • Creating a custom theme based on Barceloneta
    • Dexterity
    • Mosaic
    • Rapido
    • Workflow
  • Plone Training Solr
    • Setup
    • Solr GUI And Query Syntax
    • First Steps
    • How Does collective.solr Work
    • Solr Buildout Configuration
    • More Features
    • Solr Testing
    • Production Setup
    • Alternative Indexing/Search Solutions
  • Plone Workflow
    • Introduction To Workflows
    • Basic Roles and Permissions
    • Local Roles
    • Dynamic Roles
    • Placeful Workflow
    • Multi-chain Workflows
    • Workflow Variables
    • Using GenericSetup to Manage Plone Workflows
  • Angular SDK for Plone
    • Summary
    • What Is Angular
    • What Is The Plone Angular SDK
    • Installing The Development Environment
    • Using And Customizing The Angular Plone Components
    • Integrating A Theme
    • Override A default Plone Component Template
    • Creating A Custom View For The Talk Content Type
    • Displaying News On The Home Page
    • Login
    • Adding Quick Links In the Footer
    • Deployment
    • Managing The Plone Configuration From The Angular Project
    • Advanced
  • Migrating Content with Transmogrifier
    • Export Current Site Content
    • Transmogrifier Basics
    • Before Running the Import
    • Writing the Import Pipeline
    • Writing Custom Blueprints
    • Running the Import
    • Advanced Pipeline Tips
    • Advanced Blueprint Tips
    • Users & Groups Migration
  • GatsbyJS
    • Summary
    • What Is GatsbyJS
    • How it works
    • Installing The Development Environment
    • Pages
    • Data
    • Source plugins
    • Transformer plugins
    • Dynamic pages
    • Building Source Plugins
    • Fetching Data Using Plone REST.API
    • Search Traversal Method Of Retrieving Data
    • gatsby-source-plone
    • gatsby-starter-plone
    • Copying The Plone Site
    • RichText Component
    • Navigation
  • Build your own webframework from scratch
    • About this course
    • The Web and Python
    • Hello WSGI
    • Middlewares
    • Routing
    • From Raw WSGI to a framework
    • Exploiting Python's data model
    • Metaclasses
    • Functional Python
    • Summary

Plone Trainings

  • Glossary
  • Contributing to Plone Trainings Documentation
    • Building and Checking the Quality of Documentation
    • General Guide to Writing Documentation
    • Authors Guide
  • Teaching
    • 1. Training theory: education, how people learn and process information
    • 2. Before the training: Create material, invite trainees, preparation
    • 3. During training day(s): what to expect, do's and don'ts
    • 4. After the training: Aftercare, keep in touch, learn, improve

plone.org plone.org

Exercise 4: Gallery integration as resources – JavaScript For Plone Developers (up to Plone 5)
  • repository
  • open issue
  • suggest edit
  • .md
Contents
  • Add your JavaScript files
  • Register static resource directory
  • Register your JS as a resource
  • Bundle resource
  • Bundle
  • Installation
  • Running
  • Production

Exercise 4: Gallery integration as resources

Contents

  • Add your JavaScript files
  • Register static resource directory
  • Register your JS as a resource
  • Bundle resource
  • Bundle
  • Installation
  • Running
  • Production

Exercise 4: Gallery integration as resources#

Warning

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

In this exercise, we will include our custom JavaScript file into your Plone site as a bundled resource, instead of manually including it into your theme template (as in exercise 3).

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

Add your JavaScript files#

In this example, we are going to create a rather contrive example to demonstrate the bundling process. Add a static folder, then inside it create a file named resource.js:

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

  $('body').ready(function() {
    alert("Woohoo, it worked!");
  });
});

Additionally, create a file named bundle.js

require([
  'exercise4'
], function() {
  'use strict';
});

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

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

Register your JS as a resource#

In order to include our files, we need to registry them as static resources. In the registry.xml file, under profiles/default add the following:

<records prefix="plone.resources/exercise4"
         interface='Products.CMFPlone.interfaces.IResourceRegistry'>
  <value key="js">++plone++exercise4/resource.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-exercise4"
         interface='Products.CMFPlone.interfaces.IResourceRegistry'>
  <value key="js">++plone++exercise4/bundle.js</value>
</records>

Bundle#

Finally, let us create our bundle registration

<records prefix="plone.bundles/exercise4"
         interface='Products.CMFPlone.interfaces.IBundleRegistry'>
  <value key="resources">
    <!-- reference to bundle resource definition -->
    <element>bundle-exercise4</element>
  </value>
  <value key="merge_with">default</value>
  <value key="enabled">True</value>
  <value key="jscompilation">++plone++exercise4/exercise4-compiled.min.js</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>pat-base</element>
  </value>
</records>

Installation#

  1. Start up your Plone instance

  2. Install the Exercise 4 add-on

Running#

At this point, we have no compiled version of the code that we are running with so our code does nothing.

  1. Go into Site Setup -> Resource Registries

  2. Check "Development Mode"

  3. Select to develop JavaScript and CSS for the exercise4 bundle

  4. Click save

This should load your JavaScript and LESS files now. Reload the page, and you should be greated by our "exciting" new alert box.

Production#

To build our bundle, we will utilize the plone-compile-resources script that ships with Plone.

Warning

If you are not running a ZEO setup, you will 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=exercise4

Once this command finishes, your bundle is built and will be deployed with your package.

previous

Exercise 3: Gallery Integration With Theme

next

Exercise 5: Simple Pattern

By Plone Community
© Copyright The text and illustrations in this website are licensed by the Plone Foundation under a Creative Commons Attribution 4.0 International license..