OpenCms 9 ships with a new default template based on the popular Bootstrap HTML framework. One of the main reasons why Bootstrap is so popular is the ability to develop websites fast and its support for responsive design. The new OpenCms 9 default template provides a set of content types specifically created for Bootstrap, as well as a set of HTML layouts for commonly used pages. In this workshop, Andreas will explain how to create an individual OpenCms template based on Bootstrap, using the new default template as a base. To do achieve this, he will copy the provided HTML module and customize the output. Then he shows how to add custom content type definitions that extends the default schema module.

1. Andreas Zahner, Alkacon Software
Workshop Track
Bootstrap your templates
with OpenCms 9
09.10.2013

2. ● The OpenCms 9 Bootstrap template
● Module structure
● Content containers
● Available content types
● Cloning OpenCms modules
● How to clone a module
● Customizing the cloned module
● Using another Bootstrap theme
● Modifying the formatter HTML output
● Creating pages using the customized formatters
● Add a new content type
2
Agenda

3. ● Module Structure of previous OpenCms
versions:
● One Template module
● For each resource type, an extra module has been
developed including the type definition, XSDs,
localization and formatters
● OpenCms 9 Bootstrap template:
● Only 2 modules contain the template and all
necessary functionality for the website
● Reason: cloning the modules using the integrated
functions is easier and faster
3
Bootstrap template - Structure

4. ● Schemas module
(com.alkacon.bootstrap.schemas)
● This module contains everything for the
definition of the available content elements
● Resource type definitions
● XSD files
● Localization bundles
4
Bootstrap template - Structure

5. ● Formatters module
(com.alkacon.bootstrap.formatters)
● This module contains all components that are
used for the website frontend output
● Main template
● Template resources
● JSP elements for the template (e.g. navigation)
● Dynamic functions (e.g. Login box)
● Formatters for all types of schema module
5
Bootstrap template - Structure

6. ● The bootstrap template has 5 content
containers
● Top container
● For full width content
● Middle left container, middle right container
● The column ratio can be adjusted using a property
Example: 9 – 3: left column uses 9 grid units, the right
column uses 3 grid units (the default setting)
● Bottom container
● For full width content
● Foot container
● Only used for sticky footers (i.e. flexible content)
6
Bootstrap template - Containers

7. 7
Bootstrap template - Containers
● Screenshot of container structure

8. ● Currently available content types:
● Flexible Content
● Image Row
● Hero / Jumbotron
● News Article
● Product
● Slider
● Tabs / Accordion
● Text Block
8
Bootstrap template - Types

9. ● Advantages of cloning the shipped modules
● Fast and easy project start (no need to start with
"Adam & Eve")
● Use existing content types with different HTML
output
● Modify the page template by using
● A different container structure (optional)
● A different Bootstrap theme (optional)
● Clone existing content types and modify their fields
according to your requirements
9
Cloning OpenCms modules

10. ● Use the dynamic function "Clone a module"
that is part of the demo formatter module for
clone operations
10
Cloning OpenCms modules

11. ● The function form uses the Java bean
"CmsCloneModule" of the OpenCms core
package
"org.opencms.workplace.tools.modules"
● getter and setter methods for all configurable
options
● executeModuleClone() starts the clone process
● The module is copied first
● Internal references are adjusted in the copied module
● The module is added to the OpenCms module
configuration
● Optionally, the site contents references can be adjusted
to use the new module clone
11
Cloning OpenCms modules

12. ● Clone the formatter module (1)
● Select the source formatters module from the drop
down list
● Be sure to uncheck the delete option if you want to
keep the old module in the system
● Enter the new module and author information
● Be sure that the package name of the module does not
exist yet
● For our examples, we create a clone named
"com.mycompany.formatters"
12
Cloning OpenCms modules

13. ● Clone the formatter module (2)
● Translation options are only important when
cloning a module containing resource type
definitions
● Source and target prefix names: If the resource
types of the module have a prefix (like "bs"), this
will be replaced by the target prefix name
● The Formatters source module has to be entered
to ensure that the XSD files reference the correct
formatter JSPs after cloning all required modules
● Uncheck the option to replace schema locations
and resource types when cloning the formatters
module (i.e. without resource types)
13
Cloning OpenCms modules

14. ● After cloning, the new module is shown in the
Module Management view
● The resources of the cloned module can be
checked below the /system/modules/ folder of
the root site
● If a module with resource type definitions was
cloned, the servlet container has to be
restarted
14
Cloning OpenCms modules

15. ● Live Demo
15
Live Demo
Demo
Demo Demo
Demo
デモ

16. ● Switching to another ready to use Bootstrap
theme
● All theme specific files (CSS, JavaScript, images)
are placed inside the resources/ folder of the
formatter module
● Delete all these files and replace them with the
necessary files of the theme you want to use
16
Customizing the cloned module

17. ● Switching to another ready to use Bootstrap
theme
● Edit the template JSP to use the correct CSS and
JS files of the theme
● Adjust the HTML output of the template JSP
according to the requirements of the new theme (if
required)
17
Customizing the cloned module

18. ...
<head>
...
<cms:headincludes type="css" closetags="true"
defaults="%(link.weak:/system/modules/com.mycompany.formatters/resources/css/bootstrap.min.c
ss)
|%(link.weak:/system/modules/com.mycompany.formatters/resources/css/bootstrap-
responsive.min.css)
|%(link.weak:/system/modules/com.mycompany.formatters/resources/css/bootstrap-
overrides.css)
...
|%(link.weak:/system/modules/com.mycompany.formatters/resources/css/page.css)" />
...
<cms:headincludes type="javascript" defaults="http://code.jquery.com/jquery-latest.js
|%(link.weak:/system/modules/com.mycompany.formatters/resources/js/bootstrap.min.js)
|%(link.weak:/system/modules/com.mycompany.formatters/resources/js/theme.js)" />
...
</head><body>
...
18
Customizing the cloned module

19. ● Change the HTML output of the template
element JSPs (e.g. main navigation) for the
new theme
19
Customizing the cloned module
<div class="navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-
toggle="collapse" data-target=".nav-
collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a><!-- /nav-collapse -->
<div class="nav-collapse collapse">
<ul class="nav top-2">
...
<div class="navbar navbar-inverse navbar-
static-top">
<div class="navbar-inner"><div
class="container">
<a class="btn btn-navbar" data-
toggle="collapse" data-target=".nav-
collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a><!-- /nav-collapse -->
<a class="brand"
href="index.html"><strong>My
Company</strong></a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">

20. ● Change the HTML output of the formatter JSPs
(e.g. text block) for the new theme
20
Customizing the cloned module
...
<cms:formatter var="content">
...
<c:if
test="${paragraph.value.Headline.isSet}">
<div
class="headline"><h3>${paragraph.rdfa.Hea
dline}>${paragraph.value.Headline}</h3></
div>
</c:if>
...
<c:if
test="${paragraph.value.Link.exists}">
<p><a class="btn-u btn-u-small"
href="<cms:link>${paragraph.value.Link.va
lue.URI}</cms:link>">${paragraph.value.Li
nk.value.Text}</a></p>
</c:if>
...
...
<cms:formatter var="content">
...
<c:if
test="${paragraph.value.Headline.isSet}">
<div
class="section_header"><h3>${paragraph.rd
fa.Headline}>${paragraph.value.Headline}<
/h3></div>
</c:if>
...
<c:if
test="${paragraph.value.Link.exists}">
<p><a class="btn btn-small"
href="<cms:link>${paragraph.value.Link.va
lue.URI}</cms:link>">${paragraph.value.Li
nk.value.Text}</a></p>
</c:if>
...

21. ● Create a subsite that uses your cloned
template and formatters
● Set the "template" property value on the subsite
folder to your template JSP, e.g.
"/system/modules/com.mycompany.formatters/tem
plates/bootstrap-page.jsp"
21
Customizing the cloned module

22. ● Edit the subsite configuration to make the
content types use the correct formatter JSPs if
only the formatter module was cloned
22
Customizing the cloned module

23. ● After these steps, you can start creating your
pages with the cloned template and formatters
23
Customizing the cloned module

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

25. ● Add a new content type that you need for your
website
● Example: Feature content that shows e.g.
product features with images in a nice boxed
layout (see screenshot from Bootstrap theme)
25
Adding a new content type

26. ● If you do not already use your own schemas module,
create one, e.g. "com.mycompany.schemas"
● Create a new OpenCms XML Schema Definition
(XSD) file in the schemas/ folder of the module
26
Add a new content type
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>
<xsd:include schemaLocation="opencms://system/.../schemas/nested/featureitem.xsd"/>
<xsd:element name="MyCompanyFeatures" type="OpenCmsMyCompanyFeatures"/>
...
<xsd:complexType name="OpenCmsMyCompanyFeature">
<xsd:sequence>
<xsd:element name="Title" type="OpenCmsString" />
<xsd:element name="Item" type="OpenCmsMyCompanyFeatureItem" minOccurs="3" maxOccurs="4" />
</xsd:sequence>
<xsd:attribute name="language" type="OpenCmsLocale" use="required"/>
</xsd:complexType>
...

27. ● Upload file icons (a small 16x16 version for the
workplace, a 24x24 version for the content
editor) for the new type to the folder
/system/workplace/resources/filetypes/
● Add these file icons to the module resources to
ensure they are exported together with the
module
27
Add a new content type

28. ● Stop the servlet container and add the resource
type definition to the module in the "opencms-
modules.xml" configuration file
28
Add a new content type
<module>
<name>com.mycompany.schemas</name>
...
<parameters/>
<resourcetypes>
<type class="org.opencms.file.types.CmsResourceTypeXmlContent" name="my-feature" id="33333">
<param name="schema">/system/modules/com.mycompany.schemas/schemas/feature.xsd</param>
</type>
</resourcetypes>
<explorertypes>
<explorertype name="my-feature" key="fileicon.my-feature" icon="my-feature.png" bigicon="my-feature_big.png"
reference="xmlcontent">
<newresource page="structurecontent" uri="newresource_xmlcontent.jsp?newresourcetype=my-feature"
order="130" autosetnavigation="false" autosettitle="false" info="desc.my-feature"/>
</explorertype>
</explorertypes>
</module>

29. ● Create a formatter JSP file that renders the
elements of the new content type
● Configure the resource type either in the
module configuration for system wide usage or
in the subsite configuration file
29
Add a new content type

30. ● Localize the editor elements and eventual
frontend output
30
Add a new content type

31. ● Resulting feature content in OpenCms
31
Add a new content type

32. ● Live Demo
32
Live Demo
Demo
Demo Demo
Demo
デモ

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

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