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

Bootstrap template - Structure

● 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

● 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

Cloning OpenCms modules

● 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

● 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

● 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

● 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

● 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

Customizing the cloned module

...

<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

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

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

...

● 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

● 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

● After these steps, you can start creating your

pages with the cloned template and formatters

23

Customizing the cloned module

● 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

Add a new content type

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

● 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

● Localize the editor elements and eventual

frontend output

30

Add a new content type

● Resulting feature content in OpenCms

31

Add a new content type

● 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