opencms days 2013 - how to update smoothly to opencms 9ms 9

Michael Emmerich, Alkacon Software

Workshop track

How to update smoothly

to OpenCms 9

30.09.2013

● 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

Updating your OpenCms

installation

3

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

How to upgrade:

Use the OpenCms update wizard!

5


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


How to upgrade:

Use the OpenCms update wizard!

Switch to Containerpage-technology.

7


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


How to upgrade:

Make a fresh OpenCms 9 installation and

import your modules and content

Switch to Containerpage-technology.

9


Building a multi-version

template

10

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

<html>

<head>

[…]

<cms:editable />

</head>

<body>

[…]

<cms:include element=„body“ editable=„true“>

[…]

</body>

</html>

12

Template for XML-pages

<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

[…]

<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:


<html>

<head>

[…]

<cms:editable />

</head>

<body>

[…]

</cms:template>

<cms:template element=„body“>


</cms:template>


[…]

</body>

</html>

</cms:template>

15

Template for XML-contents/pages

<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

● 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

MVT- Base


<html>

<head>

[…]

</head>

<body>

[…]

</cms:template>


[…]

</body>

</html>

</cms:template>

19

MVT– OpenCms 6 and 7


<cms:include file=„[Path_to_Base_Template]“ element=„head“ >

</cms:template>

<cms:template element=„body“>


</cms:template>


<cms:include file=„[Path_to_Base_Template]“ element=„foot“>

</cms:template>

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“>

[…]

<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

[…]

<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

Showcase:

Migrate a website to OpenCms 9

23

● 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

● Live Demo

25

Live Demo Template-Change

Demo

Demo Demo

Demo

デモ

Step 1:

Build multiversion template

26

● Live Demo

27

Live Demo Template

Demo

Demo Demo

Demo

デモ

28

Multiversion template - containers

Header (with navigation)

Footer

Branding

Main

News

Step 2:

Use new template with XML-pages

& XML-contents

29

● 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

● Live Demo

31

Live Demo Template-Change

Demo

Demo Demo

Demo

デモ

Step 3:

Enable OpenCms 8 & 9 sitemap,

use new template with

containerpages

32

● 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

● Live Demo

34

Live Demo Enable the sitemap

Demo

Demo Demo

Demo

デモ

Step 4:

Replace XML-pages with new XML-

contents & formatters in

containerpages

35

● 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

[…]

<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

● Live Demo

38

Live Demo Replace XML-pages

Demo

Demo Demo

Demo

デモ

Step 5:

Modify existing XML-contents

39

● 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

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

● 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

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" >

[…]

● Live Demo

44

Live Demo Modify XML-contents

Demo

Demo Demo

Demo

デモ

Step 6:

Content enhancements for

OpenCms 9

45

● 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

● Live Demo

47

Live Demo Individual Detailpages

Demo

Demo Demo

Demo

デモ

● Any Questions?

48

Any Questions?

Fragen? Questions ?

Questiones?

¿Preguntas? 質問

Michael Emmerich

Alkacon Software GmbH

http://www.alkacon.com

http://www.opencms.org

Thank you very much for your

attention! 49

opencms days 2013 - how to update smoothly to opencms 9ms 9

Technology