templating opencms 9

23
TEMPLATING OPENCMS 9 CRE ACIÓ N DE UN TEMP L ATE © SAGA SOLUCIONES TÉCNOLOGICAS 1

Upload: ramon-gavira-saenz

Post on 25-May-2015

797 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

TEMPL

ATIN

G OPE

NCMS 9

CR

EA

CI Ó

N D

E U

N T

EM

PL A

TE

1

Page 2: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

PUNTO DE PARTIDA: PLANTILLAS DE HTML ESTÁTICO

2

Page 3: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

VISIÓN GLOBAL DEL PROCESO

1.Analizar Templates Definición de conenedores 2.Adaptar las plantillas a OpenCms ContainerPage_template

1.Cabecera jsp2.Revisión de Enlaces3.Recorte HTML Ubicación de Contenedores4.Creación de Containers

1.Jumbotron2.Definición de Containers

3.Análisis de Recursos1.Configuración de Recursos y formatters

1.demo_Menu2.demo_Texto

4.Creación del Site1.Page Model2.Estructura de Navegación

1.Content Config2.Creación de Páginas

3

Page 4: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

ESQUEMA DE RENDERIZADO

4

Page 5: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

DEMO: C

REACIÓN D

EL SIT

E

• Creación del site

• Creación Módulo Frontend

• Copiar ejemplo estático

• Adaptar template 1. Html estático2. Adaptación header y cmslink

Crear

el S

ite d

e Dem

o

5

Page 6: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

CONTAINERS

La parte más importante es determinar los contenedores necesarios según el template previsto. En este punto es dónde decidimos que partes serán estáticas dentro del template y cuales serán dinámicas.

6

No es necesario modificar el HTML de la plantilla, es solo un ejemplo

Page 7: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

ANÁLISIS DE TEMPLATES

7

Inicio.shtml presentacion.shtml

Page 8: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

DEMO: R

ECORTE H

TML

1. Incluir Jumbotrones en el lugar dónde se ubicará un containerDet

erm

inac

ion d

e la

ubic

ació

n de

los

conta

iner

s

8

Page 9: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

MARCADO DE CONTAINERS

En el punto anterior hemos recortado el template, marcando con recursos Jumbotron de Bootstrap cada uno de los espacios dónde vamos a incluir un container.

En este punto debemos seguir avanzando en el desarrollo del template incluyendo los containers necesarios.

Los containers vienen definidos por un tag Opencms:

<cms:container name="detail" type="center" width="600" maxElements="5" detailview="true"/>

 

• name: Nombre del contenedor. Debe ser único en una misma plantilla.

• type: Tipo del contenedor. El tipo si puede estar repetido y es el que nos permitirá luego indicar en la configuración de los formatter. Por ejemplo podemos indicar un tipo "side" tanto a la columna de la izquierda  como a la de la derecha, de esta forma podremos compartir los formatter para ambas columnas.

• width: Indica el ancho del contenedor. Éste ancho nos permite poder definir distintos formatters en función del ancho del container. No se trata de un ancho real sino un valor relativo a los container.

• maxElements: número máximo de elementos que permite el contenedor. Si se llega al máximo y se añade un nuevo elemento esto provocará que se pierda alguno de los existentes.

• detailview: Este atributo será true si el contenedor contendrá el detalle de un recurso y false en caso contrario. Por lo tanto, lo normal es que solo se configure a true en el contenedor central.

9

Page 10: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

CONTAINER TYPES 1

Dentro de un container se uncluiran los distintos recursos del portal mediante un Formatter.

10

Es posible definir distintos formatters para un recurso en función del ancho de un container o de su tipo

Es posible definir que tipo de recurso es “Renderizable” por cada Formatter

Page 11: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

CONTAINER TYPES 2: IDENTIFICADORES

En nuestro caso particular vamos a definir los containers por tipo, distinguiendo:

Header: Los containers de éste tipo serán los localizados en la zona superior de nuestro template:

TopPage Top Menú Content Full: Zona de contenidos que ocupan el ancho completo Slider TopContentFetured BottomContentFeatured

Content: Zona central de contenidos: ContentTopLeft ContentBottomLeft ContentTopRight ContentBottomRight ContentLeft ContentRight FootLeft FootRight

Foot: Para este tipo dejaremos únicamente : BottomPage

11

Page 12: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

CONTAINER DE DETAIL

Las páginas de detalle o “detail pages” es el elemento que hace que no sea necesario crear una nueva página en el Site Map por cada noticia, articulo o cualquier otro contenido estructurado.

En el template es necesario indicar un container especial, al que se le añade el atributo detailview=”True”. Cuando se muestra un contenido de detalle, éste se incluirá automáticamente en contenedor de detalle.

En nuestro ejemplo nuestro contenedor de detalles estará en el template interior, en el contenedor ContentRight.

12

Page 13: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

DEMO: M

ARCADO DE

CONTAIN

ERS • Inclusión de los

containers

• Sustituimos cada Jumbotron por el Tag container, indicando su id y el tipo que corresponda

• Marcamos el container de detail

Crear

los

tem

plate

s def

initi

vos

13

Page 14: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

RECURSOS Y FORMATTERS

Los recursos son los elementos dinámicos del portal

14

El hecho de usar bootstrap en el renderizado del HTML, permite crear recursos compatibles entre distintos templates

Tipos de Recursos Ejemplo:• Nuevos

• demo_Textos• demo_Menu• demo_Noticias• demo_Eventos

• Reutilizados• Carrusel: slider pagina principal• Image Slider: galería de imágenes pagina principal• Function: Pagina interior (Titulo y Rastro de migas)

• Flexible content: Otros componentes del template

Page 15: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

NUEVOS TIPOS

Cajatexto (demo_texto) 1 Visualización: Contenedores tipo Content

Menu (demo_menu) 2 visualizaciones

Main_Navigation: para los contenedores de tipo Header Side_Navigation: para los contenedores de tipo content

Noticias (demo_noticias) 1 Visualización: Contenedores tipo Content

Eventos (demo_eventos) 1 Visualización: Contenedores tipo Content

15

Page 16: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

DEMO: I

MPLEMEN

TACIÓ

N

NUEVOS T

IPOS

• Definición de Recursos1. XSD

2. Jsp – Tag Formatter

3. Config Xml

Crear

los

tem

plate

s def

initi

vos

16

Page 17: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

CONFIGURACIÓN DE RECURSOS

¿Qué recursos tenemos disponibles?

17

En principio todos los incluidos en el sistema…. Si bien no todos renderizarán contenido compatible con nuestro template

Site Map (Recursos y contenidos)

A nivel de site Map definimos qué recursos están disponibles en nuestro sitio.

Como sabemos que recursos necesitamos , debemos configurar nuestro site Map

Páginas Modelo

Se trata de páginas preconfiguradas que nos permiten crear el sitemap del sitio incluyendo contenidos de estructura por defecto

Page 18: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

DEMO: C

ONFIGURAR S

ITE

MAP Y

MODEL PA

GES

• Definir los recursos Disponibles

• Crear paginas Modelo• Pagina Interior• Pagina Home

• Incluir nuevas SeccionesCre

ar l

os te

mpla

tes

defin

itivo

s

18

Page 19: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

PAGINAS DE DETALLE

19

Las páginas de detalle o “detail pages” es el elemento que hace que no sea necesario crear una nueva página en el Site Map por cada noticia, articulo o cualquier otro contenido estructurado.

Se definen en el SiteMap Manager

Page 20: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

LISTADOS DE RECURSOS

Opciones

1. Function: jsp que implemente el listado. Éste recurso function se incluirá en el container como un recurso

2. Implementar un recurso tipo Listado. Ésta opción será la usada en la demo.

20

Usaremos SolrList de SAGASuite

Page 21: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

DEMO: C

RECION D

E

LISTA

DOS • Añadir SolrList a .Config

• Crear Elements

• Incluir ListadosCre

ar l

os te

mpla

tes

defin

itivo

s

21

Page 22: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

DEMO: E

JEMPL

O DE

• Añadir SolrList a .Config

• Crear Elements

• Incluir ListadosCre

ar l

os te

mpla

tes

defin

itivo

s

22

Page 23: Templating OpenCms 9

© S A G A S O LU C I O N E S T É C N O L O G I C A S

MUCHAS GRACIA

S

23