opencms days 2014 - responsive bootstrap templates reloaded
TRANSCRIPT
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
Bootstrap template - Structure
● 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
Bootstrap template - Structure
● 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
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
Head layout row (restricted to Developers)
Foot layout row (restricted to Developers)
● Developer or Editor adds layout rows to content
row
12
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
Head layout row (restricted to Developers)
Foot layout row (restricted to Developers)
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
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
Head layout row (restricted to Developers)
Foot layout row (restricted to Developers)
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
Grid demo – Element views
● 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
Grid demo – Element views
● 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
Grid demo – Template rows
● 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
Grid demo – Template rows
● 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
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
27
Cloning OpenCms modules
● 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
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 change resource types and references when cloning the formatters module (i.e. without resource types)
29
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
30
Cloning OpenCms modules
● 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
Customizing the cloned module
● 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
Customizing the cloned module
● 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
Customizing the cloned module
● 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