OpenCms Days 2013 - Bootstrap your templates


Published on

OpenCms 9 ships with a new default template based on the popular Bootstrap HTML framework.

One of the main reasons why Bootstrap is so popular is the ability to develop websites fast and its support for responsive design. The new OpenCms 9 default template provides a set of content types specifically created for Bootstrap, as well as a set of HTML layouts for commonly used pages.

In this workshop, Andreas will explain how to create an individual OpenCms template based on Bootstrap, using the new default template as a base. To do achieve this, he will copy the provided HTML module and customize the output. Then he shows how to add custom content type definitions that extends the default schema module.

Published in: Technology, Spiritual
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

OpenCms Days 2013 - Bootstrap your templates

  1. 1. Andreas Zahner, Alkacon Software Workshop Track Bootstrap your templates with OpenCms 9 09.10.2013
  2. 2. ● 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
  3. 3. ● 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
  4. 4. ● 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
  5. 5. ● 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
  6. 6. ● 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. 7. 7 Bootstrap template - Containers ● Screenshot of container structure
  8. 8. ● Currently available content types: ● Flexible Content ● Image Row ● Hero / Jumbotron ● News Article ● Product ● Slider ● Tabs / Accordion ● Text Block 8 Bootstrap template - Types
  9. 9. ● 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
  10. 10. ● Use the dynamic function "Clone a module" that is part of the demo formatter module for clone operations 10 Cloning OpenCms modules
  11. 11. ● The function form uses the Java bean "CmsCloneModule" of the OpenCms core package "" ● 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
  12. 12. ● 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
  13. 13. ● 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
  14. 14. ● 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
  15. 15. ● Live Demo 15 Live Demo Demo Demo Demo Demo デモ
  16. 16. ● 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
  17. 17. ● 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
  18. 18. ... <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=" |%(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
  19. 19. ● 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">
  20. 20. ● 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>${ 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>${ lue.URI}</cms:link>">${paragraph.value.Li nk.value.Text}</a></p> </c:if> ...
  21. 21. ● 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
  22. 22. ● 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
  23. 23. ● After these steps, you can start creating your pages with the cloned template and formatters 23 Customizing the cloned module
  24. 24. ● Live Demo 24 Live Demo Demo Demo Demo Demo デモ
  25. 25. ● 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
  26. 26. ● 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="" 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> ...
  27. 27. ● 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
  28. 28. ● 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="" 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=""/> </explorertype> </explorertypes> </module>
  29. 29. ● 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
  30. 30. ● Localize the editor elements and eventual frontend output 30 Add a new content type
  31. 31. ● Resulting feature content in OpenCms 31 Add a new content type
  32. 32. ● Live Demo 32 Live Demo Demo Demo Demo Demo デモ
  33. 33. ● Any Questions? 33 Any Questions? Fragen? Questions ? Questiones? ¿Preguntas?質問
  34. 34. Andreas Zahner Alkacon Software GmbH Thank you very much for your attention! 34