opencms days 2014 - responsive bootstrap templates reloaded

Andreas Zahner, Alkacon Software

Workshop Track

Responsive Bootstrap

templates reloaded

04.11.2014

● The OpenCms 9.5 Bootstrap template ● The new Bootstrap demo

● Demo module structure

● The grid demo template ● Additional Users

● Introduction to the Bootstrap grid system

● Flexible layout with nested containers

● Template models

● Using element views to add and edit contents

● Template rows

● Layout rows

● Available content types

● Cloning OpenCms modules ● How to clone a module

● Customizing the cloned module ● Using another Bootstrap theme

2

Agenda

● New demo template based on OpenCms 9.0 Bootstrap demo

● Offers more flexibility of page layout and content presentation

● Different tasks are assigned to specific OpenCms user roles

● Additional and optimized content types

● Uses latest Bootstrap (3.2), jQuery (1.11.1) and Unify theme (1.5) component versions

3

New Bootstrap demo

● OpenCms 9.5 Bootstrap template:

● Basic module contains used components like Bootstrap, jQuery, Unify theme ● com.alkacon.bootstrap.basics

● 2 modules contain the templates and all necessary functionality for the demo pages

● com.alkacon.bootstrap.formatters

● com.alkacon.bootstrap schemas

● Reason: cloning the modules using the integrated OpenCms functions is easier and faster

● Search module contains GWT resources for search demo ● com.alkacon.bootstrap.search

4

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

● Element views

5


● Formatters module

(com.alkacon.bootstrap.formatters)

● This module contains all components that are

used for the website frontend output

● Main templates

● Template resources

● JSP elements for the template (e.g. navigation)

● Dynamic functions (e.g. Login box)

● Formatters for all content types of the schema

module

6


● The demo content adds some demo users to OpenCms, all with the password „password“:

● Author: this user has the role „Element Author“ and is only allowed to use the page editor and manipulate page contents. He cannot access the sitemap or the workplace

● Editor: this user with the role „Editor“ can additionally access the sitemap

● Gallator: the gallator can additionally manage categories and galleries. Has the roles „Category Editor“ and „Gallery Editor“

● Templator: can access the workplace, has template development permissions with the role „Template Developer“

7

Grid demo - Users

● Grid systems are used for creating page

layouts through a series of rows and columns

that contain the content

● Bootstrap includes a fluid grid system that

appropriately scales up to 12 columns as the

device or viewport size increases

● Bootstrap differs between 4 devices (screen

widths):

8

Grid demo – Bootstrap grid intro

Extra small

devices Phones

(<768px)

Small devices

Tablets (≥768px)

Medium devices

Desktops

(≥992px)

Large devices

Desktops

(≥1200px)

● The main template JSP of the new demo template has only one „page“ container

● XML content elements are used to generate the Bootstrap responsive grid column layout: ● Template rows set the basic page layout (head,

content, foot)

● Layout rows are used to have different column variations for the page contents

● In the row elements, columns can be defined according to the Bootstrap grid

● The editor can choose from a set of predefined template models for the pages

9

Grid demo – Flexible layout

● Developer creates and adds template rows to

the main page container

10

Grid demo – Template models

Page container

Template row head with one container (restricted to Developers)

Template row foot with one container (restricted to Developers)

Template row content with one container

● Developer adds restricted layout rows to head

& foot row

11


Page container




Head layout row (restricted to Developers)

Foot layout row (restricted to Developers)

● Developer or Editor adds layout rows to content

row

12


Page container






Content layout row 1

Content layout row 2 – Column 1 Column 2

● All users can add and edit contents to the

content layout rows

13


Page container






Content layout row 1

Content layout row 2 – Column 1

Content 1

Content 2 Content 3

Content 4

● The Bootstrap demo features 2 additional

element views:

● Template: this view allows Developers to add and

edit template rows to the pages

● Layout: According to the users role, layout rows

can be added to the page in template rows.

Additionally, developers can edit the template row

contents.

14

Grid demo – Element views

● How to create and use an element view:

● Create a new file of type „Element view“ in the

Explorer view in the menu „Other options“

● Edit the file to configure the appearance

● Edit the resource type configurations in the

module or subsitemap configuration to assign

specific types to the view

15


● Setting the visibility of the element view is

possible by using permissions on the element

view file

● Only users with at least the role „Editor“ can

switch to that view

16


● Template rows can be added and edited in the

element view „Template“

● Each column can be defined by editing a

column of the template row

17

Grid demo – Template rows

● All containers created by template rows should

have the type „layoutrowsonly“, this assures

that only elements of the type layout row can

be placed in them

● Rows which should only be editable by

Developers should be defined accordingly

● The values „XS Span“, „SM Span“, etc. set the

column CSS classes for Bootstrap

18


● Use the optional „Modifier Class“ to use different classes, e.g. for column ordering („col-md-push-xx“, „col-md-pull-xx“). Their usage has to be activated in the element settings

● Use other element settings to configure a template row for a specific use case, e.g.

● Full width row to use the entire view port, useful for a slider

● Optional creation of container and row wrapper, useful for head navigation and foot

● Add optional wrapper <div> with user-defined CSS class(es).

19


● Layout rows can be added in the element view

„Layout“

● They usually can be placed inside template

rows or a tabs / accordion element

● The Bootstrap grid columns are defined in the

same way as for template rows

20

Grid demo – Layout rows

● If layout rows are placed inside template rows

restricted for Developers, they inherit this

restriction (by reading the passed „param“

attribute from the template row container)

● Detail containers and containers only for detail

pages can be defined in the element settings

● The „Modifier Class“ can be used in the same

way as for template rows

21

Grid demo – Layout rows

● Live Demo

22

Live Demo

Demo

Demo Demo

Demo

デモ

● Currently available content types: ● Template row / Layout row

● Text (4 formatters)

● Image (4 formatters)

● Icon Box

● Blog Entry (2 formatters)

● Tabs / Accordion (2 formatters)

● Animation Slider

● Image Gallery Show

● Carousel

● Blog List

● Flexible Content

● Navigation

23

Demo - Content Types

● Live Demo

24

Live Demo

Demo

Demo Demo

Demo

デモ

● Advantages of cloning the shipped modules

● Fast and easy project start (no need to start with a

blank paper)

● 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

25

Cloning OpenCms modules

● Use the function "Clone Module" that is part of

the Module Management for clone operations

26


● 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

27


● Clone the formatter module (1)

● Select the source formatters module from the drop

down list

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

28


● 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 change resource types and references when cloning the formatters module (i.e. without resource types)

29


● 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

30


● Live Demo

31

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/theme-unify/ folder

of the com.alkacon.bootstrap.basics module

● Upload all necessary resources for the new theme

to the resources/ folder of your own module

● Do not extend the basics module to be able to update it

without problems

32

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)

33


● Change the HTML output of the template

element JSPs (e.g. main navigation) for the

new theme

● Change the HTML output of the formatter JSPs

(e.g. text, image) for the new theme

34


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

"provider=org.opencms.loader.CmsDefaultTemplat

eContextProvider,template=/system/modules/com.

mycompany.formatters/templates/my-page.jsp"

35


● Any Questions?

36

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! 37

opencms days 2014 - responsive bootstrap templates reloaded

Software

content bootstrap

bootstrap theme

new bootstrap demo demo

latest bootstrap

new bootstrap demo opencms

grid demo bootstrap

demo content

bootstrap schemas reason