5.2.5. Adding JavaScript to a portlet

This part instructs you how to add a button to the Hello portlet and to use jQuery to register an event for the button. When you click the "here" button, a popup will appear.

The registration of a JavaScript module is performed via WEB-INF/gatein-resources.xml in your .war. The .war needs to be added as a dependency of portal container, and for this purpose you need to create a .jar.

If you have created a .jar like described in custom extension, you can re-use it knowing that the context is hello-portlet. If you have not, create a .jar that contains conf/configuration.xml:

<configuration xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd http://www.exoplatform.org/xml/ns/kernel_1_2.xsd"
            <name>Add PortalContainer Definitions</name>
                    <!-- The list of dependencies -->
                    <object type="org.exoplatform.container.definition.PortalContainerDefinitionChange$AddDependencies">
                        <field name="dependencies">
                            <collection type="java.util.ArrayList">
                                <!-- the context name that is configured in web.xml -->

Install this .jar to lib folder of the server.

Back to your portlet project, the JavaScript is added like below:

  1. Add the WEB-INF/gatein-resources.xml file:

    <gatein-resources xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_resources_1_3 http://www.gatein.org/xml/ns/gatein_resources_1_3"
  2. Add the /js/foo.js file to src/main/webapp:

    (function($) {
    	$("body").on("click", ".hello .btn", function() {
    		alert("Hello World!");
  3. Modify the jsp/hello.jsp file:

    <div class='hello'>
        <h6>Welcome to Hello portlet!</h6>
        <p>Click <a class='btn'>here</a> to display the popup window.
        <p><i>Powered by eXo Platform.</i></p>

The result when you click the "here" button:

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus