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 source code used in this section is available here for downloading.

Note

This is a quick tutorial. You are strongly recommended to read JavaScript Development chapter in GateIn Reference to write your JavaScript safely in eXo Platform.

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:

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>

Add the /js/foo.js file to src/main/webapp:

(function($) {
	$("body").on("click", ".hello .btn", function() {
		alert("Hello World!");
	});
})(jq);

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: