Authors

• Thomas Heute

Elements shown in this example

The goal is to show how to create a portlet application that is using jQuery. This in fact would apply to any Javascript framework and for any JSR-286 compliant portal.

Description

The only 'difficulty' is to declare the CSS and Javascript files to include in the head section of the webpage.

portlet.xml

First thing to do is to create the portlet.xml descriptor and specify that we want to add "things" in the head section of the HTML document.

To do so we set the container runtime option javax.portlet.renderHeaders to true.

<?xml version="1.0" encoding="UTF-8"?>
<portlet-app xmlns="http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd"
version="2.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd
   http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd">
   <portlet>
     <portlet-name>jQueryPortlet</portlet-name>
     <portlet-class>org.gatein.application.jQueryPortlet.JQueryPortlet</portlet-class>
     <supports>
       <mime-type>text/html</mime-type>
     </supports>
     <portlet-info>
       <title>jQuery Portlet</title>
     </portlet-info>
     <container-runtime-option>
       <name>javax.portlet.renderHeaders</name>
       <value>true</value>
     </container-runtime-option>
   </portlet>
</portlet-app>

Portlet class

The portlet 2.0 specification defines a new method called "doHeaders" used to define what needs to go in the "head" part or HTTP response, before it actually start to stream the result to the web client.

package org.gatein.application.jQueryPortlet;

import java.io.IOException;

import javax.portlet.GenericPortlet;
import javax.portlet.MimeResponse;
import javax.portlet.PortletException;
import javax.portlet.PortletRequestDispatcher;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;

import org.w3c.dom.Element;

public class JQueryPortlet extends GenericPortlet
{

  // do View goes here

  @Override
  public void doHeaders(RenderRequest request, RenderResponse response)
  {
    Element css = response.createElement("link");
    css.setAttribute("id", "jqueryDemo");
    css.setAttribute("type", "text/css");
    css.setAttribute("rel", "stylesheet");
    css.setAttribute("href", request.getContextPath() + "/css/jqueryDemo.css");
    response.addProperty(MimeResponse.MARKUP_HEAD_ELEMENT, css);

    Element jQuery = response.createElement("script");
    jQuery.setAttribute("type", "text/javascript");
    jQuery.setAttribute("src", request.getContextPath() + "/js/jquery-1.4.2.min.js");
    response.addProperty(MimeResponse.MARKUP_HEAD_ELEMENT, jQuery);

    Element jQueryUI = response.createElement("script");
    jQueryUI.setAttribute("type", "text/javascript");
    jQueryUI.setAttribute("src", request.getContextPath() + "/js/jquery-ui-1.8.1.custom.min.js");
    response.addProperty(MimeResponse.MARKUP_HEAD_ELEMENT, jQueryUI);

    Element myJS = response.createElement("script");
    myJS.setAttribute("type", "text/javascript");
    myJS.setAttribute("src", request.getContextPath() + "/js/myJS.js");
    response.addProperty(MimeResponse.MARKUP_HEAD_ELEMENT, myJS);    
  }
}

In that part I asked to add my own CSS (jQueryDemo.css), my own javascript file (myJS.js) and two javascript files downloaded from jQuery website that are needed for this portlet.

My doView method simply redirect to a JSP page and it looks like:

  @Override
  public void doView(RenderRequest request, RenderResponse response)
  {
    PortletRequestDispatcher prd = getPortletContext().getRequestDispatcher("/jsp/index.jsp");
    try
    {
      prd.include(request, response);
    }
    catch (Exception e)
    {
      e.printStackTrace();
    }
  }

index.jsp

Last, my JSP page looks like:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div class="toggler">
     <div id="effect" class="ui-widget-content ui-corner-all">
         <img src="<%=request.getContextPath()%>/images/gatein_logo.png"/>
     </div> 
</div> 

<a href="#" id="button">Show me the magic</a>

Result

Once added on a page, it will show a link, pressing on the link will make the GateIn logo appear and bouncing (then disappear to try again).

Installation procedure

1. Get a copy of the source:
   1. Either with GIT: git clone git@github.com:theute/jQueryPortlet.git
   2. Or by downloading the source package: http://github.com/theute/jQueryPortlet/archives/1.0.0
2. Type 'mvn package'
3. Copy target/verticalMenu.war into the deploy directory of GateIn and add the portlet on a page

Build system: Maven

Source location: GIT at http://github.com/theute/jQueryPortlet

Compatibility list (please add to this list if you have tested a new version of GateIn):