Nested containers, introduced in OpenCms 9.5, have added a whole new dimension of flexibility for template development. They provide web developers with the ability to generate complex page layouts “on the fly” without digging too deep into OpenCms specific programming. In this session, advanced template use cases are demonstrated developed by Alkacon the in past 12 months with OpenCms 9.5. These include nested containers that generate their own HTML structure as well as flexible CSS classes to be used in element settings. This session will also provide insights about the improvements planned for the template mechanism in OpenCms 10, such as model groups and an enhanced template management. It is explained what will be in the new demo template that will be published with 10 and show the current working prototype.

1. Andreas Zahner, Alkacon Software
Modern templates with
nested containers
28.09.2015

2. ● The new Unify demo template
● Overview
● Formatters and their element settings for different use cases
● Creating page layouts using nested containers
● Recap: What are nested containers?
● Advanced formatter logic for nested container creation
● Flexible HTML structure creation with template rows
● Model groups
● What are model groups?
● The advantages of model groups
● Creation, settings and usage of model groups
● Template development with SASS
● Advantages of using SASS
● Necessary components, plugins
● Grunt configuration example
2
Agenda

3. The new Unify demo template3

4. ● Based on Bootstrap 3.3.5 / jQuery 1.11.3
● Unify theme 1.8 (available from
http://www.wrapbootstrap.com)
● Additional content types:
● Event
● Map
● Better CSS / JS handling by using minified files
generated with SASS and Grunt
4
Overview

5. ● Enhancements and changes based on
experience made with demo template of
OpenCms 9.x
● Improved styling of contents using element
settings to add CSS class names
● Additional formatters for contents provide more
display variations
● Improved search functionality using the
<cms:search> tag (see workshop track
tomorrow)
5
Overview

6. ● Improved layout generation with only 2 element
views (Default / Template) instead of 3
● Better separation of development and editing
● Experienced web developers create the main
page layout with template rows
● No need to generate HTML from scratch
● Full control over the page HTML structure
● Easy creation of given page structures
● Editors without technical knowledge use the
generated page templates and fill them with
contents
6
Overview

7. ● New support for image drag and drop
● Images can be changed / added to contents using
the new image drag and drop functionality
● Formatter JSPs simply have to add the following
code
● The images' xPath is passed as parameter to the
"imageDnd" method
7
Image drag and drop
<cms:formatter var="content" val="value" rdfa="rdfa">
...
<img
src="<cms:link>${value.Image}</cms:link>"
class="..."
${content.imageDnd['Image']}
alt="..."
/>

8. ● The formatters for the Unify demo use element
settings to directly apply CSS class names to
the HTML structure
● This allows experienced users full control over
the styles used to generate the output
● The formatter JSPs contain less logic to
generate the HTML / CSS structure
● Alternative formatters can be added to provide
settings that can be used by non-technical
editors
8
Formatters & their element settings

9. ● Full control over the
applied CSS classes
● Maximum layout
flexibility
● For experienced
web developers
● Only a limited set of
layout variations
● No technical
knowledge required
● Easy to understand
9
CSS class settings Predefined options settings
Formatters & their element settings
Which kind of formatter settings is "better"
depends on the project requirements

10. ● The text content type provides different
formatters demonstrating the different
approaches:
● Text as Icon Box Formatter (CSS)
● The wrapper CSS classes and icon CSS classes have
to be entered manually (using Combo box widgets)
● Text as Icon Box Formatter (Settings)
● Options for the color, rounded box corners
● Selection of the icon that should be displayed
Limitation of color, icon types and icon size
10
Formatters & their element settings

11. ● Live Demo
11
Live Demo
Demo
Demo Demo
Demo
デモ

12. Creating page layouts using nested
containers
12

13. ● Short definition: Nested containers are
containers that are placed inside other
containers
● They can be created by formatter JSPs or
included JSP elements
● Advantage: by using nested containers, more
flexible layouts, pages and contents can be
created
13
What are nested containers?

14. ● Nested containers are not part of the content itself
● If you place the content that renders the nested container a
second time on the same or a different page, the elements
in the nested container will not be inserted. For each
element instance of the content that renders the nested
container, the container is completely independent.
● Nested containers are tied to a container page element
● If you move a content that renders a nested container on a
page (and the formatter does not change), the element in
the nested container will move with it. If you remove the
content, or change its formatter, the nested container will
vanish and its elements are not visible anymore.
14
What are nested containers?

15. ● Nested containers are similar to normal
containers managed by the container page
● When a content that creates a nested container
is added to a page, the container will be stored
similar to a top-level container in the container
page
● The only additional information is the element
ID of the container's parent element
● When an element that created a nested
container is removed from a page, also the
information about the nested container is
removed from the container page
15
What are nested containers?

16. ● The new Unify demo pages are built using
template row elements that are placed in other
template row elements
● To make this operable, specific template rows
are only droppable in containers that match the
needed container type
16
Advanced formatter logic for nested
container creation

17. ● Template row content example
17
Advanced formatter logic for nested
container creation
Sets the matching
container type

18. ● If the row does not match, no HTML output is
generated by the template row formatter
● Result: the page editor only marks the
matching containers as drop zones
18
Advanced formatter logic for nested
container creation
<c:choose>
<c:when test="${!content.value.Container.isSet
|| (content.value.Container.isSet
&& fn:containsIgnoreCase(cms.container.type,
content.value.Container))}">
</c:when>
<c:otherwise>
<%-- Required Container does not match, don't generate
output --%>
</c:otherwise>
</c:choose>

