Crear un portal en OpenCMS8: 3.Crear un módulo de template

davidrod OpenCms

En esta entrada vamos a crear un módulo para dar estilo a nuestro portal. Vamos a plantear dos páginas diferentes. Una para la página inicial, donde irán las noticias y eventos en dos columnas, y el resto de las páginas con un menú a la izquierda, una parte central y un espacio a la derecha.

Ejemplo de página principal
Ejemplo de página principal


Empezaremos creando un módulo para este tipo. Para ello vamos al interfaz de administrador -> Gestión de módulos -> Módulo nuevo. En nuestro caso será el paquete “es.uva.web.portal.template” y seleccionamos que cree todas las carpetas..

Después nos vamos al explorador y cambiamos el sitio a “/”. A partir de aquí debemos ir a la carpeta del nuevo módulo creado: /system/modules/es.uva.web.portal.template/ donde tendremos tantas carpetas como hayamos indicado al crear el módulo.

1. Dentro de elementos vamos a tener diversos contenidos que nos ayudarán a reutilizar y simplificar el template. En nuestro caso vamos a tener:

  • header.jsp con el campo «head» de la página
  • footer.jsp con el pie de la página
  • cabecera.jsp con la cabecera de la página que contiene el logo y una imagen.
  • menu/nav_main.jsp con el menú de navegación principal.
  • menu/nav_breadcrumb.jsp con las «miguitas» que indican nuestra situación en el portal.
  • menu/nav_side.jsp con el menú de navegación izquierdo.

Vamos a ver rápidamente el código de estas páginas.

1.1 Header.jsp

<%@page buffer="none" session="false" taglibs="c,cms,fn" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=${cms:vfs(pageContext).requestContext.encoding}">
<title><cms:info property="opencms.title" /></title>
<meta name="description" content="<cms:property name="Description" file="search" default="" />">
<meta name="keywords" content="<cms:property name="Keywords" file="search" default="" />">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="7 days">
<cms:enable-ade/>
<c:set var="cols"><cms:property name="style.columns" file="search" default="3" /></c:set>
<link rel="shortcut icon" href="<cms:link>%(link.strong:/system/modules/es.uva.web.portal.template/resources/images/favicon.ico)</cms:link>"></link>
<link rel="stylesheet" type="text/css" href="<cms:link>%(link.strong:/system/modules/es.uva.web.portal.template/resources/css/estilo.css)</cms:link>"></link>
<cms:headincludes type="css" />
<cms:headincludes type="javascript" />
</head>

1.2 Footer.jsp

<%@page buffer="none" session="false" taglibs="c,cms,fn" %>
<!-- footer -->
<div id="footer">
<ul>
<li class="en_linea"> &copy; Universidad de Valladolid |</li>
<li class="en_linea"> Aviso legal |</li>
<li class="en_linea"> Contacto</li>
</ul>
</div>

1.3 Cabecera.jsp

<%@page buffer="none" session="false" taglibs="c,cms,fn" %>
<!-- Cabecera -->
<div class="cabecera">
<div class="logo">
<a href=""><img src="<cms:link>%(link.strong:/system/modules/es.uva.web.portal.template/resources/images/logo.jpg)</cms:link>" alt="Universidad de Valladolid" title="Universidad de Valladolid"></a>
</div>
<img class="cabecera_impresion" src="<cms:link>%(link.strong:/system/modules/es.uva.web.portal.template/resources/images/cabecera.jpg)</cms:link>" alt="Universidad de Valladolid" title="Universidad de Valladolid" align="right">
</div>

1.4 menu/nav_main.jsp

<%@page buffer="none" session="false" taglibs="c,cms,fn" %>

<c:set var="navStartLevel" ><cms:property name="NavStartLevel" file="search" default="0" /></c:set>
<cms:navigation type="forFolder" startLevel="${navStartLevel}" var="nav"/>
<div id="nav_main" class="gradient">
<c:if test="${!empty nav.items}">
<ul>
<c:set var="oldLevel" value="" />
<c:forEach items="${nav.items}" var="elem">
<c:set var="currentLevel" value="${elem.navTreeLevel}" />

