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"
    xmlns="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd">
    <external-component-plugins>
        <target-component>org.exoplatform.container.definition.PortalContainerConfig</target-component>
        <component-plugin>
            <name>Add PortalContainer Definitions</name>
            <set-method>registerChangePlugin</set-method>
            <type>org.exoplatform.container.definition.PortalContainerDefinitionChangePlugin</type>
            <priority>101</priority>
            <init-params>
                <values-param>
                    <name>apply.specific</name>
                    <value>portal</value>
                </values-param>
                <object-param>
                    <!-- The list of dependencies -->
                    <name>addDependencies</name>
                    <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 -->
                                <value>
                                    <string>hello-portlet</string>
                                </value>
                            </collection>
                        </field>
                    </object>
                </object-param>
            </init-params>
        </component-plugin>
    </external-component-plugins>
</configuration>

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"
        xmlns="http://www.gatein.org/xml/ns/gatein_resources_1_3">
        <portlet>
            <name>Hello</name>
            <module>
                <script>
                    <path>/js/foo.js</path>
                </script>
                <depends>
                    <module>jquery</module>
                    <as>jq</as>
                </depends>
            </module>
        </portlet>
    </gatein-resources>
  2. Add the /js/foo.js file to src/main/webapp:

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

    
    <div class='hello'>
        <h2>Hello</h2>
        <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>
    </div>

The result when you click the "here" button:

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