2.14.1. Overview of GateIn JavaScript

GateIn JavaScript improvements are built on the top of the notion of JavaScript module. JavaScript does not provide a natural way for namespacing and the notion of module was designed to solve this problem. Namespacing can be perceived as a natural lack, however this lack should be seen as an advantage as modules provide more and more namespacing. Indeed, the module pattern allows creating and resolving dependencies between modules at runtime on demand and loading JavaScript resources in parallel.

To further understand modules, see the RequireJS documentation. You can also read the excellent article written by Ben Cherry about modules in depth.

Module in Ecmascript 6

Ecmascript 6 will provide native modules that you can read more in this article.

In the essence, the notion of module can be viewed as:

At runtime, the dependency system defines a graph of function to execute, the product of each module being injected in the other modules. It can be seen as a simple dependency injection system which can load modules in an asynchronous and parallel fashion providing parallel loading, namespacing and dependency management.

GateIn 3.5 supports different module formats:

You can see another benefits of modules by writing a module consuming the jQuery library as the following example:

(function($) {
  $("body").on("click", ".mybutton", function(event) {
    alert("Button clicked");
  };
})($)
    

The JavaScript side of the module is a merge function that takes the jQuery $ object as an argument:

Now integrate this module in GateIn by declaring it in the gatein-resources.xml file of the war 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>MyPortlet</name>
    <module>
      <script>
        <path>/mymodule.js</path>
      </script>
      <depends>
        <module>jquery</module>
        <as>$</as>
      </depends>
    </module>
  </portlet>
<gatein-resources>
Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus