Manual completo.
Anuncio
1 Manual de uso del Taglib de Template Saga www.sagasoluciones.com [email protected] 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
