Date post: | 14-Apr-2017 |
Category: |
Software |
Upload: | wolfgang-thomas |
View: | 219 times |
Download: | 1 times |
Add even richer interaction to your site -
plone.patternslibPlone Conference 2016, Boston
Wolfgang Thomas
pysailor_de
pysailor
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 #ploneconf2015https://www.youtube.com/watch?v=qTmkT7vFTT8
Patterns & PloneMockup, 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 Brandhttps://www.youtube.com/watch?v=acuo0P5-H3Q
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
ResourcesPatternslib
• URL: http://patternslib.com/
• The core package
• Can be used outside of Plone, too. Think: github pages and jekyll...
Resourcesplone.patternslib
• URL: https://github.com/plone/plone.patternslib
• Integration of most Patterns into Plone
ResourcesMockup
• URL: http://plone.github.io/mockup
• Part of Plone 5
ResourcesHow 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
Let's see some real action!
Example: A custom application for ACME Corporation
Global manufacturer of goods
The challengeKeep 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”
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...
Submit on change
Submit on changeWith 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>
But reloading is so 2006!
We can do better, surely!
Using injectionWe 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">
Using injectionAll 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/
Using injection
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!)
Masonry
MasonryUsing 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>
Overview table with search
It's about the content!I want to see the results of the reports immediately.
We need a good filterThink “Advanced Search”
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 useallow-new-words: false.
Auto-suggest with fixed values
The parameters for "words-json" are a simple json dict:{"grnspn": "Gr\u00fcnspan Alley Copper Works","ivy": "Ivy Plaza Greenery","rdgrd": "R\u00f8dgr\u00f8d Road Explosives","sherwood": "Sherwood Forest Lumber”}
This is just one way of providing the “vocabulary”.Documentation: http://patternslib.com/auto-suggest/
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.
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}" />
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
Depending on other input
z3c.form with custom field for Audit result
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>
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/
Advanced UsageQuaive (Plone Intranet)
Where to begin? Patterns are used all over the place!
Advanced UsageOiRA - Online interactive Risk Assessment
Plone 4 based application that also uses Patterns all over the place.
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!
(*) Double / incompatible
• Both in Mockup and Patternslib
• pat-tooltip
• pat-toggle
• pat-inject vs pat-contentload
• pat-autosuggest vs pat-select2
• and some more