Manual completo.
Anuncio
1
Manual de uso del Taglib de
Template Saga
www.sagasoluciones.com
info@sagasoluciones.com
C/ Salado 11 Local 10. 41010 Sevilla
T. + 34 954 45 72 75
F. + 34 954 45 75 72
Manual de Creación de Boletín
CONTROL DEL DOCUMENTO
Realizado
28/09/2010
Sergio Raposo Vargas
Director Técnico
Revisado
Control de Modificaciones
Revisión
Nº 1
Fecha
28/09/2010
2
SAGA Soluciones Tecnológicas
Autor/res
Sergio Raposo Vargas
Descripción
Redacción inicial
Manual de Creación de Boletín
Índice de Contenido
1.
INTRODUCCIÓN ............................................................................................................. 4
2.
COMO USARLO EN NUESTRA PLANTILLA ........................................................................ 4
3.
USO DE TAGLIBS .......................................................................................................... 5
1.1
HEAD _______________________________________________________________ 5
1.2
HEADER _____________________________________________________________ 6
1.3
FOOTER _____________________________________________________________ 6
1.4
BREADCRUMB _________________________________________________________ 7
1.5
ELEMENTS ___________________________________________________________ 7
4.
CONSIDERACIONES GENERALES .................................................................................... 8
5.
EJEMPLO COMPLETO .................................................................................................... 9
3
SAGA Soluciones Tecnológicas
Manual de Creación de Boletín
1. Introducción
El taglibs de Template Saga es una herramienta que Saga Soluciones Tecnológicas pone a
disposición de los programadores que usen Template Saga para el desarrollo de sus proyectos.
Gracias a estos tatglibs la creación de un template personalizado pero sin perder el potencial que
ofrece Template Saga es mucho más simple y cómodo haciendo que la experiencia de trabajar
con este paquete de módulos sea mucho más agradable.
Los taglibs desarrollados son cinco (5):
•
•
•
•
•
<saga:head>
<saga:header>
<saga:footer>
<saga:breadcrumb>
<saga:elements>
A lo largo de este manual de uso explicaremos con detalle el funcionamiento y el uso de cada
uno.
2. Como usarlo en nuestra plantilla
El primer paso que debemos dar para usar este taglibs en nuestros templates es importarlo
siguiendo el estándar de jsp. Para ello agregaremos la siguiente línea en la cabecera:
<%@ taglib prefix="saga" uri="http://www.sagasoluciones.com/taglib/saga" %>
A partir de este momento ya podremos empezar a usar los taglibs de Template Saga, pero
necesitamos inicializar antes el objeto principal del template, para ello pondremos las siguientes
líneas al principio de nuestra jsp:
<%
CmsTemplateSagaLayout cms = new CmsTemplateSagaLayout(pageContext,
request, response);
pageContext.setAttribute("cms", cms);
%>
4
SAGA Soluciones Tecnológicas
Manual de Creación de Boletín
3. Uso de Taglibs
1.1 Head
Este tag nos va a permitir añadir los elementos necesarios dentro de los elementos
<head>…</head>, para la correcta visualización de nuestra página.
Dentro de este tipo de bloques se debe añadir la siguiente información:
-
Metatags
Includes de CSS
Includes de JavaScript
Es importante saber que como estamos desarrollando nuestro propio template, este tag no es
obligatorio (ni este ni ningún otro de los comentado en este manual), por lo que podemos incluir
cada uno de estos elementos a mano.
En caso de querer usar el estándar de Template Saga podemos incluir el siguiente tag:
<saga:head/>
En este caso se pintarán todas las opciones. Es equivalente a marcar todos los atributos a true.
En el caso que queramos personalizar nuestra cabecera y solo incluir los elementos que
necesitemos, podemos usar los siguientes atributos de configuración del taglib:
-
-
css : (true - false). En el caso de indicarse el valor true, si incluirá la css configurada por
defecto en el recurso de configuración te estilos de Template Saga (consultar
documentación). En caso contrario no de definirá ninguna css y se vería afectado el sistema
de personalización de columnas.
cssie6: (true - false). Este atributo indicará si es necesario incluir las CSS para internet
explorer 6 (IE6) o no en base al recurso de configuración de Template Saga.
cssie7: (true - false). Este atributo indicará si es necesario incluir las CSS para internet
explorer 7 (IE7) o no en base al recurso de configuración de Template Saga
cssprint: (true - false). Al igual que en los casos contrarios, este atributo nos permite pintar
o no la css de impresión según el recurso de configuración de estilos de Template Saga.
js: (true - false). Este atributo nos permitirá incluir en nuestro template una serie de
javascript comunes a todo nuestro sitio que será configurado en el recurso de estilos de
Template Saga. En dicho recurso indicaremos a la fuerza un recurso del módulo WebOpt
que nos permite comprimir en uno todos los javascript utilizados. En caso contrario
podremos definir nuestros scripts como nos sea necesario, como por ejemplo, usando el
tag <cms:jquery> de OpenCms
5
SAGA Soluciones Tecnológicas
Manual de Creación de Boletín
-
metatag: (true - false). El atributo metatag nos permitirá configurar si deseamos mostrar
los metatag por defecto de Template Saga o configurar unos a medida según nuestras
necesidades. En el estándar de Template Saga se configuran los siguientes atributos:
o title: Pintará la propiedad Title del recurso actual, buscando por herencia en todo
el sites hasta encontrar un título. Esto nos permite configurar un Título genérico
para nuestro sites completo para aquellos contenidos que no personalicen su
valor.
o description: Pintará la propiedad Description del recurso actual, buscando por
herencia en todo el sites hasta encontrar una descripción.
o keywords: Mostrará el metatag de keywords con las palabras clave. Al igual que en
los casos anteriores, buscará en las propiedades del recurso actual buscando por
herencia hasta el raíz si no encuentra valor.
o content-encoding: Por defecto, Template Saga usa ISO-8859-1 como encoding por
defecto. En el caso que se quiera modificar podríamos usar la propiedad contentencoding para personalizar el encoding en nuestros sites.
o Author: Por defecto siempre tomará el valor: Saga Soluciones Tecnologicas.
Expertos OpenCms. Desarrollo basado en Template Saga.
o robots: Por defecto siempre utiliza los valores: index, follow
o expires: Por defecto siempre utiliza el valor: <meta http-equiv=\"Expires\"
content=\"0\" />
NOTA: Recordar que en el recurso de configuración de estilos de Template
Saga se le puede indicar, o bien un css o bien un enlace al recurso del módulo
de WebOpt para la compresión de todas las css utilizadas en una sola.
1.2 Header
El tag Header es el encargado de pintar la cabecera configurada en el recurso de configuración de
estilos de Template Saga. Por defecto siempre que se configure el campo: CabeceraJsp se incluirá
dicha jsp. En caso contrario se mostrará el valor del campo Cabecera.
En este caso no se han establecido atributos adicionales y podemos usarlo tal que:
<saga:header/>
1.3 Footer
El tag Footer es el encargado de pintar el pie configurado en el recurso de configuración de estilos
de Template Saga. Por defecto siempre que se configure el campo: PieJsp se incluirá dicha jsp. En
caso contrario se mostrará el valor del campo Pie.
En este caso no se han establecido atributos adicionales y podemos usarlo tal que:
<saga:footer/>
6
SAGA Soluciones Tecnológicas
Manual de Creación de Boletín
1.4 Breadcrumb
El tag de breadcrumb lo usaremos para mostrar el rastro de migas de nuestra web. Lo podremos
posicionar donde queramos dentro de nuestra plantilla. En el caso de añadirse este tag se utilizará
el componente genérico de Template Saga, o el configurado en recurso de configuración de
nuestro layout.
<saga:breadcrumb/>
1.5 Elements
El tag elements nos va a permitir usar el sistema de configuración de cajas dinámicas de Template
Saga, por lo tanto es uno de los componentes fundamentales de nuestro Template. Usaremos este
tag para pintar las cajas configuradas en nuestro layout correspondientes a la orientación (o wrap)
indicados.
Posee dos atributos de configuración:
-
-
wrap: En este atributo habrá que indicarle la orientación o wrap (contenedor) que
queremos pintar. Existen una serie de orientaciones estándares: left, right, center,
lefttop,righttop,centertop, navtop. Podremos usar cualquier tipo de orientación
personalizada en nuestras plantillas, lo que nos da flexibilidad a la hora de crear
contenedores de cajas en nuestros sites. El componente buscará la orientación indicada en
la lista de cajas configuradas en el layout, y pintará aquellas que se corresponda con dicho
wrap. Este atributo es obligatorio y siempre debemos indicarle un valor.
type: El atributo type nos va a indicar en que recurso debemos buscar las cajas. Existen 3
posibles valores:
o resource: Busca las cajas configuradas en el mismo recurso.
o layout: Busca las cajas configuradas en el layout principal
o sublayout: Busca las cajas del layout padre, es decir, del layout secundario.
En el caso que no indiquemos ningún type se mostrarán los 3 valores en el siguiente orden:
resource, layou, sublayout
Ej:
<saga:elements wrap="centertop"/>
<saga:elements wrap="righttop" type=”resource”/>
<saga:elements wrap="right" type=”layout”/>
<saga:elements wrap="lefttop" type=”sublayout”/>
7
SAGA Soluciones Tecnológicas
Manual de Creación de Boletín
4. Consideraciones generales
Template Saga es mucho más que la configuración de cajas, y para que todo funcione
correctamente debe tener en cuenta las siguientes consideraciones:
-
-
-
Configuración de columnas: Para que el sistema de configuración de columnas funcione, es
decir, podamos cambiar el tamaño y podamos mostrar u ocultar según nuestras
necesidades, el template debe estar formador por 3 columnas cuyo atributo class deben
ser:
o col1: Para la columna de la izquierda.
o col2: Para la columna del centro.
o col3: Para la columna de la derecha.
cms:editable: Para que los editores de contenido de nuestros sitios web puedan usar las
dianas de edición directa debemos usar el tag: <cms:editable/> en nuestra
cabecera(<head></head>)
Template head y foot: Los template-elements que dispone por defecto Template Saga
utilizan los elementos “head” y “foot”, para definir el html por encima y por debajo que
rodea al contenido central, por lo tanto, para que la plantilla funcione correctamente con
los template-elements por defecto debemos respetar esta nomenclatura. De forma que la
plnatilla debe tener la siguiente forma:
<cms:template element="head">
...
</cms:template>
<cms:template element="foot">
...
</cms:template>
8
SAGA Soluciones Tecnológicas
Manual de Creación de Boletín
5. Ejemplo completo
<%@page buffer="none" session="false"
import="com.saga.opencms.templatesaga.layout.*,org.opencms.util.CmsStringUtil,org.o
pencms.jsp.*,org.opencms.file.*,com.alkacon.opencms.weboptimization.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
<%@ taglib prefix="saga" uri="http://www.sagasoluciones.com/taglib/saga" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %><%
CmsTemplateSagaLayout cms = new CmsTemplateSagaLayout(pageContext, request,
response);
pageContext.setAttribute("cms", cms);
%>
<cms:template element="head">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<saga:head css="true"/>
<cms:editable />
</head>
<body>
<div class="page">
<div class="cabecera">
<saga:header/>
<div class="clear"></div>
</div>
<div class="menu">
<%if(cms.getUrlMenu()!=null &&
!CmsStringUtil.isEmptyOrWhitespaceOnly(cms.getUrlMenu()) &&
!cms.getUrlMenu().contains("??") ) {%>
<cms:include file="${cms.urlMenu}" />
<%} %>
<saga:elements wrap="navtop"/>
</div>
<div class="columnas">
<div class="col1">
<div class="col1contenedor">
<saga:elements wrap="lefttop"/>
<saga:elements wrap="left"/>
</div>
</div>
<div class="col3">
<div class="col3contenedor">
<saga:elements wrap="righttop"/>
<saga:elements wrap="right"/>
</div>
</div>
<div class="col2">
<div class="col2contenedor">
<div class="rastro">
<saga:breadcrumb/>
</div>
<saga:elements wrap="centertop"/>
<div class="contenidoCentral">
</cms:template>
9
SAGA Soluciones Tecnológicas
Manual de Creación de Boletín
<cms:template element="body"></cms:template>
<cms:template element="foot">
</div>
<saga:elements wrap="center"/>
</div>
</div>
<div class="clear"></div>
</div>
<div class="pie">
<saga:footer/>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
try{
$("a[rel^='prettyPhoto']").prettyPhoto();
}catch(e){}
});
</script>
</body>
</html>
</cms:template>
10
SAGA Soluciones Tecnológicas
