Secciones

De EduWiki
Saltar a: navegación, buscar

Introducción

Este portlet es del tipo "Visor de Contenidos", estándar de Liferay.

Se basa en el uso, y definición, de una estructura y una plantilla asociada para la visualización.

Estructura

Primero de crea la estructura desde el panel de control:

Añadir una Estructura desde el Panel de Control
  • Comprobamos que estamos en "Educarm"
  • En la sección de "Contenido Web"
  • En la pestaña "Estructuras"
  • Y pulsamos "Añadir Estructura"










Tras seguir los pasos adecuados (ver la documentación de Liferay) obtendremos una estructura como ésta:

<source lang="xml"> <?xml version="1.0"?> <root> <dynamic-element name="Columnas-secc" type="text" index-type="" repeatable="false"/> <dynamic-element name="Enlace-secc" type="text" index-type="text" repeatable="true"> <dynamic-element name="Orden-secc" type="text" index-type="" repeatable="false"/> <dynamic-element name="Titulo-secc" type="text" index-type="text" repeatable="false"> <meta-data> <entry name="displayAsTooltip"><![CDATA[true]]></entry> <entry name="required"><![CDATA[true]]></entry> <entry name="instructions"><![CDATA[Título del enlace]]></entry> <entry name="label"><![CDATA[Título]]></entry> <entry name="predefinedValue"><![CDATA[]]></entry> </meta-data> </dynamic-element> <dynamic-element name="Desc-secc" type="text" index-type="text" repeatable="false"> <meta-data> <entry name="displayAsTooltip"><![CDATA[false]]></entry> <entry name="required"><![CDATA[false]]></entry> <entry name="instructions"><![CDATA[Texto alternativo]]></entry> <entry name="label"><![CDATA[Alternativo]]></entry> <entry name="predefinedValue"><![CDATA[]]></entry> </meta-data> </dynamic-element> <dynamic-element name="Imagen-secc" type="document_library" index-type="" repeatable="false"> <meta-data> <entry name="displayAsTooltip"><![CDATA[false]]></entry> <entry name="required"><![CDATA[false]]></entry> <entry name="instructions"><![CDATA[Imagen opcional para el enlace]]></entry> <entry name="label"><![CDATA[Imagen]]></entry> <entry name="predefinedValue"><![CDATA[]]></entry> </meta-data> </dynamic-element> </dynamic-element> </root> </source>

Plantilla

De forma similar a la Estructura, creamos la plantilla (ver documentación Liferay y de Apache Velocity).

Así, obtendremos una la plantilla "Velocity" como la siguienta, asociada a la estructura anterior:

<source lang="html5">

    1. Jorge López
  1. set ($cols = $Columnas-secc.getData())
  2. set ($secciones = $Enlace-secc.getSiblings())
  3. set ($contador = 0)
  4. set ($wi = 100 / $cols)

<style type="text/css"> .redondo { border: 2px solid rgb(164, 35, 52);

 display:block;
 border-radius: 7px;
 -ms-border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 background-position: middle center;
 background-repeat: no-repeat;
 width: 53px;
 height: 53px;
 margin:auto;
 box-shadow:5px 5px 10px #aaaaaa;

} a.redondo {

 margin-top: 3px;
 margin-bottom: 10px;
 text-decoration: none;

} td.secciones {

 text-align: center;
 width:${wi}px;
 vertical-align:bottom;

} </style>

<tbody> #foreach ($s in $sortTool.sort($secciones,"Orden-secc.data")) #if ($mathTool.mod($contador,$cols)==0) #end #if ($mathTool.mod($contador,$cols)==($cols-1)) #end #set ($contador = $contador + 1) #end #set ($contador = $contador - 1) #if ($mathTool.mod($contador,$cols)==0) #else </tr> #end </tbody>

<a class="redondo" href="$s.getData()"

          style="background : url($s.Imagen-secc.getData()) no-repeat scroll center;"
          target="_self" title="$s.Desc-secc.data"> </a>

<footer class="portlet-footer">  </footer> </source>

Añadir Portlet

A continuación hay que añadir el portlet a la página eligiendo el portlet tipo "Visor de Contenidos" desde el menú superior:

Añadiendo el "Visor de contenidos"

Asignar contenido

Una vez añadido, podemos asignarle el contenido seleccionando uno existente o añadiéndolo en este momento, pulsando sobre los iconos pertinentes:

Definiendo contenidos en el "Visor de contenidos"

Crear Secciones

Crear contenido desde "Visor de contenidos"

Si le damos a "Crear contenido", debemos elegir la estructura y la plantilla:

  • Al elegir la plantilla "Secciones", automáticamente se selecciona la estructura asociada.
  • Damos un título, por ejemplo "Secciones Educarm" (las comillas no hay uqe ponerlas)
  • En el campo "Columnas-secc" especificamos cuántas columnas se usarán para la visualización, por ejemplo "2".
  • En el campo "Enlace-secc" ponemos la URL a la que nos llevará esta sección. Si es en el propio portal bastará con la ruta relativa.
  • El campo "Orden-secc" especifica el orden en que se mostrará.
  • El campo "Titulo-secc" define el texto descriptivo.
  • El campo "Alternativo-secc" define el texto que aparecerá al pasar sobre el enlace con el ratón.
  • El campo "Imagen-secc" se usa para especificar que imagen usar. Para ello se pulsa sobre "Seleccionar" y así podremos elegir una imagen previamente guardada en "Documentos y Multimedia"
  • Para añadir otra sección, pulsaremos sobre el signo "más" de color verde, y repetimos los pasos anteriores.
  • Una vez añadidas todas las secciones, pulsamos en "Publicar" para que sea publicado y, por tanto, visible.














Seleccionar Contenido

Selección de contenido web desde "Visor de contenidos"

Si, por contra, ya tenemos las secciones creadas, deberemos elegirlas pulsando sobre el botón de selección, seleccionando desde la ventana emergente:

  • Pulsamos sobre "Secciones Educarm"
  • Pulsamos en "Guardar"
  • Pulsamos sobre el aspa, arriba a la derecha para cerrarla y ver el resultado.

























Aspecto final

Portlet "Secciones"

Y así es el aspecto final.