Building a complete JSP template
If you have created a new page that uses the simple template from step 1, you will have found out that you can
edit the content of the page and that edited content
is displayed on the page if you open it in the preview or the browser. It works perfect for editable HTML pages.
In this section we will show you how to create a "complete" template.
This is a template that can be used for dynamic JSP as well as for pages editable with the WYSIWYG editor.
The example JSP example-jsp-simple.jsp is a simple form. Have a look at the JSP source code:
<%@ page session="false" %>
<html>
<body>
<h1>A simple form</h1>
<%
String name = request.getParameter("name");
if (name != null) {
%>
<h2>Your name is: <%= name %></h2>
<% } %>
<form name="test" method="get" action="example-jsp-simple.jsp">
<p>Enter your name: <input name="name" size="20" value=""> <input type="submit" value="OK"></p>
</form>
</body>
</html>
It would be handy using the same template which works for HTML pages as well as for dynamic JSP pages, to get the same layout. To achieve this, the
JSP template from the previous example must be extended with <cms:template> tags. Again,
please refer to the OpenCms taglib documentation for all options of the <cms:template> tag.
Here is the "complete" version of the simple template from the previous example. You will find the source code at
/system/modules/com.alkacon.documentation.howto_template/jsptemplates/howto-complete.jsp.
<%@ 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>">
</head>
<body>
<h2>My first template head</h2>
<!-- Main page body starts here -->
</cms:template>
<cms:template element="body">
<cms:include element="body" />
</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, the only changes are the additional <cms:template> tags.
These tags are required so that the template is usable from a JSP.
They are ignored by the pages that are edited with the WYSIWYG editor.
Assure that all parts of the JSP template are enclosed by <cms:template> tags.
To use this adapted template, you just have to add 3 additional lines to your JSP form:
<%@ page session="false" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
<cms:include property="template" element="head" />
<h1>A simple form</h1>
<%
String name = request.getParameter("name");
if (name != null) {
%>
<h2>Your name is: <%= name %></h2>
<% } %>
<form name="test" method="get" action="example-jsp-template.jsp">
<p>Enter your name: <input name="name" size="20" value=""> <input type="submit" value="OK"></p>
</form>
<cms:include property="template" element="foot" />
The JSP includes the "head" and "foot" element of the JSP template specified
in the "template" property of the JSP.
The last thing required for this template to
work correctly is that you must attach a property "template" to the JSP.
The value of the property must be the filename (including path) of your JSP template,
in our example /system/modules/com.alkacon.documentation.howto_template/jsptemplates/howto-complete.jsp.
Actually, you can name the property anything you want because the name is
choosen in the property="template" part of the <cms:include> tag, but we
think the name "template" is a good choice for selecting the template.
Note: Instead of attaching the property
"template" to every JSP individually, you could also attach it to a parent
folder. A JSP that does not have the "template" property set will inherit it
from its parent folder.
The example example-jsp-template.jsp shows the form with the included elements of the JSP template.
Exercise: Create a JSP using the elements of the shown JSP template howto-complete.jsp.
Include the elements several times in various order and look at the output.
Try to create your own complete JSP template and define different <cms:template> parts. Create a new JSP and
include your self-defined parts. Also try to use this
complete template for editable pages in the WYSIWYG editor.
Congratulations! You have succeeded in creating your first "complete" OpenCms JSP template.
Now proceed to the next step of the template howto to learn how to add
direct editable page elements and conditional elements to a template.
|
