Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

OpenCms Days 2015 Modern templates with nested containers

Nested containers, introduced in OpenCms 9.5, have added a whole new dimension of flexibility for template development. They provide web developers with the ability to generate complex page layouts “on the fly” without digging too deep into OpenCms specific programming.

In this session, advanced template use cases are demonstrated developed by Alkacon the in past 12 months with OpenCms 9.5. These include nested containers that generate their own HTML structure as well as flexible CSS classes to be used in element settings.

This session will also provide insights about the improvements planned for the template mechanism in OpenCms 10, such as model groups and an enhanced template management. It is explained what will be in the new demo template that will be published with 10 and show the current working prototype.

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

OpenCms Days 2015 Modern templates with nested containers

  1. 1. Andreas Zahner, Alkacon Software Modern templates with nested containers 28.09.2015
  2. 2. ● The new Unify demo template ● Overview ● Formatters and their element settings for different use cases ● Creating page layouts using nested containers ● Recap: What are nested containers? ● Advanced formatter logic for nested container creation ● Flexible HTML structure creation with template rows ● Model groups ● What are model groups? ● The advantages of model groups ● Creation, settings and usage of model groups ● Template development with SASS ● Advantages of using SASS ● Necessary components, plugins ● Grunt configuration example 2 Agenda
  3. 3. The new Unify demo template3
  4. 4. ● Based on Bootstrap 3.3.5 / jQuery 1.11.3 ● Unify theme 1.8 (available from http://www.wrapbootstrap.com) ● Additional content types: ● Event ● Map ● Better CSS / JS handling by using minified files generated with SASS and Grunt 4 Overview
  5. 5. ● Enhancements and changes based on experience made with demo template of OpenCms 9.x ● Improved styling of contents using element settings to add CSS class names ● Additional formatters for contents provide more display variations ● Improved search functionality using the <cms:search> tag (see workshop track tomorrow) 5 Overview
  6. 6. ● Improved layout generation with only 2 element views (Default / Template) instead of 3 ● Better separation of development and editing ● Experienced web developers create the main page layout with template rows ● No need to generate HTML from scratch ● Full control over the page HTML structure ● Easy creation of given page structures ● Editors without technical knowledge use the generated page templates and fill them with contents 6 Overview
  7. 7. ● New support for image drag and drop ● Images can be changed / added to contents using the new image drag and drop functionality ● Formatter JSPs simply have to add the following code ● The images' xPath is passed as parameter to the "imageDnd" method 7 Image drag and drop <cms:formatter var="content" val="value" rdfa="rdfa"> ... <img src="<cms:link>${value.Image}</cms:link>" class="..." ${content.imageDnd['Image']} alt="..." />
  8. 8. ● The formatters for the Unify demo use element settings to directly apply CSS class names to the HTML structure ● This allows experienced users full control over the styles used to generate the output ● The formatter JSPs contain less logic to generate the HTML / CSS structure ● Alternative formatters can be added to provide settings that can be used by non-technical editors 8 Formatters & their element settings
  9. 9. ● Full control over the applied CSS classes ● Maximum layout flexibility ● For experienced web developers ● Only a limited set of layout variations ● No technical knowledge required ● Easy to understand 9 CSS class settings Predefined options settings Formatters & their element settings Which kind of formatter settings is "better" depends on the project requirements
  10. 10. ● The text content type provides different formatters demonstrating the different approaches: ● Text as Icon Box Formatter (CSS) ● The wrapper CSS classes and icon CSS classes have to be entered manually (using Combo box widgets) ● Text as Icon Box Formatter (Settings) ● Options for the color, rounded box corners ● Selection of the icon that should be displayed Limitation of color, icon types and icon size 10 Formatters & their element settings
  11. 11. ● Live Demo 11 Live Demo Demo Demo Demo Demo デモ
  12. 12. Creating page layouts using nested containers 12
  13. 13. ● Short definition: Nested containers are containers that are placed inside other containers ● They can be created by formatter JSPs or included JSP elements ● Advantage: by using nested containers, more flexible layouts, pages and contents can be created 13 What are nested containers?
  14. 14. ● Nested containers are not part of the content itself ● If you place the content that renders the nested container a second time on the same or a different page, the elements in the nested container will not be inserted. For each element instance of the content that renders the nested container, the container is completely independent. ● Nested containers are tied to a container page element ● If you move a content that renders a nested container on a page (and the formatter does not change), the element in the nested container will move with it. If you remove the content, or change its formatter, the nested container will vanish and its elements are not visible anymore. 14 What are nested containers?
  15. 15. ● Nested containers are similar to normal containers managed by the container page ● When a content that creates a nested container is added to a page, the container will be stored similar to a top-level container in the container page ● The only additional information is the element ID of the container's parent element ● When an element that created a nested container is removed from a page, also the information about the nested container is removed from the container page 15 What are nested containers?
  16. 16. ● The new Unify demo pages are built using template row elements that are placed in other template row elements ● To make this operable, specific template rows are only droppable in containers that match the needed container type 16 Advanced formatter logic for nested container creation
  17. 17. ● Template row content example 17 Advanced formatter logic for nested container creation Sets the matching container type
  18. 18. ● If the row does not match, no HTML output is generated by the template row formatter ● Result: the page editor only marks the matching containers as drop zones 18 Advanced formatter logic for nested container creation <c:choose> <c:when test="${!content.value.Container.isSet || (content.value.Container.isSet && fn:containsIgnoreCase(cms.container.type, content.value.Container))}"> </c:when> <c:otherwise> <%-- Required Container does not match, don't generate output --%> </c:otherwise> </c:choose>
  19. 19. Advanced formatter logic for nested container creation 19 Page container (page) Template row "Header" (headsection) Template row "Footer" (footsection) Template row "Main section" (mainsection) Template row "Container" or "Container Fluid" (container) Template row "Column" (default) Content Content Template row "Column" (default) Content Content Content
  20. 20. ● Wrapper HTML of template row containers can optionally be defined in the content ● This allows the developer full control over the generated HTML structure 20 Flexible HTML structure creation
  21. 21. ● The $(param) allows to add optional wrapper CSS class names to the HTML in the element settings dialog ● More possible settings are ● Link: Pass a link to the wrapper HTML structure using the $(link) macro ● CSSHints: CSS classes than can be passed to child elements ● Detail page settings: define detail or detail ony containers 21 Flexible HTML structure creation
  22. 22. ● Formatter logic to generate the pre markup 22 Flexible HTML structure creation ... <c:if test="${content.value.PreMarkup.isSet}"> <c:set var="preMarkup" value="${fn:replace(content.value.PreMarkup, '$(param)', cms.element.setting.param.value)}" /> <c:set var="link" value="" /> <c:if test="${cms.element.setting.link.isSet}"> <c:set var="link"> <cms:link>${cms.element.setting.link}</cms:link> </c:set> </c:if> ${fn:replace(preMarkup, '$(link)', link)} </c:if> ...
  23. 23. ● For each created container of a template row, pre and post markup can optionally be defined ● The class names have to be set in the "Grid Class" field of the container, e.g. "col-xs-6 col- md-3" ● With that approach, even complex responsive behaviour (like push / pull of columns for specific cases) can easily be defined by the developer 23 Flexible HTML structure creation
  24. 24. ● Live Demo 24 Live Demo Demo Demo Demo Demo デモ
  25. 25. Model groups25
  26. 26. ● Model groups are pre defined content structures that can be used by editors to generate commonly used page items ● Example: creation of an "article" that is composed of a text element with an image to the left or right 26 What are model groups?
  27. 27. ● No need for the editor to create more complex layout structures from scratch ● More efficient workflow: ● Often used structures can be created with one click ● Content elements of model groups can be reused or copied depending on their use case 27 The advantages of model groups
  28. 28. ● Model groups are maintained in the sitemap editor ● Change the view to "Templates" to get a list of Templates and existing model group pages 28 Creation of model groups
  29. 29. ● Edit a model group page to change existing model groups or create new ones ● Example: ● Drop a template row which you want to use as model wrapper to the page ● Edit the element settings of this template row to create a model group based on that row and its contents ● Add other contents to the template row columns, edit their element settings if needed ● A content of type "modelgroup" is created automatically by OpenCms in the current sitemap ".content/modelgroup/" folder 29 Creation of model groups
  30. 30. ● In addition to the common element settings of a content element, model groups have special settings 30 Settings of model groups
  31. 31. ● Use as group: This is set at the outer content element, usually a template row. If a model group is dropped on a page, two different behaviours can be configured: ● Copy elements: all content elements belonging to the model group are copied if dropped on a page ● Reuse elements: all content elements belonging to the model group are reused ● Important: The outer element itself is always reused! ● Group title, Group description: Should contain information about the model group 31 Settings of model groups
  32. 32. ● Each content element that is part of a model group (except the wrapping element) can be configured to either be copied or reused 32 Settings of model groups
  33. 33. ● Available model groups are listed in the "Add content" dialog of the page editor and can be dropped on the page like other content elements 33 Usage of model groups
  34. 34. ● Reusable model groups like header and footer cannot be edited on the pages where they are used ● The only way to edit them is to change to the model page with these groups ● They have different icons to identify them in the list of avaible model groups (blue) 34 Usage of model groups
  35. 35. ● Live Demo 35 Live Demo Demo Demo Demo Demo デモ
  36. 36. Template development with SASS36
  37. 37. ● Definable variables ● Operational functions (e.g. lighten, darken) ● Joining of multiple files ● Fewer HTTP requests by creating one large (minified) CSS file ● Reusable color schemes for theming ● In combination with Grunt: ● Better development workflow ● Faster development 37 Advantages of using SASS
  38. 38. 38 Advantages of using SASS Excerpt from defaultcolors.scss ... // Main colors $alkacon-red: #b31b34; $alkacon-blue: #144382; ... $blue: $alkacon-blue; $blue-light: #2197db; // handmade looks better $blue-lighter: lighten($blue-light, 42%); $blue-dark: darken($blue, 10%); $blue-darker: darken($blue, 15%); $red: $alkacon-red; $red-light: #ff264a; // handmade looks better $red-lighter: lighten($red-light, 37%); $red-dark: darken($red, 9%); $red-darker: darken($red, 21%); ... ● Example: Unify template default colors SCSS file
  39. 39. ● Example: Unify template red SCSS file 39 Advantages of using SASS Excerpt from style-red.scss ... // Import default colors @import 'defaultcolors'; // Main theme colors $main-theme: $red; $main-theme-hover: $red-light; $main-theme-additional: $red-lighter; // Navigation colors $nav-main-bg: $white; $nav-main-color: $navigation-text; ... // Import the other files @import 'imports';
  40. 40. ● Node.js (JavaScript runtime): https://nodejs.org ● Grunt (Task runner) ● grunt-cli (Command line interface) ● grunt-contrib-watch ● grunt-contrib-sass ● grunt-contrib-cssmin ● grunt-contrib-uglify ● grunt-contrib-copy ● Ruby: https://www.ruby-lang.org ● Gem: sass 40 Necessary components, plugins
  41. 41. ● Gruntfile.js excerpt from Unify demo template ● Task "sass": 41 Grunt configuration example sass: { dist: { options: { sourcemap: 'auto', lineNumbers: true, style: 'nested', }, { expand: true, cwd: 'components/scss', src: ['style-red.scss'], dest: 'output/resources/css', ext: '.css' } ] } },
  42. 42. ● Task "copy": 42 Grunt configuration example copy: { main: { files: [{ expand: true, flatten: true, src: ['output/resources/css/*.min.css'], dest: '/path-to-vfs-mount/ …/com.alkacon.unify.basics/resources/css/', filter: 'isFile' },{ expand: true, flatten: true, src: ['output/resources/js/*.min.js'], dest: '/path-to-vfs-mount/ …/com.alkacon.unify.basics/resources/js/', filter: 'isFile' }], }, },
  43. 43. ● Live Demo 43 Live Demo Demo Demo Demo Demo デモ
  44. 44. 44 Any Questions? ● Any Questions? Fragen? Questions ? Questiones? ¿Preguntas?質問
  45. 45. Andreas Zahner Alkacon Software GmbH http://www.alkacon.com http://www.opencms.org Thank you very much for your attention! 45