Managing Javascript in an application like GateIn 3.2 is a critical part of the configuration work. Configuring the scripts correctly will result in the faster response time from the portal.

Every portlet can have its own Javascript code but in many cases, it is more convenient to reuse some existing shared libraries. For that reason, GateIn 3.2 has a mechanism to easily register the libraries that will be loaded when every page is rendered.

To do so, every WAR deployed in GateIn 3.2 can register the .js files with the gatein-resources.xml configuration file.

The example code snippet below is found in gatein-resources.xml of eXoResources.war .

<javascript>
  <param>
    <js-module>eXo</js-module>
    <js-path>/javascript/eXo.js</js-path>
    <js-priority>0</js-priority>
  </param>
</javascript>

<!-- CORE Javascripts -->
<javascript>
  <param>
    <js-module>eXo.core.Utils</js-module>
    <js-path>/javascript/eXo/core/Util.js</js-path>
    <js-priority>1</js-priority>
  </param>
  <param>
    <js-module>eXo.core.DOMUtil</js-module>
    <js-path>/javascript/eXo/core/DOMUtil.js</js-path>
    <js-priority>1</js-priority>
  </param>
  <param>
    <js-module>eXo.core.Browser</js-module>
    <js-path>/javascript/eXo/core/Browser.js</js-path>
    <js-priority>2</js-priority>
  </param>
  <param>
    <js-module>eXo.core.MouseEventManager</js-module>
    <js-path>/javascript/eXo/core/MouseEventManager.js</js-path>
  </param>
  <param>
    <js-module>eXo.core.UIMaskLayer</js-module>
    <js-path>/javascript/eXo/core/UIMaskLayer.js</js-path>
  </param>
  <param>
    <js-module>eXo.core.Skin</js-module>
    <js-path>/javascript/eXo/core/Skin.js</js-path>
  </param>
  <param>
    <js-module>eXo.core.DragDrop</js-module>
    <js-path>/javascript/eXo/core/DragDrop.js</js-path>
  </param>
  <param>
    <js-module>eXo.core.DragDrop2</js-module>
    <js-path>/javascript/eXo/core/DragDrop2.js</js-path>
  </param>
</javascript>

Note that registered Javascript files will be merged into a single merged.js file when the server loads. This reduces the number of HTTP calls as shown in the homepage source code:

<script type="text/javascript" src="/portal/javascript/merged.js"></script>

Although this optimization is useful for a production environment, it may be easier to deactivate this optimization while debugging Javascript problems.

To do this, set the Java system property exo.product.developing to true. GateIn provides two startup scripts that define this property in gatein-dev.sh (for Linux, Mac) and gatein-dev.bat (for Windows).

To generate the merged.js file, set this property to false. If the property is not set, the default value is false.

The property can be passed as a JVM parameter with the -D option in your gatein.sh or gatein.bat startup script.

Every Javascript file is associated with a module name which acts as a namespace.

Inside the associated Javascript files, the eXo Javascript objects are exposed as global variables named after the module.

For example:

eXo.core.DragDrop = new DragDrop();

It is also possible to use the eXo.require() method to lazy load and evaluate some Javascript codes. This is quite useful for the portlet or gadget applications that will use this Javascript only once. Otherwise, if the library is reusable in several places, it is better to define it in the gatein-resources.xml file.