With OpenCms version 9.5 comes a new and extended default template based on the popular Bootstrap HTML framework. Using the latest 9.5 features, this responsive template has been created with a “snap to grid” based layout. Dynamic formatters interact with the context in which they are used and adjust their output to match the available screen columns. Also included are further 9.5 additions like PDF generation and User Generated Content. In this workshop, Andreas provides you an overview about the features of the new template and how it has been build. He explains how to create a new template model visually using nested containers without any programming required. Moreover, he demonstrates how to copy the demo template and use it as a base for your own customizations.

1. Andreas Zahner, Alkacon Software
Workshop Track Responsive Bootstrap templates reloaded
04.11.2014

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

22. ●Live Demo
22
Live Demo
Demo
Demo
Demo
Demo
デモ

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

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

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

26. ●Use the function "Clone Module" that is part of the Module Management for clone operations
26
Cloning OpenCms modules

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

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

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

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

31. ●Live Demo
31
Live Demo
Demo
Demo
Demo
Demo
デモ

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

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

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

35. ●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.CmsDefaultTemplateContextProvider,template=/system/modules/com. mycompany.formatters/templates/my-page.jsp"
35
Customizing the cloned module

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

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