OpenCms 6.0 documentation :: Step 1: Creating a simple JSP template

OpenCms 6.0 interactive documentation:

Step 1: Creating a simple JSP template

[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

A simple JSP template

A "JSP template" in OpenCms is just a normal JSP page that uses special tags to include content at specified positions. For this simple example we will start to develop a JSP template which adds some tags around the content, like <html> or <body>.

This is the JSP template /system/modules/com.alkacon.documentation.howto_template/jsptemplates/howto.jsp:

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

<!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" href="<cms:link>../resources/mystyle.css</cms:link>"> 
</head> 
<body>

<h2>My first template head</h2>

<!-- Main pagebody starts here -->

<cms:include element= "body"/> 

<!--Main pagebody ends here -->

<h2>My first template foot</h2>

</body>
</html>

The taglib directive for the OpenCms taglib description <%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %> must be declared first before you can use any of the OpenCms tags. For a detailed description of the OpenCms taglib, please refer to the OpenCms taglib documentation which is available as a separate module.

Note that the directory where to place a JSP template in a module is a subfolder called templates. Only if the template is stored there, it can be found in the template selection list while creating a new page.

In this example, the title of the page is read from the "title" property of the OpenCms page and placed in the body of the HTML <title> tags. The content encoding of the page is defined in the same way.

The stylesheet is put into the <cms:link> tag. In JSP templates, the path to the stylesheet can be a relative path from the location of the template. It is another convention to create a resources/ subfolder in the module to store all kind of resources like style sheets and images there that belong to the templates of the module. Again, this is optional, but we think it's a good idea.

Note : You can use your CSS stylesheet in the Editor by attaching a property "template" to the JSP template. The value of the property must be the filename (including the full path) of your stylesheet.

The most important line is the <cms:include element="body"> tag which includes the editable body element of the page. Please refer to the OpenCms taglib documentation for all options of the <cms:include> tag.

Let's have a look at the page example-simplepage.html that is build with the described OpenCms master template, which is called "Alkacon documentation howto simple template". You can also create new pages with this template.

Exercise: Create a page that uses this template and edit the content of the page in the editor. Have a look at the page preview. Then try to modify the template's HTML. Perhaps create a new template with a different layout.

Congratulations! You have succeeded in creating your first simple JSP template in OpenCms.

After you feel comfortable with the basics, continue with step 2.