After creating the master template, you have to define a corresponding 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
:
<%@ page session="false" %> <%@ 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 is defined by the path set in the master template (see the previous page). By convention, we always place JSP templates in a module subfolder called jsptemplates/
which we create when needed. We recommend you follow this convention, but from the technology-only point of view this is optional.
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 already used in the master template is used again in the JSP template, in the body of 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.
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 3.
]]> After creating the master template, you have to define
a corresponding 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
:
<%@ page session="false" %> <%@ 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 is defined by the path set in the
master template (see the previous page). By convention, we always place JSP
templates in a module subfolder called jsptemplates/
which we create when needed. We
recommend you follow this convention, but from the technology-only point of view this is
optional.
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 already used in the master template is used
again in the JSP template, in the body of 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.
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 3.
]]>