Templating OpenCms 9
-
Upload
ramon-gavira-saenz -
Category
Documents
-
view
790 -
download
0
Transcript of Templating OpenCms 9
![Page 1: Templating OpenCms 9](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/1.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/2.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/3.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/4.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/5.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/6.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/7.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/8.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/9.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/10.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/11.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/12.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/13.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/14.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/15.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/16.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/17.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/18.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/19.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/20.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/21.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/22.jpg)
© 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](https://reader035.fdocument.pub/reader035/viewer/2022062319/55621c0ad8b42ac6588b456d/html5/thumbnails/23.jpg)
© 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