Version 7


    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.




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



    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=""
           <title>jQuery Portlet</title>

    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 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
      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:



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



    Last, my JSP page looks like:


    <%@ page language="java" contentType="text/html; charset=UTF-8"
    <div class="toggler">
         <div id="effect" class="ui-widget-content ui-corner-all">
             <img src="<%=request.getContextPath()%>/images/gatein_logo.png"/>
    <a href="#" id="button">Show me the magic</a>


    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
      2. Or by downloading the source package:
    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

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


    TesterVersion of the exampleVersion of GateInResultComment
    Thomas Heute1.0.0GateIn 3.1.0OK

    Note: Due to a bug (see JIRA) immediately

    after adding the portlet on a page, the logo

    will showup instead of being hidden, a full

    refresh of the web browser is needed).