Portlet Noticias

De EduWiki
Saltar a: navegación, buscar

Descripción

Portlet de desarrollo propio para publicar noticias consultando directamente el esquema del actual Educarm en la BD Oracle. Permite visualizar un número limitado de noticias, ordenadas por fecha de publicación, en dos columnas.

Configuración general

Para que el portlet funcione correctamente, es necesario indicarle que Web Service usar. Esto se hace mediante la inclusión en el archivo

$LIFERAY_HOME/tomcat/webapps/ROOT/WEB-INF/classes/portal-ext.properties 

de las siguientes líneas:

<source lang="bash">

  1. Configuración del portlet de noticias

eduws.url=http://147.84.65.38:8080/EduWS/services/EduWS </source>

Después habrá que reiniciar el servicio liferay en el servidor o servidores mediente el comando:

<source lang="bash"> /etc/init.d/liferay restart </source>

Incluir el portlet en una página

Nos situamos en la página en la que queramos incluir el portlet y realizamos estas acciones:

  1. Pulsamos sobre la opción "Añadir" y en el menú sobre "Más..." Añadir portlet.png

  2. Seleccionamos "Noticias Portada Educarm..." Portlet noticias.png

  3. y arrastramos donde lo queramos: Situar noticias.png

Configuración del portlet

En el portlet se pueden configurar tres vistas:

  • Listado: vista inicial en la que se muestran unas pocas noticias
  • Ampliado: vista en la que se muestra un número mayor de noticias y que ocupa todo el ancho de la página.
  • Detalle: vista de una noticia concreta, al pulsar en las vistas anteriores sobre "Ampliar"

Si lo dejamos por defecto, nos muestra una noticias debajo de la otra.

Para configurar cualquiera de estas vistas se procede del mismo modo:

  1. Identificarse, si no lo estamos ya.
  2. Pulsamos sobre el icono "llave inglesa", a la derecha del titulo del portlet, para acceder al menú de opciones y pulsamos sobre "Preferencias".
  3. Pulsamos sobre la vista que deseemos, por ejemplo "Listado"
  4. Rellenamos los parámetros:
    • Tipo de noticias: debe estar en "Actividades de Centros"
    • Número de noticias: el número de noticias a mostrar
    • Tipo de editor: si queremos usar un editor simple (recomendado) o avanzado
    • Plantilla: Es la plantilla de visualización. Se debe realizar con el lenguaje "Freemarker".
  5. Pulsamos "Modificar" para guardar los cambios, o "Restablecer" para volver a los valores y plantilla por defecto.

La plantillas usadas actualmente son:

Listado

<source lang="html5"> <#ftl encoding="ISO-8859-1">

<#assign cols = 2 /> <#assign contador = 0 /> <style> .redondo-N { border: 2px solid rgb(164, 35, 52); border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow:3px 3px 5px #aaaaaa; margin:auto; } </style>


<section class="portlet" >

<header class="portlet-topper">

Noticias recientes

</header> 
<tbody> <#list noticiaPortada.ROWSET.ROW as n> <#if ((contador % cols) == 0) > </#if> <#if ((contador % cols) == 1) > </#if> <#assign contador = contador + 1 /> </#list> <#if ((contador % cols) == 0) > </tr> </#if> </tbody>
               <a class="" style="text-decoration: none;" href="${detalleURL}&idNoticia=${n.CODNOTICIA}"
               title="${XMLUtils.obtenerHTMLdeXML(n.ENTRADILLA)}">
                   <img style="max-width:50px;" class="redondo-N" src="${n.RUTAFOTOPORTADA}"/>
               </a>
               ${XMLUtils.obtenerHTMLdeXML(n.TITULO)} 
               <a href="${detalleURL}&idNoticia=${n.CODNOTICIA}">(Ampliar)</a>
   <footer class="portlet-footer">
       <a href="${ampliadoURL}"> Ver más noticias</a>
   </footer>

</section>

</source>

Ampliado

