OpenCms Days 2013 - Bootstrap your templates

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

● 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

● 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

● 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

● 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

● 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
Bootstrap template - Containers
● Screenshot of container structure

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

● 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

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

● 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

● 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

● 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

● 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

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

● 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

● 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

...
<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

● Change the HTML output of the template
element JSPs (e.g. main navigation) for the
new theme
19
<div class="navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-
toggle="collapse" data-target=".nav-
collapse">
<span class="icon-bar"></span>
</a>
<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">
</a>
<a class="brand"
href="index.html"><strong>My
Company</strong></a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">

● Change the HTML output of the formatter JSPs
(e.g. text block) for the new theme
20
...
<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>
...

● 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

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

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

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

● 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

● 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>
...

● 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

● Stop the servlet container and add the resource
type definition to the module in the "opencms-
modules.xml" configuration file
28
<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>

● 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

● Localize the editor elements and eventual
frontend output
30

● Resulting feature content in OpenCms
31

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

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

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

OpenCms Days 2013 - Bootstrap your templates

Recommended

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to OpenCms Days 2013 - Bootstrap your templates (20)

More from Alkacon Software GmbH & Co. KG (12)

Recently uploaded (20)

OpenCms Days 2013 - Bootstrap your templates