<c:choose>
<c:when test="${empty oldLevel}"></c:when>
<c:when test="${currentLevel > oldLevel}"><ul></c:when>
<c:when test="${currentLevel == oldLevel}"></li></c:when>
<c:when test="${oldLevel > currentLevel}">
<c:forEach begin="${currentLevel+1}" end="${oldLevel}"></li></ul></c:forEach>
</c:when>
</c:choose>

<li>
<a href="<cms:link>${elem.resourceName}</cms:link>" <c:choose><c:when test="${fn:startsWith(cms.requestContext.uri, elem.resourceName)}">class="gradient current"</c:when><c:otherwise>class="gradient"</c:otherwise></c:choose>>${elem.navText}</a>

<c:set var="oldLevel" value="${currentLevel}" />
</c:forEach>

<c:forEach begin="${navStartLevel+1}" end="${oldLevel}"></li></ul></c:forEach>
</ul>
</c:if>
</div>

1.5 menu/nav_breadcrumb.jsp

<%@page buffer="none" session="false" taglibs="c,cms,fn" %>
<c:set var="navStartLevel" ><cms:property name="NavStartLevel" file="search" default="0" /></c:set>
<cms:navigation type="breadCrumb" startLevel="${navStartLevel+1}" endLevel="-1" var="nav" param="true" />

<c:set var="first" value="true" />
<c:forEach items="${nav.items}" var="elem">
<c:set var="navText">${elem.navText}</c:set>
<c:if test="${empty navText or fn:contains(navText, '??? NavText')}">
<c:set var="navText">${elem.title}</c:set>
</c:if>
<c:if test="${!empty navText}">
<c:if test="${!first}">&nbsp;»&nbsp;</c:if>
<a href="<cms:link>${elem.resourceName}</cms:link>">${navText}</a>
<c:set var="first" value="false" />
</c:if>
</c:forEach>

<c:set var="navTextOnFolder" value="${navText}" />
<c:set var="navText"><cms:property name="NavText" /></c:set>
<c:if test="${empty navText or fn:contains(navText, '??? NavText')}">
<c:set var="navText"><cms:property name="Title" /></c:set>
</c:if>
<c:if test="${!empty navText and (navText ne navTextOnFolder)}">
<c:if test="${!first}">
&nbsp;»&nbsp;
</c:if>
<c:out value="${navText}" />
</c:if>

1.6 menu/nav_side.jsp

<%@page buffer="none" session="false" taglibs="c,cms,fn" %>
<c:set var="navStartLevel" ><cms:property name="NavStartLevel" file="search" default="0" /></c:set>
<cms:navigation type="treeForFolder" startLevel="${navStartLevel + 1}" endLevel="${navStartLevel + 3}" var="nav"/>
<div id="nav_left">
<ul>
<c:set var="oldLevel" value="" />
<c:forEach items="${nav.items}" var="elem">
<c:set var="currentLevel" value="${elem.navTreeLevel}" />
<c:choose>
<c:when test="${empty oldLevel}"></c:when>
<c:when test="${currentLevel > oldLevel}"><ul></c:when>
<c:when test="${currentLevel == oldLevel}"></li></c:when>
<c:when test="${oldLevel > currentLevel}">
<c:forEach begin="${currentLevel+1}" end="${oldLevel}"></li></ul></c:forEach></li>
</c:when>
</c:choose>

<li><a href="<cms:link>${elem.resourceName}</cms:link>" <c:if test="${nav.isActive[elem.resourceName]}">class="current"</c:if>>${elem.navText}</a>

<c:set var="oldLevel" value="${currentLevel}" />
</c:forEach>

<c:forEach begin="${navStartLevel}" end="${oldLevel}"></li></ul></c:forEach>
<c:if test="${not empty nav.items}"></li></c:if>
</ul>
</div>

2. Creados los elementos vamos a crear las dos páginas del template dentro de la carpeta template.

2.1 frontpage.jsp

<%@page buffer="none" session="false" taglibs="c,cms,fn" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<cms:include file="%(link.weak:/system/modules/es.uva.web.portal.template/elements/header.jsp)" />
<body>
<div class="contenedor">
<!-- begin: cabecera -->
<cms:include file="%(link.weak:/system/modules/es.uva.web.portal.template/elements/cabecera.jsp)" />
<!-- end: cabecera --></code>

<!-- begin: main navigation -->
<cms:include file="%(link.weak:/system/modules/es.uva.web.portal.template/elements/menu/nav_main.jsp)" />
<!-- end: main navigation -->

<!-- begin: breadcrumb -->
<div id="breadcrumb">
<cms:include file="%(link.weak:/system/modules/es.uva.web.portal.template/elements/menu/nav_breadcrumb.jsp)" />
</div>
<!-- end: breadcrumb -->

<!-- begin: content area #main -->
<div id="main">

<!-- begin: left column -->
<div id="col4">
<div id="col4_content" class="clearfix">
<!-- anchor for accessible link to main content -->
<a id="content" name="content"></a>
<cms:container name="leftcontainer" type="center" width="300" maxElements="8" detailview="true"/>
</div>
<div class="clear">&nbsp;</div>
</div>
<!-- end: left column -->
<!-- begin: right column -->
<div id="col5">
<div id="col5_content" class="clearfix">
<!-- anchor for accessible link to main content -->
<a id="content" name="content"></a>
<cms:container name="rightcontainer" type="center" width="300" maxElements="8" detailview="true"/>
</div>
<div class="clear">&nbsp;</div>
</div>
<!-- end: right column -->
<div class="clear">&nbsp;</div>
</div>
<!-- end: content area -->

<!-- begin: #footer -->
<cms:include file="%(link.weak:/system/modules/es.uva.web.portal.template/elements/footer.jsp)" />
<!-- end: #footer -->
<!-- end: #page -->
</div>

</body></html>

2.2 main.jsp

<%@page buffer="none" session="false" taglibs="c,cms,fn" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<cms:include file="%(link.weak:/system/modules/es.uva.web.portal.template/elements/header.jsp:0d7d1a1b-4686-11e1-9cda-dd53e398b2ed)" />
<body>
<div class="contenedor">
<!-- begin: cabecera -->
<cms:include file="%(link.weak:/system/modules/es.uva.web.portal.template/elements/cabecera.jsp:640f026d-4687-11e1-9cda-dd53e398b2ed)" />
<!-- end: cabecera --></code>

<!-- begin: main navigation -->
<cms:include file="%(link.weak:/system/modules/es.uva.web.portal.template/elements/menu/nav_main.jsp:fb833b27-4131-11e1-9e7c-dd53e398b2ed)" />
<!-- end: main navigation -->

<!-- begin: breadcrumb -->
<div id="breadcrumb">
<cms:include file="%(link.weak:/system/modules/es.uva.web.portal.template/elements/menu/nav_breadcrumb.jsp:07b79eed-4132-11e1-9e7c-dd53e398b2ed)" />
</div>
<!-- end: breadcrumb -->

<!-- begin: content area #main -->
<div id="main">

<!-- begin: left column -->
<div id="col1">
<div id="col1_content" class="clearfix">
<!-- include the left navigation menu -->
<cms:include file="%(link.weak:/system/modules/es.uva.web.portal.template/elements/menu/nav_side.jsp:00aaf6ba-4132-11e1-9e7c-dd53e398b2ed)" />
<!-- include the boxes on the left side -->
<cms:container name="leftcontainer" type="left" width="230" maxElements="8" />
</div>
</div>
<!-- end: left column -->

<!-- begin: right column -->
<div id="col3">
<div id="col3_content" class="clearfix">
<!-- include the boxes on the right side -->
<cms:container name="rightcontainer" type="right" width="230" maxElements="8" />
</div>
</div>
<!-- end: right column -->

<!-- begin: center column -->
<div id="col2">
<div id="col2_content" class="clearfix">
<!-- anchor for accessible link to main content -->
<a id="content" name="content"></a>
<cms:container name="centercontainer" type="center" width="450" maxElements="8" detailview="true"/>
</div>
<div class="clear">&nbsp;</div>
</div>
<!-- end: center column -->
</div>
<!-- end: content area -->

<!-- begin: #footer -->
<cms:include file="%(link.weak:/system/modules/es.uva.web.portal.template/elements/footer.jsp:d6e22369-46a8-11e1-9cda-dd53e398b2ed)" />
<!-- end: #footer -->
</div>
<!-- end: #page -->
</div>
</body></html>

3. Ya para terminar sólo nos falta subir los recursos, como las imágenes y la hoja de estilos que usemos dentro de la carpeta resources.

  • images/logo.jpg
  • images/favicon.ico
  • images/cabecera.jpg
  • css/estilo.css

