martes, 14 de septiembre de 2010

Creando Portlet para Liferay en Netbeans

En este ejemplo, vamos a crear un portlet con Netbeans, Portal Pack, Liferay, JSTL y Liferay.

Para este ejemplo estoy usando Netbeans 6.9, Ubuntu 10.04, Liferay 6.0.5





Primero descargamos la version Liferay Community Edition de http://www.liferay.com/downloads/liferay-portal/overview con Bundled Tomcat y damos click en GO

Instalando los plugins en Netbeans
Primeramente descargamos Portal Pack(portal-pack-plugin-3_0_4_all.zip) de http://contrib.netbeans.org/portalpack/pp30/download304.html
Hecho esto descomprimimos el archivo y abrimos Netbeans
Ahora tenemos que instalar el plugin, para esto seleccionamos Tools/Plugins y luego la pestaña Downloaded y damos click en Add Plugins. Buscamos el directorio en el cual descomprimimos Portal Pack y seleccionamos todos los plugins y damos click en OK. Luego damos click en install y dejamos listo el ambiente en Netbeans para trabajar con portlets



Creando nuestro proyecto Portlet
Primero creamos un nuevo proyecto web en Netbeans, para mi caso lo voy a llamar PortletEjemplo.


En la pantalla de selección del servidor damos click sobre add y agregamos el servidor llamado Liferay Portal Server 5.1-x/5.2.x/6.x y damos click en Next
Entonces configuramos el servidor de la siguiente manera(dependiendo de la ruta en donde se encuentra instalado Liferay y su Tomcat embebido), damos click en Next


y dejamos la siguiente pantalla de la siguiente manera

Entonces regresamos a la pantalla de creación de la aplicación , damos click sobre Next

y marcamos Portlet Support. damos click sobre Create Portlet y configuramos los paquetes, títulos, descripciones, etc de nuestro Portlet y damos click en Finish.


Ahora tenemos que dar soporte JSTL a nuestra APP, para esto damos click con el botón derecho y seleccionamos Properties luego Libraries y damos click sobre Add Library y agregamos JSTL 1.1. Damos click en ok

Si abrimos PortletEjemplo.java que se encuentra dentro del paquete com.ejemplo.portlet1 y en el método doView(...) agregamos atributos al request. Dejándolo de la siguiente manera:

public void doView(RenderRequest request,RenderResponse response) throws PortletException,IOException {
response.setContentType("text/html");
request.setAttribute("mensaje1", "Este es el contenido del mensaje1"); request.setAttribute("mensaje2", "Este es el contenido del mensaje2"); request.setAttribute("mensaje3", "Este es el contenido del mensaje3"); PortletRequestDispatcher dispatcher =
getPortletContext().getRequestDispatcher("/WEB-INF/jsp/PortletEjemplo_view.jsp");
dispatcher.include(request, response);
}

Para que el ejemplo sea de una manera gráfica más agradable, vamos a usar Jquery 1.8.4.
El cual lo descargamos de http://jqueryui.com/download


Descomprimimos el zip y copiamos los directorios js y css dentro del directorio "Web Pages" de nuestro proyecto.


Entonces abrimos Web Pages/WEB-INF/jsp/PortletEjemplo_view.jsp y creamos un llamada al taglib de jstl para poder llamar a los scripts y estilos de JQuery, también usamos EL para mostrar la información que colocamos en el request. Con lo cual la página jsp, nos queda de la siguiente manera:
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<link type="text/css" href="<c:url value="/css/ui-lightness/jquery-ui-1.8.4.custom.css"/>" rel="stylesheet" />
<script type="text/javascript" src='<c:url value="/js/jquery-1.4.2.min.js"/>'></script>
<script type="text/javascript" src="<c:url value="/js/jquery-ui-1.8.4.custom.min.js"/>"></script>

<script type="text/javascript">
$(function(){
$("#accordion").accordion({ header: "h3" });
});
</script>


<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div>
<h3><a href="#">Opción 1</a></h3>
<div>${mensaje1}</div>
</div>
<div>
<h3><a href="#">Opción 2</a></h3>
<div>${mensaje2}</div>
</div>
<div>
<h3><a href="#">Opción 3</a></h3>
<div>${mensaje3}</div>
</div>
</div>


Haciendo Deploy del proyecto en Netbeans
Cuando ya terminemos esto, seleccionamos el proyecto y lo ejecutamos.

Como verlo desde Liferay
Luego de ejecutar se abre el navegador de Internet(http://localhost:8080//) y damos click en Sign In, como usuario colocamos test@liferay.com y como clave test y luego click en Sign In. Ahi pasamos el mouse por Add y damos click en More.



Buscamos User Portlets y damos click en Add de Portlet Ejemplo. Con lo cual se nos agrega el nuevo Portlet a nuestro GUI





Nota: PortletEjemplo cannot be cast to javax.portlet.Portlet, se recomienda eliminar el contenido de los directorios temp y work del Tomcat de Liferay

No hay comentarios:

Publicar un comentario