19. Advanced formatter logic for nested
container creation
19
Page container (page)
Template row "Header" (headsection)
Template row "Footer" (footsection)
Template row "Main section" (mainsection)
Template row "Container" or "Container Fluid" (container)
Template row "Column" (default)
Content Content
Template row "Column" (default)
Content Content Content

20. ● Wrapper HTML of template row containers can
optionally be defined in the content
● This allows the developer full control over the
generated HTML structure
20
Flexible HTML structure creation

21. ● The $(param) allows to add optional wrapper CSS
class names to the HTML in the element settings
dialog
● More possible settings are
● Link: Pass a link to the wrapper HTML structure using
the $(link) macro
● CSSHints: CSS classes than can be passed to child
elements
● Detail page settings: define detail or detail ony
containers
21
Flexible HTML structure creation

22. ● Formatter logic to generate the pre markup
22
Flexible HTML structure creation
...
<c:if test="${content.value.PreMarkup.isSet}">
<c:set var="preMarkup"
value="${fn:replace(content.value.PreMarkup,
'$(param)', cms.element.setting.param.value)}"
/>
<c:set var="link" value="" />
<c:if test="${cms.element.setting.link.isSet}">
<c:set var="link">
<cms:link>${cms.element.setting.link}</cms:link>
</c:set>
</c:if>
${fn:replace(preMarkup, '$(link)', link)}
</c:if>
...

23. ● For each created container of a template row,
pre and post markup can optionally be defined
● The class names have to be set in the "Grid
Class" field of the container, e.g. "col-xs-6 col-
md-3"
● With that approach, even complex responsive
behaviour (like push / pull of columns for
specific cases) can easily be defined by the
developer
23
Flexible HTML structure creation

24. ● Live Demo
24
Live Demo
Demo
Demo Demo
Demo
デモ

25. Model groups25

26. ● Model groups are pre defined content
structures that can be used by editors to
generate commonly used page items
● Example: creation of an "article" that is
composed of a text element with an image to
the left or right
26
What are model groups?

27. ● No need for the editor to create more complex
layout structures from scratch
● More efficient workflow:
● Often used structures can be created with one
click
● Content elements of model groups can be reused
or copied depending on their use case
27
The advantages of model groups

28. ● Model groups are maintained in the sitemap
editor
● Change the view to "Templates" to get a list of
Templates and existing model group pages
28
Creation of model groups

29. ● Edit a model group page to change existing model
groups or create new ones
● Example:
● Drop a template row which you want to use as model
wrapper to the page
● Edit the element settings of this template row to create
a model group based on that row and its contents
● Add other contents to the template row columns, edit
their element settings if needed
● A content of type "modelgroup" is created
automatically by OpenCms in the current sitemap
".content/modelgroup/" folder
29
Creation of model groups

