Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

OpenCms Days 2013 - How to update smoothly to OpenCms 9ms 9

4,193 views

Published on

OpenCms 9 provides great new features that build on the success of the “Advanced Direct Edit” (ADE) concept introduced with version 8. Updating from OpenCms 8 to version 9 is easy and straightforward. Updating from OpenCms 7 to 9 is also easy, but you won’t be able to use the ADE features without modifying your existing templates .

In this workshop, Michael will share over 2 years of project experience updating OpenCms 7 installations to the ADE template standard. He will show how to create templates that work with version 7 and version 9 content, using shared layout and code. Using this approach, he will explain a step by step method to update a version 7 website, so that it uses all the ADE features of version 9 in the end.

Michael will also show how to add features introduced in version 9 such as individual detail containers to your existing OpenCms 8 installation.

Published in: Technology, News & Politics
  • Be the first to comment

OpenCms Days 2013 - How to update smoothly to OpenCms 9ms 9

  1. 1. Michael Emmerich, Alkacon Software Workshop track How to update smoothly to OpenCms 9 30.09.2013
  2. 2. ● Updating your OpenCms installation ● Building a multi-version template ● Show differences between different template technologies in OpenCms 6,7,8 and 9 ● How to make a template that can be used for all template technologies ● Showcase: Modify a website build with xmlpages and xmlcontents into containerpages for OpenCms 9. ● Make a smooth transition from xmlpages and xmlxontents to continerpages ● Use both technologies at the same time ● Adjust existing xmlcontents 2 Agenda
  3. 3. Updating your OpenCms installation 3
  4. 4. Good news: Your existing OpenCms 8.x webapp will run in OpenCms 9 – without any changes  (Ok, at least if you do not use OpenCms 8.0…) 4 Updating from OpenCms 8 to 9
  5. 5. How to upgrade: Use the OpenCms update wizard! 5 Updating from OpenCms 8 to 9
  6. 6. Good news: Your existing OpenCms 7.x webapp will run in OpenCms 9 – most likely without any changes  We will see this in the showcase later 6 Updating from OpenCms 7 to 9
  7. 7. How to upgrade: Use the OpenCms update wizard! Switch to Containerpage-technology. 7 Updating from OpenCms 7 to 9
  8. 8. Because of several API changes between OpenCms 6 and newer versions, your existing OpenCms 6.x webapp will require some changes to run in OpenCms 9 8 Updating from OpenCms 6 to 9
  9. 9. How to upgrade: Make a fresh OpenCms 9 installation and import your modules and content Switch to Containerpage-technology. 9 Updating from OpenCms 6 to 9
  10. 10. Building a multi-version template 10
  11. 11. Different technologies in different OpenCms versions require different templates: ● XML-Pages (OpenCms 6 and 7) ● XML-Contents (OpenCms 6 and 7) ● Containerpages (OpenCms 8 and 9) Make a template that can be used for all those technologies Allows smooth transition between different technologies 11 Multi version template
  12. 12. <html> <head> […] <cms:editable /> </head> <body> […] <cms:include element=„body“ editable=„true“> […] </body> </html> 12 Template for XML-pages
  13. 13. <cms:template element=„head“> <html> <head> […] <cms:editable /> </head> <body> […] </cms:template> <cms:template element=„foot“> […] </body> </html> </cms:template> 13 Template for XML-contents
  14. 14. […] <cms:include property=„template“ element=„head“ /> […] // your JSTL/JSP code is here […] <cms:include property =„template“ element=„foot“ /> […] 14 Template for XML-contents Usage in JSPs:
  15. 15. <cms:template element=„head“> <html> <head> […] <cms:editable /> </head> <body> […] </cms:template> <cms:template element=„body“> <cms:include element=„body“ editable=„true“> </cms:template> <cms:template element=„foot“> […] </body> </html> </cms:template> 15 Template for XML-contents/pages
  16. 16. <html> <head> […] <cms:enable-ade /> <cms:headincludes type="css" /> <cms:headincludes type="javascript" /> </head> <body> […] <cms:container name=„main“ type=„name“ … /> […] </body> </html> 16 Template for Containerpages
  17. 17. ● Provide a „Base-Template“ with HTML for a common head and foot ● Individual template files for V6/7 and V8/9 include componentes of the base template ● „Main content area“ defined individual in V6/7 and V8/9 template file ● Important: Different direct edit tags required for pre- containerpage and containerpag template file  Parallel usage of both version, smooth content transition possible 17 Multi-version template (MVT)
  18. 18. 18 MVT- Base <cms:template element=„head“> <html> <head> […] </head> <body> […] </cms:template> <cms:template element=„foot“> […] </body> </html> </cms:template>
  19. 19. 19 MVT– OpenCms 6 and 7 <cms:template element=„head“> <cms:include file=„[Path_to_Base_Template]“ element=„head“ > </cms:template> <cms:template element=„body“> <cms:include element=„body“ editable=„true“> </cms:template> <cms:template element=„foot“> <cms:include file=„[Path_to_Base_Template]“ element=„foot“> </cms:template>
  20. 20. 20 MVT – OpenCms 8 and 9 <cms:include file=„[Path_to_Base_Template]“ element=„head“ > <cms:container name=„left“ type=„left“ … /> <cms:container name=„main“ type=„main“ … /> <cms:container name=„right“ type=„right“ … /> <cms:include file=„[Path_to_Base_Template]“ element=„foot“>
  21. 21. […] <cms:include file=„…“ element=„head“ > <cms:param name=„version“ value=„7“ /> </cms:include> […] 21 MVT – Direct Edit Version Switch […] <cms:include file=„…“ element=„head“ > <cms:param name=„version“ value=„8“ /> </cms:include> […] Usage in template files for containerpages Usage in template files for xml-contents
  22. 22. […] <head> […] <c:choose> <c:when test=“${param.verison eq ‘8‘}“ > <cms:enable-ade /> <cms:headincludes type="css" /> <cms:headincludes type="javascript" /> </c:when> <c:otherwise> <cms:editable /> </c:otherwise> </c:choose> </head> […] 22 MVT – Direct Edit Version Switch
  23. 23. Showcase: Migrate a website to OpenCms 9 23
  24. 24. ● Start with: ● OpenCms 6/7 Website, XML-pages & XML-contents, running on OpenCms 9 ● 6 Steps to do: 1. Build new multiversion template 2. Use new template with XML-pages & XML-contents 3. Enable OpenCms 8/9 sitemap, use new template with container pages 4. Replace XML-pages with new XML-contents & formatters in containerpages 5. Modifiy exisiting XML-contents 6. Content enhancements for OpenCms 9 24 Migrate a website to OpenCms 9
  25. 25. ● Live Demo 25 Live Demo Template-Change Demo Demo Demo Demo デモ
  26. 26. Step 1: Build multiversion template 26
  27. 27. ● Live Demo 27 Live Demo Template Demo Demo Demo Demo デモ
  28. 28. 28 Multiversion template - containers Header (with navigation) Footer Branding Main News
  29. 29. Step 2: Use new template with XML-pages & XML-contents 29
  30. 30. ● If the template was defined at the site folder: ● Change the template at the site folder ● If template was set on each page: ● Use the content-tool to change the template property value 30 Changeing the template
  31. 31. ● Live Demo 31 Live Demo Template-Change Demo Demo Demo Demo デモ
  32. 32. Step 3: Enable OpenCms 8 & 9 sitemap, use new template with containerpages 32
  33. 33. ● How to make our site Sitemap & ADE enabled (Hen & egg problem): ● Change the site folder to a subsitemap ● Create a „sitemap content folder“ in the site, the name MUST be „.content“ ● Inside, create a folder named „.new“ ● Inside, create a model page (containerpage) ● Set the template property of our model page to the new template ● Configure the model page in the sitemap configuration  DONE, we now can use the sitemap to create new pages 33 Enable the sitemap
  34. 34. ● Live Demo 34 Live Demo Enable the sitemap Demo Demo Demo Demo デモ
  35. 35. Step 4: Replace XML-pages with new XML- contents & formatters in containerpages 35
  36. 36. ● Create new module with simple XSD as replacement ● Title, Text, Image in our example ● Add resourcetype in opencms-modules.xml ● Write formatter ● Register the content in the Module-config („.config“ file) new content can now be used 36 Replace XML-pages
  37. 37. […] <xsd:appinfo> […] <mappings> <mapping element="Title" mapto="property:Title" /> <mapping element="Title" mapto="urlName" /> </mappings> […] <formatters> <formatter type="main" uri="/system/modules/org.opencms.mun.article/formatters/ main.jsp" searchcontent="true" /> </formatters> </xsd:appinfo> […] 37 Replace XML-pages
  38. 38. ● Live Demo 38 Live Demo Replace XML-pages Demo Demo Demo Demo デモ
  39. 39. Step 5: Modify existing XML-contents 39
  40. 40. ● Modify the existing XSD ● Formatter, Title and URL mapping ● Write formatter ● Use old detail.jsp for it ● Register the content in the Module-config („.config“ file) Modified content can now be used 40 Modify XML-contents
  41. 41. 41 Transformation into formatter OpenCms 6 & 7 (Detail-JSP) […] <cms:include property="template" element="head" /> <cms:contentload collector="singleFile" param="%(opencms.uri)" editable="true"> <cms:contentaccess var="content" scope="page" /> […] ${content.value.Title} […] </cms:contentload> <cms:include property="template" element="foot" /> OpenCms 8 & 9(Formatter) […] <!–- no template-include --> <cms:formatter var="content" val="value"> <!– no init of contentaccess --> […] ${content.value.Title} […] </cms:formatter> <!–- no template-include -->
  42. 42. ● Typical example: News list ● Move existing news contents to new location under „.content“ ● Define Function Elements ● Can be inserted via Drag&Drop (Dynamic Functions) ● Reuse existing JSPs ● Optional: Make them configurable via settings ● Define Setting in Function Element ● Access setting in JSP ● Define Detailpages 42 Lists of XML contents
  43. 43. 43 Configurable Dynamic Elements […] <c:set var="newspath" value="/.content/news/" /> <c:if test="${not empty cms.element.settings.Path}"> <c:set var="newspath" value="${cms.element.settings.Path}" /> </c:if> […] <cms:contentload collector="allInFolderDateAsc" param="${newspath}news_%(number).html|news|150" editable="true" > […]
  44. 44. ● Live Demo 44 Live Demo Modify XML-contents Demo Demo Demo Demo デモ
  45. 45. Step 6: Content enhancements for OpenCms 9 45
  46. 46. ● New feature in OpenCms 9: Individual Detailpages ● Add new container in template: 46 Individual Detailpages […] <div id="contents"> <cms:container name="branding" type="branding" width="600" detailview="false"/> <cms:container name="brandingDetail" type="branding" width="600" detailonly="true“ <div class="body clearfix"> <cms:container name="main" type="main" width="600" detailview="true"/> </div> </div> […] ● Add individual contents on detailpage
  47. 47. ● Live Demo 47 Live Demo Individual Detailpages Demo Demo Demo Demo デモ
  48. 48. ● Any Questions? 48 Any Questions? Fragen? Questions ? Questiones? ¿Preguntas?質問
  49. 49. Michael Emmerich Alkacon Software GmbH http://www.alkacon.com http://www.opencms.org Thank you very much for your attention! 49

×