OpenCms 6.0 documentation :: Step 3: Creating a JSP Template with multiple page elements

OpenCms 6.0 interactive documentation:

Step 3: Creating a JSP Template with multiple page elements

[Alkacon Documentation]

Template Howto

Contents

Step 1: A simple JSP template

Step 2: A complete JSP template

* Step 3: Creating a JSP Template with multiple page elements

Step 4: Using a JSP template from a scriptlet

Building a complete JSP template with multiple and direct editable page elements

In the previous step, you have created a complete JSP template with "head" and "foot" elements. Now we will use this template to make the page element content directly editable from the frontend and add multiple page elements on it.

First, we must mark the template as "direct editable", this is done by adding the <cms:editable> tag to the HTML head in the template. The include of the page element itself must be extended with the editable attribute, both modifications are shown below.

<%@ page session="false" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>

<cms:template element="head">

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><cms:property name="title" escapeHtml="true" /></title>

<meta HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; CHARSET=<cms:property name="content-encoding" default="ISO-8859-1" />">

<link type="text/css" rel="stylesheet" href="<cms:link>../resources/mystyle.css</cms:link>">

<cms:editable />

</head>
<body>

<h2>My first template head</h2>

<!-- Main page body starts here -->
</cms:template>

<cms:template element="body">
<cms:include element="body" editable="true"/>

</cms:template>

<cms:template element="foot">
<!-- Main page body ends here -->

<h2>My first template foot</h2>

</body>
</html>
</cms:template>

You can see an example for the usage of such a template in the example page editable.html.

The next extension is the use of multiple page elements in one template. With the <cms:template> tag, you can add control structures to the template which allows it to deal with multiple page elements.

<%@ page session="false" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>

<cms:template element="head">

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><cms:property name="title" escapeHtml="true" /></title>

<meta HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; CHARSET=<cms:property name="content-encoding" default="ISO-8859-1" />">

<link type="text/css" rel="stylesheet" href="<cms:link>../resources/mystyle.css</cms:link>">

<cms:editable />

</head>
<body>

<h2>My first template head</h2>

<!-- Main page body starts here -->
</cms:template>

<cms:template element="body">

<h2>This is the first page element:</h2>

<cms:include element="body" editable="true"/>

<cms:template ifexists="body2">
<h2>This is the second page element:</h2>
<cms:include element="body2" editable= "true"/>
</cms:template>


</cms:template>

<cms:template element="foot">
<!-- Main page body ends here -->

<h2>My first template foot</h2>

</body>
</html>
</cms:template>

As you can see, everything inside the tag will only be included in the output, if your page contains a page element named "body2". For a complete description of all possible control structures, see the documentation of the <cms:template> tag.

Now that you have modified the template itself, we must tell the editor, that the template can display a second page element as well. Therefore, you have to modifiy the value of the template-elements property of the template to: body*|Body,body2|2nd Body. Page elements that are mandatory are marked with a star "*", the string after the pipe "|" specifies the nice name of the element.

See the example for such a page at twoelements.html.

You will find the source code for the template at /system/modules/com.alkacon.documentation.howto_template/jsptemplates/howto-editable.jsp.

Congratulations! You have succeeded in creating your first "complete" OpenCms JSP template with direct edit and multiple pages.

Now proceed to the last step of the template howto to learn about JSP scriptlet options.