30. ● In addition to the common element settings of a
content element, model groups have special
settings
30
Settings of model groups

31. ● Use as group: This is set at the outer content
element, usually a template row.
If a model group is dropped on a page, two
different behaviours can be configured:
● Copy elements: all content elements belonging to
the model group are copied if dropped on a page
● Reuse elements: all content elements belonging
to the model group are reused
● Important: The outer element itself is always
reused!
● Group title, Group description: Should
contain information about the model group
31
Settings of model groups

32. ● Each content element that is part of a model
group (except the wrapping element) can be
configured to either be copied or reused
32
Settings of model groups

33. ● Available model groups are listed in the "Add
content" dialog of the page editor and can be
dropped on the page like other content
elements
33
Usage of model groups

34. ● Reusable model groups like header and footer
cannot be edited on the pages where they are
used
● The only way to edit them is to change to the
model page with these groups
● They have different icons to identify them in the
list of avaible model groups (blue)
34
Usage of model groups

35. ● Live Demo
35
Live Demo
Demo
Demo Demo
Demo
デモ

36. Template development with SASS36

37. ● Definable variables
● Operational functions (e.g. lighten, darken)
● Joining of multiple files
● Fewer HTTP requests by creating one large
(minified) CSS file
● Reusable color schemes for theming
● In combination with Grunt:
● Better development workflow
● Faster development
37
Advantages of using SASS

38. 38
Advantages of using SASS
Excerpt from defaultcolors.scss
...
// Main colors
$alkacon-red: #b31b34;
$alkacon-blue: #144382;
...
$blue: $alkacon-blue;
$blue-light: #2197db; // handmade looks better
$blue-lighter: lighten($blue-light, 42%);
$blue-dark: darken($blue, 10%);
$blue-darker: darken($blue, 15%);
$red: $alkacon-red;
$red-light: #ff264a; // handmade looks better
$red-lighter: lighten($red-light, 37%);
$red-dark: darken($red, 9%);
$red-darker: darken($red, 21%);
...
● Example: Unify template default colors SCSS
file

39. ● Example: Unify template red SCSS file
39
Advantages of using SASS
Excerpt from style-red.scss
...
// Import default colors
@import 'defaultcolors';
// Main theme colors
$main-theme: $red;
$main-theme-hover: $red-light;
$main-theme-additional: $red-lighter;
// Navigation colors
$nav-main-bg: $white;
$nav-main-color: $navigation-text;
...
// Import the other files
@import 'imports';

40. ● Node.js (JavaScript runtime): https://nodejs.org
● Grunt (Task runner)
● grunt-cli (Command line interface)
● grunt-contrib-watch
● grunt-contrib-sass
● grunt-contrib-cssmin
● grunt-contrib-uglify
● grunt-contrib-copy
● Ruby: https://www.ruby-lang.org
● Gem: sass
40
Necessary components, plugins

41. ● Gruntfile.js excerpt from Unify demo template
● Task "sass":
41
Grunt configuration example
sass: {
dist: {
options: {
sourcemap: 'auto',
lineNumbers: true,
style: 'nested',
}, {
expand: true,
cwd: 'components/scss',
src: ['style-red.scss'],
dest: 'output/resources/css',
ext: '.css'
}
]
}
},

42. ● Task "copy":
42
Grunt configuration example
copy: {
main: {
files: [{
expand: true,
flatten: true,
src: ['output/resources/css/*.min.css'],
dest: '/path-to-vfs-mount/
…/com.alkacon.unify.basics/resources/css/',
filter: 'isFile'
},{
expand: true,
flatten: true,
src: ['output/resources/js/*.min.js'],
dest: '/path-to-vfs-mount/
…/com.alkacon.unify.basics/resources/js/',
filter: 'isFile'
}],
},
},

43. ● Live Demo
43
Live Demo
Demo
Demo Demo
Demo
デモ

44. 44
Any Questions?
● Any Questions?
Fragen?
Questions ?
Questiones?
¿Preguntas?質問

45. Andreas Zahner
Alkacon Software GmbH
http://www.alkacon.com
http://www.opencms.org
Thank you very much for your
attention!
45