1.
Add even richer interaction to
your site - plone.patternslib
Plone Conference 2016, Boston
Wolfgang Thomas
pysailor_de
pysailor

2.
Patternslib, what is it?
“A library of reusable patterns which let you create rich, dynamic
and interactive prototypes or websites, without having to know or
care about Javascript”
A designer / integrator adds a class to their markup, and "magic
things" happen.
<div class="pat-collapsible closed">
<p>Check this out</p>
<p>Text that will appear on click</p>
<div>
Excellent overview by JC Brand from #ploneconf2015
https://www.youtube.com/watch?v=qTmkT7vFTT8

3.
Patterns & Plone
Mockup, part of Plone 5
• Started as an early fork of Patternslib
• Has some very Plone-specific patterns (Resource registry,
theme mapper)
• Shares base pattern with Patternslib, still different parser
• Conflicts with some Patternslib patterns
History of Mockup and Patternslib, also by JC Brand
https://www.youtube.com/watch?v=acuo0P5-H3Q

4.
plone.patternslib
• Add-on for bringing Patternslib to Plone
• Still in an early stage, but ready to use
• Comes with some handy examples (browser views):
• @@pat-switch
• @@pat-inject
• etc

5.
Resources
Patternslib
• URL: http://patternslib.com/
• The core package
• Can be used outside of Plone, too. Think: github
pages and jekyll...

6.
Resources
plone.patternslib
• URL: https://github.com/plone/plone.patternslib
• Integration of most Patterns into Plone

7.
Resources
Mockup
• URL: http://plone.github.io/mockup
• Part of Plone 5

8.
Resources
How did I create those tabs in the plain Plone page?
pat-stacks
<nav>
<a href="#patternslib">Patternslib</a> |
<a href="#plone">plone.patternslib</a>
</nav>
<article class="pat-stacks">
<section id="patternslib">...</section>
<section id="plone">...</section>
</article>
Documentation: http://patternslib.com/stacks/#documentation

9.
Let's see some real action!
Example: A custom application for ACME
Corporation
Global manufacturer of goods

10.
The challenge
Keep track of their suppliers
• They're spread all over the world, and contribute to
ACME's various production plants.
• Once in a while, they get audited.
• There can be multiple audit reports per supplier.
• Custom content types, yay! No problem for Plone.
Plus: “make it look nice”

11.
Overview and quick-search
Keeping track of a long list of suppliers
• Dig your way through a long listing
• Or, just type a few letters for ACME KwikSearch...

12.
Submit on change

13.
Submit on change
With pat-autosubmit the form is submitted on every change.
<form
class="pat-autosubmit"
action="suppliers-listing"
method="POST">
<input type="search"
placeholder="Search suppliers"
name="Title">
</form>

14.
But reloading is so 2006!
We can do better, surely!

15.
Using injection
We use pat-inject to re-insert the search results into
an element with id “suppliers".
<form
class="pat-inject pat-autosubmit"
action="my-view-name#suppliers"
method="POST">

16.
Using injection
All results are displayed in a <div> with id "suppliers".
<div id="suppliers">
<div tal:repeat="supplier view/suppliers">
Display title and description...
</div>
</div>
Take a good look at the documentation:
http://patternslib.com/inject/

17.
Using injection

18.
But where's the "nice"?
Also here Patternslib can help us.
And we need a little bit of CSS (which we can copy
from Patternslib!)

19.
Masonry

20.
Masonry
Using pat-masonry and some custom CSS, the results are
displayed in neat little boxes.
<div
id="suppliers"
class="tiles pat-masonry"
data-pat-masonry="item-selector: .tile">
<div tal:repeat="supplier view/suppliers"
class="tile four columns">
Display title and description...
</div>
</div>

21.
Overview table with search
It's about the content!
I want to see the results of the reports immediately.

22.
We need a good filter
Think “Advanced Search”

23.
Auto-suggest with fixed values
We use pat-autosuggest to create a "select2" widget.
<input class="pat-autosuggest"
type="text" name="plant"
data-pat-autosuggest='
words-json: ${view/plant_names_json};
allow-new-words: false;'
placeholder="Plant">
The list of values is fixed, therefore we use
allow-new-words: false.

24.
Auto-suggest with fixed values
The parameters for "words-json" are a simple json
dict:
{"grnspn": "Gru00fcnspan Alley Copper Works",
"ivy": "Ivy Plaza Greenery",
"rdgrd": "Ru00f8dgru00f8d Road Explosives",
"sherwood": "Sherwood Forest Lumber”}
This is just one way of providing the “vocabulary”.
Documentation: http://patternslib.com/auto-suggest/

25.
Auto-suggest with limit
pat-autosuggest comes with several options, such as
<input class="pat-autosuggest"
type="text" name="audit_type"
data-pat-autosuggest='
words-json: ${view/audit_types_json};
allow-new-words: false;
max-selection-size: 1'
>
The user can only pick one entry at a time.

26.
We can haz Mockup, too!
Here, we use the Mockup pattern pat-pickaday.
Peaceful coexistence is possible! (But, it depends...)
<input name="from"
class="pat-pickadate"
data-pat-pickadate="time:false"
value="${view/default_from}"
/>

27.
Depending on other input
Now it gets a little crazy...
Results "Pass", "Conditional pass" & "Fail" need to
have different labels, depending on the type of audit.
Audit-Type Pass Cond. Pass Fail
Financial Pass (C) Cond. Pass (B) Fail (A)
Operational Green Red Yellow
Internal / Investigative A B C

28.
Depending on other input
z3c.form with custom field for Audit result

29.
Depending on other input
With pat-depends we show or hide <select> fields based on the user's choice for
"Audit type". The example below shows the case for audit type "Operational".
<select
class="pat-depends"
disabled="disabled"
name="form.widgets.audit_result:list"
data-pat-depends="
condition:form-widgets-audit_type=operational
action:both"
>
<option value="pass" selected="selected">Green</option>
<option value="conditional">Yellow</option>
<option value="fail">Red</option>
</select>

30.
Depending on other input
For every variant, we define a <select> field with the
desired options. Those fields are initially set to
disabled (and thereby hidden).
Only if the condition is true will the field be 1) shown
and 2) enabled (action: both).
Several dependency expression options are available
(Equals, lower than, is not, substring, etc.)
Documentation: http://patternslib.com/depends/

31.
Advanced Usage
Quaive (Plone Intranet)
Where to begin? Patterns are used all over the place!

32.
Advanced Usage
OiRA - Online interactive Risk Assessment
Plone 4 based application that also uses Patterns all
over the place.

33.
The future: More Patterns for
everybody!
Goals
• Unify duplicated patterns (*)
• Move generic Mockup patterns to Patternslib
• Full Patternslib integration in Plone (PLIP?)
• Update documentation
• [...]
• Profit!

34.
(*) Double / incompatible
• Both in Mockup and Patternslib
• pat-tooltip
• pat-toggle
• pat-inject vs pat-contentload
• pat-autosuggest vs pat-select2
• and some more