<source lang="html5"> <#ftl encoding="ISO-8859-1"> <#-- Plantilla para el listado ampliado que por defecto utiliza todos los campos del XML devuelto por el WebService --> <#assign portlet = PortletJspTagLibs["/WEB-INF/tld/liferay-portlet.tld"] />

<#assign cols = 5 /> <#assign contador = 0 /> <#assign wi = 100/cols /> <style> .redondo-N { border: 2px solid rgb(164, 35, 52); border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow:3px 3px 5px #aaaaaa; margin:auto; } </style>


<section class="portlet" >

<header class="portlet-topper">

Noticias recientes

</header> 
<tbody> <#list noticiaPortada.ROWSET.ROW as n> <#if ((contador % cols) == 0) > </#if> <#if ((contador % cols) == cols - 1) > </#if> <#assign contador = contador + 1 /> </#list> <#assign contador = contador - 1 /> <#if ((contador % cols) != 0) > </tr> </#if> </tbody>
               <a class="" style="text-decoration: none;" href="${detalleURL}&idNoticia=${n.CODNOTICIA}"
               title="${XMLUtils.obtenerHTMLdeXML(n.ENTRADILLA)}">
                   <img style="max-width:50px;" class="redondo-N" src="${n.RUTAFOTOPORTADA}"/>
               </a>
               ${XMLUtils.obtenerHTMLdeXML(n.TITULO)} 
               <a href="${detalleURL}&idNoticia=${n.CODNOTICIA}">(Ampliar)</a>
   <footer class="portlet-footer">
    	<a href="<@portlet.renderURL windowState="NORMAL"/>">Volver</a>
   </footer>

</section> </source>

Detalle

<source lang="html5"> <#ftl encoding="ISO-8859-1">

<#assign aui = PortletJspTagLibs["/WEB-INF/tld/aui.tld"] /> <#assign portlet = PortletJspTagLibs["/WEB-INF/tld/liferay-portlet.tld"] />

<@aui.script> Liferay.provide( window, 'crearGaleria', function(enlaces, titulo) { var A = AUI(); new A.ImageGallery( { links: enlaces, caption: titulo, captionFromTitle: true, preloadNeighborImages: true, preloadAllImages: true, showInfo: true } ).render(); }, ['aui-overlay-context', 'aui-overlay-manager', 'aui-image-viewer-gallery'] ); </@>

<#macro imgPequena img> <img src="${img?substring(0, img?last_index_of("."))}_P${img?substring(img?last_index_of("."))}" class="picture"/> </#macro>

<#assign n = noticia.ROWSET.ROW>

<section class="portlet" id="portlet_<@portlet.namespace />" >

<header class="portlet-topper">

Nocitia ampliada

</header>

${XMLUtils.obtenerHTMLdeXML(n.TITULO)} ${XMLUtils.obtenerHTMLdeXML(n.DFECHA_CREACION)}

<img title="${XMLUtils.obtenerHTMLdeXML(n.TITULO)}" alt="${XMLUtils.obtenerHTMLdeXML(n.ALT_FOTO_PORTADA)}" src="${n.ENLACE_FOTO_PORTADA}">

${XMLUtils.obtenerHTMLdeXML(n.ENTRADILLA)}

${XMLUtils.obtenerHTMLdeXML(n.CUERPOL)}

<#-- Recorre e Incorpora las galerias de la noticia--> <#list n.GALERIAS.GALERIAS_ROW as galeria>

<#list galeria.ARCHIVOS.ARCHIVOS_ROW as imagen> <a href="${imagen.RUTA}" title="${XMLUtils.obtenerHTMLdeXML(imagen.DESCRIPCION)}"> <@imgPequena img="${imagen.RUTA}" /> </a> </#list>

<@aui.script> AUI().ready(function() {

crearGaleria('#galeria_${galeria.CODIGO} a', '${XMLUtils.obtenerHTMLdeXML(n.TITULO)}');

   		});

</@>

	</#list>
	
	
<footer class="portlet-footer">
  	<a href="${volverURL}">Volver</a>
</footer>

</section></source>