OpenCms Days 2013 - How to update smoothly to OpenCms 9ms 9
3 likes4,545 views
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.
![<html>
<head>
[…]
<cms:editable />
</head>
<body>
[…]
<cms:include element=„body“ editable=„true“>
[…]
</body>
</html>
12
Template for XML-pages](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-12-320.jpg)
![<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](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-13-320.jpg)
![[…]
<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:](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-14-320.jpg)
![<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](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-15-320.jpg)
![<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](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-16-320.jpg)
![18
MVT- Base
<cms:template element=„head“>
<html>
<head>
[…]
</head>
<body>
[…]
</cms:template>
<cms:template element=„foot“>
[…]
</body>
</html>
</cms:template>](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-18-320.jpg)
![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>](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-19-320.jpg)
![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“>](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-20-320.jpg)
![[…]
<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](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-21-320.jpg)
![[…]
<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](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-22-320.jpg)
![[…]
<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](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-37-320.jpg)
![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 -->](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-41-320.jpg)
![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" >
[…]](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-43-320.jpg)
![● 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](https://image.slidesharecdn.com/opencmsdays2013-howtoupdatesmoothlytoopencms9-131009064957-phpapp02/85/OpenCms-Days-2013-How-to-update-smoothly-to-OpenCms-9ms-9-46-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (12)
Ad
Similar to OpenCms Days 2013 - How to update smoothly to OpenCms 9ms 9 (20)
Ad
More from Alkacon Software GmbH & Co. KG (10)
Recently uploaded (20)
OpenCms Days 2013 - How to update smoothly to OpenCms 9ms 9
- 1. Michael Emmerich, Alkacon Software Workshop track How to update smoothly to OpenCms 9 30.09.2013
- 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
- 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. How to upgrade: Use the OpenCms update wizard! 5 Updating from OpenCms 8 to 9
- 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. How to upgrade: Use the OpenCms update wizard! Switch to Containerpage-technology. 7 Updating from OpenCms 7 to 9
- 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. 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
- 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. <html> <head> […] <cms:editable /> </head> <body> […] <cms:include element=„body“ editable=„true“> […] </body> </html> 12 Template for XML-pages
- 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. […] <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. <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. <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. ● 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 MVT- Base <cms:template element=„head“> <html> <head> […] </head> <body> […] </cms:template> <cms:template element=„foot“> […] </body> </html> </cms:template>
- 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 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. […] <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. […] <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. Showcase: Migrate a website to OpenCms 9 23
- 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. ● Live Demo 25 Live Demo Template-Change Demo Demo Demo Demo デモ
- 26. Step 1: Build multiversion template 26
- 27. ● Live Demo 27 Live Demo Template Demo Demo Demo Demo デモ
- 28. 28 Multiversion template - containers Header (with navigation) Footer Branding Main News
- 29. Step 2: Use new template with XML-pages & XML-contents 29
- 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. ● Live Demo 31 Live Demo Template-Change Demo Demo Demo Demo デモ
- 32. Step 3: Enable OpenCms 8 & 9 sitemap, use new template with containerpages 32
- 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. ● Live Demo 34 Live Demo Enable the sitemap Demo Demo Demo Demo デモ
- 35. Step 4: Replace XML-pages with new XML- contents & formatters in containerpages 35
- 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. […] <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. ● Live Demo 38 Live Demo Replace XML-pages Demo Demo Demo Demo デモ
- 39. Step 5: Modify existing XML-contents 39
- 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 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. ● 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 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. ● Live Demo 44 Live Demo Modify XML-contents Demo Demo Demo Demo デモ
- 45. Step 6: Content enhancements for OpenCms 9 45
- 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. ● Live Demo 47 Live Demo Individual Detailpages Demo Demo Demo Demo デモ
- 48. ● Any Questions? 48 Any Questions? Fragen? Questions ? Questiones? ¿Preguntas?質問
- 49. Michael Emmerich Alkacon Software GmbH http://www.alkacon.com http://www.opencms.org Thank you very much for your attention! 49