templating opencms 9
Post on 25-May-2015
791 Views
Preview:
TRANSCRIPT
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
top related