Donde el fichero estilo.css es el siguiente:

body {

font-family : Arial, Helvetica, sans-serif;
font-size: 0.7em;
margin : 20px 0px 20px 0px;
text-align: center;
background-color: #E4E4CA;
color: black;
}

a, a:link, a:visited {
color: black;
text-decoration: none;
}

a:hover {text-decoration: underline;}
.contenedor {
position: relative;
margin: auto;
text-align: left;
width: 748px;
width: 970px;
}

/*===============================================================================================*/
/* ================================== CABECERA =============================================== */
/*===============================================================================================*/
.cabecera {
position: relative;
background-position: top right;
background-repeat: no-repeat;
height: 71px;
}

.logo {
position: absolute;
left: 7%;
left: 55px;
bottom: 0;
}

.logo img {
border: none;
margin: 0;
padding: 0;
}

/* NAVMAIN */

#nav_main{position:relative;display:block;height:24px;font-size:11px;font-weight:bold;background:#C0C7CC url(../../images/gradient.png) repeat-x top left;}
#nav_main ul{margin:0;padding:0;list-style-type:none;width:auto;}
#nav_main ul li{display:block;float:left;margin:0 1px 0 0;}
#nav_main ul li a{display:block;float:left;text-decoration:none;padding:4px 20px 0 20px;height:20px;}
#nav_main a {color:#000;}
#nav_main a:hover {color:#fff;background:#212E3F;}
#nav_main a.current {color:#fff;background:#212E3F;}

/* NAV LEFT ^*/
#nav_left { margin-bottom: 15px; width: 100%; border-top: 1px #eee solid;}
#nav_left ul {margin: 0; padding: 0; list-style-type: none; }
#nav_left li { margin: 0; }
#nav_left a {display: block;padding: 3px 0px 3px 10%;width: 90%;background-color: #fff;text-decoration: none;border-bottom: 1px #eee solid; }
#nav_left a.current { font-weight: bold;background-color: #aab;}
#nav_left a:hover {color: #fff;background-color: #69C;text-decoration: none;}
#nav_left ul ul a {width: 85%;padding-left: 15%;background-color: #f8f8f8;}
#nav_left ul ul ul a {width: 80%;padding-left: 20%;background-color: #fcfcfc;}
#nav_left ul ul ul ul a {width: 75%;padding-left: 25%;background-color: #fff; }

#breadcrumb {
padding: 5px 0px 5px 20px;
border-bottom: 1px solid;
position: relative;
height: 1%;
}

#breadcrumb a {
color: #444444;
}

#main {
padding: 10px 0;
}

#col1 {
width: 240px;
float: left;

}

#col1_content {
padding: 10px 10px 10px 0px;

}

#col2 {

width: 470px;
margin-left: 240px;
margin-right: 240px;

border-left: ;
border-right: ;
}

#col2_content {

padding: 10px;

}

#col3 {
width: 240px;
float: right;

}

#col3_content {
padding: 10px 0px 10px 10px;

}

#col4 {
width: 460px;
margin-left: 10px;
margin-right: 10px;

border-left: ;
border-right: ;
float: left;
}

#col4_content {
padding: 10px;
max-width: 500px;
}

#col5 {
width: 460px;
margin-left: 480px;
margin-right: 10px;

border-left: ;
border-right: ;
float: inherit;
}

#col5_content {
max-width: 500px;
padding: 10px;

}

#footercnt {
margin: 5px 0px;
clear: both;
width: 100.6%;
}

#footercnt div.box {
margin-right: 5px;
width: 32.5%;
float: left;
min-height: 150px;
}

#footer{position:relative;display:block;height:24px;font-size:11px;font-weight:bold;background:#C0C7CC;top left; padding: 10px; margin-top: 10px;}
#footer ul{margin:0;padding:0;list-style-type:none;width:auto;}
#footer ul li{display:block;float:left;margin:0 1px 0 0;}
#footer ul li a{display:block;float:left;text-decoration:none;padding:4px 20px 0 20px;height:20px;}
#footer a {color:#000;}
#footer a:hover {color:#fff;background:#212E3F;}
#footer a.current {color:#fff;background:#212E3F;}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix { display: block; }

.clear {
clear: both;
}

Y las imágenes son:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.